高仿微信下拉小程序入口动画

Android

2024-02-12 20:06:39

前言

突然发现微信下拉小程序入口动画非常细腻，比较好奇，所以仿照他做了一个，并不是很完美，部分效果还没完成，但总体自我感觉还不错，效果如下：

微信原版

[图片]

仿照效果

[图片]

流程分析

微信下拉小程序入口动画的流程可以分为以下几个步骤：

当用户下拉时，小程序入口会跟随手指移动。
当用户松手时，小程序入口会弹回原位。
如果用户下拉的距离超过一定阈值，小程序入口会打开。

自定义ViewGroup

为了实现这个动画，我们需要创建一个自定义ViewGroup。这个ViewGroup将负责处理小程序入口的移动和动画效果。

自定义ViewGroup的代码如下：

public class PullToRefreshView extends ViewGroup {

    private View childView;
    private float downY;
    private float moveY;
    private boolean isDragging;

    public PullToRefreshView(Context context) {
        super(context);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        childView.measure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        childView.layout(0, 0, childView.getMeasuredWidth(), childView.getMeasuredHeight());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downY = event.getY();
                moveY = downY;
                isDragging = false;
                break;
            case MotionEvent.ACTION_MOVE:
                moveY = event.getY();
                if (!isDragging && moveY - downY > 0) {
                    isDragging = true;
                }
                if (isDragging) {
                    childView.setTranslationY(moveY - downY);
                }
                break;
            case MotionEvent.ACTION_UP:
                if (isDragging) {
                    if (moveY - downY > childView.getMeasuredHeight() / 2) {
                        childView.setTranslationY(childView.getMeasuredHeight());
                    } else {
                        childView.setTranslationY(0);
                    }
                }
                isDragging = false;
                break;
        }
        return true;
    }
}

整合到布局中

将自定义ViewGroup添加到布局文件中，并设置其属性。

<com.example.pulltorefresh.PullToRefreshView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher" />

</com.example.pulltorefresh.PullToRefreshView>