仿抖音之——点赞动画

我这里做的是一个仿抖音点赞的动画，监听双击事件，在双击位置添加图片，对其进行一系列的缩放、移动、旋转、透明度的动画从而达到效果。

效果图：

这里是代码直通车

制作思路：

1.将该ViewGroup的事件通过touch方法传递给创建的SimpleOnGestureListener，将双击事件回调给onDoubleTap方法。
2.在双击的坐标位置，添加一个ImageView，并设置大小和正确的左上边距。
3.观察抖音点赞动画，是通过第一阶段缩小、透明度，第二阶段的放大、透明度、上移的动画组合，进行实现动画效果。

点赞view代码：

public class LikeView extends RelativeLayout {
    private GestureDetector gestureDetector;
    /** 图片大小 */
    private int likeViewSize = 300;
    private int[] angles = new int[]{-30, 0, 30};

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

    public LikeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        //将事件传给GestureDetector处理双击事件
        gestureDetector = new GestureDetector(new MyGestureDetectorListener());
        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                gestureDetector.onTouchEvent(event);
                return true;
            }
        });
    }

    class MyGestureDetectorListener extends GestureDetector.SimpleOnGestureListener {
        @Override
        public boolean onDoubleTap(MotionEvent e) {
            addImageView(e);
            return true;
        }
    }

    /**
     * 在手势双击位置添加imageview
     *
     * @param e
     */
    private void addImageView(MotionEvent e) {
        ImageView imageView = new ImageView(getContext());
        imageView.setImageDrawable(getResources().getDrawable(R.mipmap.ic_like));  //这里如果用background属性，添加在边缘图片会变形
        addView(imageView);
        RelativeLayout.LayoutParams layoutParams = new LayoutParams(likeViewSize, likeViewSize);
        layoutParams.leftMargin = (int) e.getX() - likeViewSize / 2;
        layoutParams.topMargin = (int) e.getY() - likeViewSize / 2;
        imageView.setLayoutParams(layoutParams);

        playAnim(imageView);
    }

    private void playAnim(final ImageView imageView) {
        AnimationSet animationSet = new AnimationSet(true);
        int degrees = angles[new Random().nextInt(3)];
        animationSet.addAnimation(AnimUtils.rotateAnim(0, 0, degrees));
        animationSet.addAnimation(AnimUtils.scaleAnim(100, 2f, 1f, 0));
        animationSet.addAnimation(AnimUtils.alphaAnim(0, 1, 100, 0));
        animationSet.addAnimation(AnimUtils.scaleAnim(500, 1f, 1.8f, 300));
        animationSet.addAnimation(AnimUtils.alphaAnim(1f, 0, 500, 300));
        animationSet.addAnimation(AnimUtils.translationAnim(500, 0, 0, 0, -400, 300));
        animationSet.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                new Handler().post(new Runnable() {
                    public void run() {
                        removeView(imageView);
                    }
                });
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }
        });
        imageView.startAnimation(animationSet);
    }
}

所需动画工具类代码，这里都是用的补间动画。

public class AnimUtils {

    /**
     * 以中心缩放动画
     *
     * @param from
     * @param to
     */
    public static ScaleAnimation scaleAnim(long time, float from, float to, long offsetTime) {
        ScaleAnimation scaleAnimation = new ScaleAnimation(from, to, from, to,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setStartOffset(offsetTime);
        scaleAnimation.setInterpolator(new DecelerateInterpolator());
        scaleAnimation.setDuration(time);
        return scaleAnimation;
    }

    /**
     * 旋转动画
     *
     * @param time
     */
    public static RotateAnimation rotateAnim(long time, int fromDegrees, float toDegrees) {
        RotateAnimation rotateAnimation = new RotateAnimation(fromDegrees, toDegrees,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        rotateAnimation.setDuration(time);
        return rotateAnimation;
    }

    /**
     * 移动动画
     *
     * @param fromX
     * @param toX
     * @param fromY
     * @param toY
     */
    public static TranslateAnimation translationAnim(long time, float fromX, float toX, float fromY, float toY, long offsetTime) {
        TranslateAnimation anim = new TranslateAnimation(fromX, toX, fromY, toY);
        anim.setDuration(time);
        anim.setInterpolator(new DecelerateInterpolator());
        anim.setStartOffset(offsetTime);
        return anim;
    }

    /**
     * 透明度动画
     *
     * @param fromAlpha
     * @param toAlpha
     * @param duration
     */
    public static AlphaAnimation alphaAnim(float fromAlpha, float toAlpha, long duration, long offsetTime) {
        AlphaAnimation anim = new AlphaAnimation(fromAlpha, toAlpha);
        anim.setDuration(duration);
        anim.setStartOffset(offsetTime);
        return anim;
    }
}