微交互即刻点赞效果实现

Android

2023-11-26 13:04:15

即刻点赞效果的组成

即刻点赞效果是一个复杂的动画，由以下几个部分组成：

点赞按钮的位移和缩放动画。
点赞按钮颜色的渐变动画。
点赞数量的增加动画。

实现即刻点赞效果的步骤

创建一个自定义 View 类，继承自 View。
在自定义 View 的构造函数中，初始化必要的属性和对象。
在自定义 View 的 onDraw() 方法中，绘制点赞按钮和点赞数量。
在自定义 View 的 onTouchEvent() 方法中，处理点赞按钮的点击事件。
在自定义 View 的 performClick() 方法中，执行点赞动画。

点赞动画的实现

点赞动画可以使用 ValueAnimator 类来实现。ValueAnimator 类可以控制动画的属性值随着时间变化而变化。在点赞动画中，我们可以使用 ValueAnimator 来控制点赞按钮的位移、缩放和颜色的变化。

点赞数量的增加动画

点赞数量的增加动画可以使用 TweenAnimation 类来实现。TweenAnimation 类可以控制动画的属性值随着时间变化而变化。在点赞数量的增加动画中，我们可以使用 TweenAnimation 来控制点赞数量的增加。

示例代码

public class LikeButton extends View {

    private Paint mPaint;
    private ValueAnimator mScaleAnimator;
    private ValueAnimator mColorAnimator;
    private TweenAnimation mCountAnimator;

    public LikeButton(Context context) {
        super(context);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL);

        mScaleAnimator = ValueAnimator.ofFloat(1.0f, 1.5f, 1.0f);
        mScaleAnimator.setDuration(300);
        mScaleAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                invalidate();
            }
        });

        mColorAnimator = ValueAnimator.ofObject(ArgbEvaluator.getInstance(), Color.RED, Color.GREEN);
        mColorAnimator.setDuration(300);
        mColorAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mPaint.setColor((int) animation.getAnimatedValue());
                invalidate();
            }
        });

        mCountAnimator = new TweenAnimation(TweenEquations.Easing.Cubic.EaseOut, 0, 100, 300);
        mCountAnimator.addUpdateListener(new AnimationUpdateListener() {
            @Override
            public void onAnimationUpdate(float animatedValue) {
                mCount = (int) animatedValue;
                invalidate();
            }
        });
    }

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

        canvas.scale(mScaleAnimator.getAnimatedFraction(), mScaleAnimator.getAnimatedFraction(), getWidth() / 2, getHeight() / 2);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2, mPaint);

        mPaint.setColor(Color.WHITE);
        mPaint.setTextSize(30);
        canvas.drawText(String.valueOf(mCount), getWidth() / 2 - 10, getHeight() / 2 + 10, mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            mScaleAnimator.start();
            mColorAnimator.start();
            mCountAnimator.start();
            return true;
        }
        return super.onTouchEvent(event);
    }

    @Override
    public void performClick() {
        super.performClick();
        mScaleAnimator.start();
        mColorAnimator.start();
        mCountAnimator.start();
    }
}