点赞飘心动画组件FlyHeartView

最新推荐文章于 2024-05-08 05:16:41 发布
weixin_34021089
最新推荐文章于 2024-05-08 05:16:41 发布
阅读量216
点赞数
文章标签：移动开发 java
原文链接：https://my.oschina.net/reone/blog/1861985
版权
为什么80%的码农都做不了架构师？>>>
点赞飘心动画组件
package com.reone.likepoint;

import android.animation.Animator;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

import android.animation.AnimatorSet;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.animation.TypeEvaluator;
import android.animation.ValueAnimator;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

/**
 * Created by wangxingsheng on 2018/7/24.
 * 点赞飘心动画组件
 */
public class FlyHeartView extends FrameLayout {

    private List<Drawable> mLikeDrawables; // 图片的集合
    private LayoutParams mLayoutParams; // 用于设置动画对象的位置参数
    private Random mRandom; // 用于产生随机数,如生成随机图片

    private int mViewWidth; // 控件的宽度
    private int mViewHeight; // 控件的高度

    private int mPicWidth; // 图片的宽度
    private int mPicHeight; // 图片的高度

    public FlyHeartView(Context context) {
        this(context, null);
    }

    public FlyHeartView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public FlyHeartView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initParams();
    }

    private void initParams() {
        mLikeDrawables = new ArrayList<>();
        mLikeDrawables.add(generateDrawable(R.drawable.heart0));
        mLikeDrawables.add(generateDrawable(R.drawable.heart1));
        mLikeDrawables.add(generateDrawable(R.drawable.heart2));
        mLikeDrawables.add(generateDrawable(R.drawable.heart3));
        mLikeDrawables.add(generateDrawable(R.drawable.heart4));
        mLikeDrawables.add(generateDrawable(R.drawable.heart5));
        mLikeDrawables.add(generateDrawable(R.drawable.heart6));
        mLikeDrawables.add(generateDrawable(R.drawable.heart7));
        mLikeDrawables.add(generateDrawable(R.drawable.heart8));

        // 获取图片的宽高, 由于图片大小一致,故直接获取第一张图片的宽高
        mPicWidth = dp2px(40);
        mPicHeight = dp2px(38);
        // 初始化布局参数
        mLayoutParams = new LayoutParams(mPicWidth, mPicHeight);
        mLayoutParams.gravity = Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM;

        mRandom = new Random();
    }

    public int dp2px(float dpValue) {
        final float scale = getContext().getResources().getDisplayMetrics().scaledDensity;
        return (int) (dpValue * scale + 0.5f);
    }

    private Drawable generateDrawable(int resID) {
        return ContextCompat.getDrawable(getContext(), resID);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        for (int i = 0, size = getChildCount(); i < size; i++) {
            View childView = getChildAt(i);
            measureChild(childView, widthMeasureSpec, heightMeasureSpec);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mViewWidth = getWidth();
        mViewHeight = getHeight();
    }

    /**
     * 动态添加 FlowView
     */
    public void addLikeView() {
        ImageView likeView = new ImageView(getContext());
        likeView.setImageDrawable(mLikeDrawables.get(mRandom.nextInt(mLikeDrawables.size())));
        likeView.setLayoutParams(mLayoutParams);

        addView(likeView);
        startAnimation(likeView);
    }

    private void startAnimation(View target) {
        // 设置进入动画
        AnimatorSet enterAnimator = generateEnterAnimation(target);
        // 设置路径动画
        ValueAnimator curveAnimator = generateCurveAnimation(target);

        // 设置动画集合, 先执行进入动画,最后再执行运动曲线动画
        AnimatorSet finalAnimatorSet = new AnimatorSet();
        finalAnimatorSet.setTarget(target);
        finalAnimatorSet.playSequentially(enterAnimator, curveAnimator);
        finalAnimatorSet.addListener(new AnimationEndListener(target));
        finalAnimatorSet.start();
    }

    /**
     * 生成进入动画
     *
     * @return 动画集合
     */
    private AnimatorSet generateEnterAnimation(View target) {
        ObjectAnimator alpha = ObjectAnimator.ofFloat(target, "alpha", 0.2f, 1f);
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(target, "scaleX", 0.5f, 1f);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(target, "scaleY", 0.5f, 1f);
        AnimatorSet enterAnimation = new AnimatorSet();
        enterAnimation.playTogether(alpha, scaleX, scaleY);
        enterAnimation.play(alpha);
        enterAnimation.setDuration(150);
        enterAnimation.setTarget(target);
        return enterAnimation;
    }

    /**
     * 生成曲线运动动画
     *
     * @return 动画集合
     */
    private ValueAnimator generateCurveAnimation(View target) {
        BezierCurveEvaluator evaluator = new BezierCurveEvaluator(generateCTRLPoint(1), generateCTRLPoint(2));
        ValueAnimator valueAnimator = ValueAnimator.ofObject(evaluator,
                new Point((mViewWidth - mPicWidth) / 2, mViewHeight - mPicHeight),
                new Point(mRandom.nextInt(mViewWidth - mPicWidth), 0));
        valueAnimator.setDuration(2500);
        valueAnimator.addUpdateListener(new CurveUpdateLister(target));
        valueAnimator.setTarget(target);
        return valueAnimator;
    }

    /**
     * 动画曲线路径更新监听器, 用于动态更新动画作用对象的位置
     */
    private class CurveUpdateLister implements ValueAnimator.AnimatorUpdateListener {
        private View target;

        public CurveUpdateLister(View target) {
            this.target = target;
        }

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            // 获取当前动画运行的状态值, 使得动画作用对象沿着曲线(涉及贝塞儿曲线)运动
            Point point = (Point) animation.getAnimatedValue();
            target.setX(point.x);
            if(point.y < target.getY()){
                target.setY(point.y);
            }
            // 改变对象的透明度
            target.setAlpha(1 - animation.getAnimatedFraction());
            float scale = (1 - animation.getAnimatedFraction() / 2);
            target.setScaleY(scale);
            target.setScaleX(scale);
            target.setRotation(point.rotation);
        }
    }

    /**
     * 生成贝塞儿曲线的控制点
     *
     * @param value 设置控制点 y 轴上取值区域
     * @return 控制点的 x y 坐标
     */
    private Point generateCTRLPoint(int value) {
        Point point = new Point();
        point.x = mRandom.nextInt(mViewWidth - mPicWidth);
        point.y = mRandom.nextInt(mViewHeight / value);
        return point;
    }

    /**
     * 自定义估值算法, 计算对象当前运动的具体位置 Point
     */
    private class BezierCurveEvaluator implements TypeEvaluator<Point> {

        // 由于这里使用的是三阶的贝塞儿曲线, 所以我们要定义两个控制点
        private Point ctrlPoint1;
        private Point ctrlPoint2;

        public BezierCurveEvaluator(Point ctrlPoint1, Point ctrlPoint2) {
            this.ctrlPoint1 = ctrlPoint1;
            this.ctrlPoint2 = ctrlPoint2;
        }

        @Override
        public Point evaluate(float fraction, Point startValue, Point endValue) {

            // 这里运用了三阶贝塞儿曲线的公式, 请自行上网查阅
            float leftTime = 1.0f - fraction;
            Point resultPoint = new Point();

            // 三阶贝塞儿曲线
            resultPoint.x = (float) Math.pow(leftTime, 3) * startValue.x
                    + 3 * (float) Math.pow(leftTime, 2) * fraction * ctrlPoint1.x
                    + 3 * leftTime * (float) Math.pow(fraction, 2) * ctrlPoint2.x
                    + (float) Math.pow(fraction, 3) * endValue.x;
            resultPoint.y = (float) Math.pow(leftTime, 3) * startValue.y
                    + 3 * (float) Math.pow(leftTime, 2) * fraction * ctrlPoint1.y
                    + 3 * leftTime * fraction * fraction * ctrlPoint2.y
                    + (float) Math.pow(fraction, 3) * endValue.y;

            // 根据生成点的位置设置此点应该旋转的角度
            resultPoint.rotation = (float) (- Math.atan((endValue.x - resultPoint.x)/(endValue.y - resultPoint.y)) * 180 / Math.PI % 360);
            return resultPoint;
        }
    }

    /**
     * 动画结束监听器,用于释放无用的资源
     */
    private class AnimationEndListener extends AnimatorListenerAdapter {
        private View target;

        public AnimationEndListener(View target) {
            this.target = target;
        }

        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            removeView(target);
        }
    }

    class Point{
        public float x;
        public float y;
        public float rotation;

        Point() {
        }

        Point(float x, float y) {
            this.x = x;
            this.y = y;
        }
    }
}
转载于:https://my.oschina.net/reone/blog/1861985