Android自定义View实现手指滑动3D变换效果

目录

效果展示

相关文章

核心的逻辑可以参考我的这篇文章：Android自定义View实现3D翻转效果

实现步骤

1.创建TouchRotateLayout
TouchRotateLayout继承自FrameLayout，触摸变换的逻辑都在这个类中实现

public class TouchRotateLayout extends FrameLayout {
    public TouchRotateLayout(@NonNull Context context) {
        this(context,null);
    }
    public TouchRotateLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }
    public TouchRotateLayout(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

2.实现变换逻辑
由于TouchRotateLayout是一个ViewGroup因此我们需要在dispatchDraw方法中进行处理

 @Override
    protected void dispatchDraw(Canvas canvas) {
        //重置Matrix
        mMatrix.reset();
        //保存canvas和camera的状态
        canvas.save();
        mCamera.save();

        //围绕XY轴旋转相应角度
        mCamera.rotateX(mRotateX);
        mCamera.rotateY(mRotateY);

        mCamera.getMatrix(mMatrix);
        //将原点移动到中心位置
        mMatrix.preTranslate(-getWidth() / 2f , -getHeight() / 2f);
        mMatrix.postTranslate(getWidth() / 2f , getHeight() / 2f);

        //操作完并且获取了Matrix后要恢复camera的状态
        mCamera.restore();

        //将操作camera产生的Matrix赋给canvas
        canvas.setMatrix(mMatrix);
        super.dispatchDraw(canvas);
        
        //绘制完之后要恢复canvas的状态
        canvas.restore();
    }

3.X、Y轴旋转角度的计算
接下来我们就需要根据手指触摸的点的X、Y值来计算CameraX、Y轴方向的旋转角度即mRotateX和mRotateY的值

private static final float MAX_DEGREES = 30;//最大旋转角度为30度
 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                calcRotateXY(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_MOVE:
                calcRotateXY(event.getX(),event.getY());
                break;
            case MotionEvent.ACTION_UP:
                calcRotateXY(event.getX(),event.getY());
                break;
        }
        return true;
    }
    /**
     * 根据传来的触摸点来计算旋转角度
     * @param x
     * @param y
     */
    private void calcRotateXY(float x, float y) {
        //算出整个控件宽高的一半
        int halfWidth = getWidth() / 2;
        int halfHeight = getHeight() / 2;

        //计算X轴的旋转角度
        float percentX = (x - halfWidth) / halfWidth;
        mRotateX = (percentX > 1f ? 1f : Math.max(percentX, -1f)) * MAX_DEGREES;

        //计算Y轴的旋转角度
        float percentY = (y - halfHeight) / halfHeight;
        mRotateY = (percentY > 1f ? 1f : Math.max(percentY, -1f)) * MAX_DEGREES;

        //重绘
        postInvalidate();
    }

其中X轴与Y轴的旋转角度的计算方法是这样的，以X轴为例，我们取到触摸点的X轴方向的值减去整个控件宽度的一半，也就是触摸点与中心点之间的距离，然后用此距离除以整个控件的宽度，得出的结果也就是触摸点到中心点X轴方向的距离所占整个控件宽度一半的百分比，然后我们再把符号加上，比如在中心点左边的是负值右边是正值，最后用这个带符号的百分比去与设定好的最大的旋转角度相乘（这里我们设置的是30度），最后得出的就是X轴要旋转的角度。Y轴与X轴的计算方式一样。

这一步完成后得到的效果如下：

我们看到当手指离开屏幕后，整个旋转角度并没有复原，因此接下来我们要做手指抬起复原角度的处理。
4.手指抬起时的复原处理
这里的复原逻辑我们使用一个动画来实现，其中mUpRotateX与mUpRotateY分别时手指抬起时所计算出来的X,Y轴的旋转角度，这里我们做了一个值从1到0变化的ValueAnimator目的是让手指抬起时的X,Y轴的旋转角度由100%逐渐降到0%，通过这样来让复原看起来更平滑

        recoverAnimator = ValueAnimator.ofFloat(1f, 0f);
        recoverAnimator.setDuration(500);
        recoverAnimator.setInterpolator(new BounceInterpolator());
        recoverAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float percent = (float) valueAnimator.getAnimatedValue();
                mRotateX = mUpRotateX * percent;
                mRotateY = mUpRotateY * percent;
                postInvalidate();
            }
        });

除此之外我们还要对onTouchEvent中的代码做相应的调整，即在ACTION_DOWN的时候停止上一次的复原动画，在ACTION_UP的时候执行复原动画

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //如果在触摸的时候上一个复原动画还没执行完毕则先将动画取消
                if(recoverAnimator != null){
                    recoverAnimator.cancel();
                }
                calcRotateXY(event.getX(),event.getY(),false);
                break;
            case MotionEvent.ACTION_MOVE:
                calcRotateXY(event.getX(),event.getY(),false);
                break;
            case MotionEvent.ACTION_UP:
                calcRotateXY(event.getX(),event.getY(),true);
                //手指抬起的时候进行复原
                recover();
                break;
        }
        return true;
    }

    /**
     * 复原角度
     */
    private void recover() {
        recoverAnimator.start();
    }

这样就实现了我们一开始展示的效果了

5.控件的使用方法
使用方法很简单，我们只需要用这个自定义View包裹要实现触摸变换的布局即可，如下所示

<com.itfitness.touchrotatelayout.widget.TouchRotateLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 要实现触摸变换的布局 -->
        <LinearLayout
            android:orientation="vertical"
            android:layout_gravity="center"
            android:gravity="center_horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <Button
                android:text="我是太极八卦图"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <ImageView
                android:src="@drawable/bg"
                android:layout_width="300dp"
                android:layout_height="300dp"/>
        </LinearLayout>
    </com.itfitness.touchrotatelayout.widget.TouchRotateLayout>

案例源码

https://gitee.com/itfitness/touch-rotate-layout