自定义 View + 属性动画：灵动的锦鲤

Android

2024-01-23 18:01:50

随着移动互联网的飞速发展，用户对移动应用的体验要求也越来越高。动画作为一种提升用户体验的有效手段，在移动应用开发中得到了广泛应用。本文将介绍如何使用自定义 View + 属性动画来实现一条灵动的锦鲤。

分析

实现一条灵动的锦鲤涉及以下几个关键步骤：

绘制鱼的形状。
让鱼在原地游动。
让鱼游向点击处。

绘制鱼的形状

鱼的形状可以分为以下几个部分：

鱼头：一个圆形。
鱼的身体：两条直线和两条贝塞尔曲线。
鱼鳍：一条直线和一个贝塞尔曲线。

我们可以创建一个自定义 View 来绘制鱼的形状，并在 onDraw() 方法中使用 Canvas 绘图 API 绘制鱼的各个部分。

让鱼在原地游动

让鱼在原地游动，我们可以使用属性动画来改变鱼身体和鱼鳍的形状，从而产生鱼游动的效果。

对于鱼的身体，我们可以使用 ScaleXAnimation 和 ScaleYAnimation 来改变鱼的身体的长度和宽度，从而产生鱼身体弯曲的效果。对于鱼鳍，我们可以使用 RotationAnimation 来改变鱼鳍的角度，从而产生鱼鳍摆动的效果。

让鱼游向点击处

让鱼游向点击处，我们可以使用 ObjectAnimator 来改变鱼的位置。当用户点击屏幕时，我们可以获取点击位置，并使用 ObjectAnimator 将鱼的位置从当前位置移动到点击位置。

实例代码

以下是一个实现自定义 View + 属性动画来实现一条灵动的锦鲤的实例代码：

public class FishView extends View {

    private Paint mPaint;
    private float mFishX;
    private float mFishY;

    public FishView(Context context) {
        super(context);

        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 鱼头
        canvas.drawCircle(mFishX, mFishY, 50, mPaint);

        // 鱼的身体
        Path bodyPath = new Path();
        bodyPath.moveTo(mFishX - 50, mFishY);
        bodyPath.lineTo(mFishX - 100, mFishY);
        bodyPath.cubicTo(mFishX - 150, mFishY - 50, mFishX - 150, mFishY + 50, mFishX - 100, mFishY);
        canvas.drawPath(bodyPath, mPaint);

        // 鱼鳍
        Path finPath = new Path();
        finPath.moveTo(mFishX - 100, mFishY);
        finPath.lineTo(mFishX - 150, mFishY - 50);
        finPath.quadTo(mFishX - 200, mFishY, mFishX - 150, mFishY + 50);
        canvas.drawPath(finPath, mPaint);
    }

    public void startAnimation() {
        // 鱼身体动画
        ScaleAnimation scaleXAnimation = new ScaleAnimation(1, 0.8f, 1, 1, mFishX, mFishY);
        scaleXAnimation.setRepeatCount(Animation.INFINITE);
        scaleXAnimation.setRepeatMode(Animation.REVERSE);
        scaleXAnimation.setDuration(1000);

        ScaleAnimation scaleYAnimation = new ScaleAnimation(1, 1, 1, 0.8f, mFishX, mFishY);
        scaleYAnimation.setRepeatCount(Animation.INFINITE);
        scaleYAnimation.setRepeatMode(Animation.REVERSE);
        scaleYAnimation.setDuration(1000);

        // 鱼鳍动画
        RotateAnimation rotateAnimation = new RotateAnimation(0, 30, mFishX - 150, mFishY);
        rotateAnimation.setRepeatCount(Animation.INFINITE);
        rotateAnimation.setRepeatMode(Animation.REVERSE);
        rotateAnimation.setDuration(1000);

        // 启动动画
        startAnimation(scaleXAnimation);
        startAnimation(scaleYAnimation);
        startAnimation(rotateAnimation);
    }

    public void swimTo(float x, float y) {
        ObjectAnimator animator = ObjectAnimator.ofFloat(this, "x", "y", x, y);
        animator.setDuration(1000);
        animator.start();
    }

}