Android直播点赞动画和Yahoo摘要动画

前段时间看红橙Darren写的关于自定义View的相关文章，决定自己撸一撸，让记忆更深刻

先看下这两个动画的效果

效果.gif

点赞动画

1.将可爱的点赞图标(ImageView)添加到自定义View中
2.利用贝塞尔估值器为每一个添加的ImageView设置路径,并设置插值器
3.动画完成之后将ImageView从View中移除

来分析下源码,100多行

//自定义View继承RelativeLayout
public class LoveIconView extends RelativeLayout {
//View自身的宽度和高度
private int width, height;
//ImageView的宽高
private int iconWidth, iconHeight;

//插值器列表
private Interpolator[] interpolators;
//随机数
private Random random = new Random();

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

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

public LoveIconView(Context context, AttributeSet attrs, int defStyleAttr) {
    this(context, attrs, defStyleAttr, 0);
}

public LoveIconView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);

    init();
}

private void init() {
    initInterpolator();
}

//初始化了一些插值器，这样每一个ImageView就可以有不同的移动速率了
private void initInterpolator() {
    interpolators = new Interpolator[]{
            new LinearInterpolator(),
            new AccelerateDecelerateInterpolator(),
            new AccelerateInterpolator(),
            new DecelerateInterpolator(),
    };
}

//获取View的宽高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    width = getMeasuredWidth();
    height = getMeasuredHeight();
}

//在离开窗口后移除View
@Override
protected void onDetachedFromWindow() {
    removeAllViews();
    super.onDetachedFromWindow();
}

private void startAnimator(ImageView view) {
    //曲线的两个顶点
    PointF pointF1 = new PointF(
            random.nextInt(width),
            random.nextInt(height / 2) + height / 2);
    PointF pointF2 = new PointF(
            random.nextInt(width),
            random.nextInt(height / 2));
    //曲线的开始和结束点
    PointF pointStart = new PointF((width - iconWidth) / 2,
            height - iconHeight);
    PointF pointEnd = new PointF(random.nextInt(width), random.nextInt(height / 2));

    //贝塞尔估值器
    BezierEvaluator evaluator = new BezierEvaluator(pointF1, pointF2);
    ValueAnimator animator = ValueAnimator.ofObject(evaluator, pointStart, pointEnd);
    animator.setTarget(view);
    animator.setDuration(3000);
    animator.addUpdateListener(new UpdateListener(view));
    animator.addListener(new AnimatorListener(view, this));
    animator.setInterpolator(interpolators[random.nextInt(4)]);

    animator.start();
}

//添加ImageView并开始动画
public void addLoveIcon(int resId) {
    ImageView view = new ImageView(getContext());
    view.setImageResource(resId);
    iconWidth = view.getDrawable().getIntrinsicWidth();
    iconHeight = view.getDrawable().getIntrinsicHeight();

    addView(view);
    startAnimator(view);
}

public static class UpdateListener implements ValueAnimator.AnimatorUpdateListener {

    private WeakReference<ImageView> iv;

    public UpdateListener(ImageView iv) {
        this.iv = new WeakReference<>(iv);
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        //更新ImageView的透明度
        PointF pointF = (PointF) animation.getAnimatedValue();
        ImageView view = iv.get();
        if (null != view) {
            view.setX(pointF.x);
            view.setY(pointF.y);
            view.setAlpha(1 - animation.getAnimatedFraction() + 0.1f);
        }
    }
}

public static class AnimatorListener extends AnimatorListenerAdapter {

    private WeakReference<ImageView> iv;
    private WeakReference<LoveIconView> parent;

    public AnimatorListener(ImageView iv, LoveIconView parent) {
        this.iv = new WeakReference<>(iv);
        this.parent = new WeakReference<>(parent);
    }

    @Override
    public void onAnimationEnd(Animator animation) {
        //动画结束时移除View
        ImageView view = iv.get();
        LoveIconView parent = this.parent.get();
        if (null != view
                && null != parent) {
            parent.removeView(view);
        }
    }
}
}

这里用到了贝塞尔三次方公式

贝塞尔公式.jpg

下面是基于这个公式来实现的贝塞尔估值器实现

public class BezierEvaluator implements TypeEvaluator<PointF> {

private PointF point1, point2;
private PointF point;

public BezierEvaluator(PointF point1, PointF point2) {
    this.point1 = point1;
    this.point2 = point2;
    point = new PointF();
}

@Override
public PointF evaluate(float t, PointF startValue, PointF endValue) {
    point.x = startValue.x * (1 - t) * (1 - t) * (1 - t)
            + 3 * point1.x * t * (1 - t) * (1 - t)
            + 3 * point2.x * t * t * (1 - t)
            + endValue.x * t * t * t;
    point.y = startValue.y * (1 - t) * (1 - t) * (1 - t)
            + 3 * point1.y * t * (1 - t) * (1 - t)
            + 3 * point2.y * t * t * (1 - t)
            + endValue.y * t * t * t;
    return point;
}
}

这个动画主要涉及到的知识点
1.贝塞尔曲线公式
2.ValueAnimator的使用(自定义属性时的使用)

简单说下ValueAnimator，属性动画ObjectAnimator就是继承自这个类，这个类就是一个数值动画类，用来计算具体的动画数据值，除了可以使用ofInt，ofFloat等基本属性外，还可以实现自定义属性，实现数据的变化（ofObject）需要传入一个参数(实现TypeEvaluator)，这里BezierEvaluator实现了TypeEvaluator，利用贝塞尔三次方公式来计算两个PointF的估值.

---

Yahoo新闻摘要动画

1.绘制小圆，并让一直旋转
2.小圆聚合动画
3.圆圈扩展动画，让下面的视图展现出来

OK来分析源码，200行左右，比较简单
首先看下类成员定义

//因为View继承自SurfaceView，所以需要这个
private SurfaceHolder surfaceHolder;

//View width/2 height/2 center point（这里的宽度和高度就是中心点坐标位置，不是View的宽高）
private int width, height;

//Draw small circle(绘制小圆)
private Paint paint;

//Draw expanded circle(绘制最后扩展圆来展现下层控件)
private Paint expandPaint;
//Small color list(可以定义一些小圆的颜色列表)
private int[] colors;
//小圆转圈动画
private ValueAnimator circleAnimator;
//小圆向外扩展动画
private ValueAnimator expandAnimator;
//小圆向内聚合动画
private ValueAnimator collapsingAnimator;
//最后的扩展显示下层控件的动画
private ValueAnimator filterAnimator;

//Current rotate angle(当前的旋转角度)
private float rotateAngle;
//分别为小圆半径，大圆半径，扩展动画的圆的半径（变化的）
private int innerRadius, outerRadius, expandRadius = -1;
//The angle between each circle(每个小圆之间的间隔角度)
private float gapAngle;
//The factor for collapsing and expand(小圆聚合的乘数因子)
private float factor = 1.0f;
//Status (Loading状态)
private Status status = Status.IDLE;
//Expand animator set(小圆集合以及最后铺开显示下层控件的动画集合)
private AnimatorSet animatorSet;
//Circle animator set(小圆转圈的动画集合)
private AnimatorSet circleAnimatorSet;
//绘图的模式
private PorterDuffXfermode mode = new PorterDuffXfermode(PorterDuff.Mode.DST_OUT);

定义了一个状态枚举类

public enum Status {
    IDLE,//初始状态
    LOADING,//正在加载
    COMPLETE,//加载完成
}

初始化

public YahooLoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    //这里定义了两个自定义属性，可以设置小圆的大圆的半径
    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.YahooLoading);
    innerRadius = a.getDimensionPixelSize(R.styleable.YahooLoading_innerRadius, 15);
    outerRadius = a.getDimensionPixelSize(R.styleable.YahooLoading_outerRadius, 160);
    a.recycle();

    surfaceHolder = getHolder();

    initData();
    initAnimator();
    
    //这句话需要，否则图层最后会显示黑色
    setLayerType(LAYER_TYPE_HARDWARE, null);
    //需要设置背景色，否则View无效果
    setBackgroundColor(Color.WHITE);

    //SurfaceView需要设置这句话，能让图层在最上层
    setZOrderOnTop(true);
    surfaceHolder.addCallback(this);
}  

初始化一些数据

private void initData() {
    //默认给了小圆6个颜色，并计算了小圆的间隔角度
    colors = new int[]{Color.RED, Color.BLUE, Color.GREEN, Color.CYAN, Color.DKGRAY, Color.GRAY};
    gapAngle = (float) Math.PI * 2 / colors.length;

    paint = new Paint();
    paint.setAntiAlias(true);

    expandPaint = new Paint();
    expandPaint.setAntiAlias(true);
}

核心的动画效果定义

    private void initAnimator() {
    circleAnimator = ValueAnimator.ofFloat(0, (float) Math.PI * 2);
    circleAnimator.setDuration(1600);
    circleAnimator.setRepeatCount(ValueAnimator.INFINITE);
    circleAnimator.setInterpolator(new LinearInterpolator());
    circleAnimator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            expand();
        }
    });
    circleAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            if (Status.COMPLETE == status) {
                animation.cancel();
                return;
            }
            rotateAngle = (float) animation.getAnimatedValue();
            invalidate();
        }
    });

    expandAnimator = ValueAnimator.ofFloat(1, 1.5f);
    expandAnimator.setDuration(200);
    expandAnimator.setRepeatCount(0);
    expandAnimator.setInterpolator(new DecelerateInterpolator());
    expandAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            factor = (float) animation.getAnimatedValue();
            invalidate();
        }
    });

    collapsingAnimator = ValueAnimator.ofFloat(1.5f, 0f);
    collapsingAnimator.setDuration(300);
    collapsingAnimator.setRepeatCount(0);
    collapsingAnimator.setInterpolator(new AccelerateInterpolator());
    collapsingAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            factor = (float) animation.getAnimatedValue();
            invalidate();
        }
    });


    WindowManager windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
    Point point = new Point();
    windowManager.getDefaultDisplay().getSize(point);
    int width = point.x / 2;
    int height = point.y / 2;
    filterAnimator = ValueAnimator.ofInt(0, (int) Math.sqrt(width * width + height * height));
    filterAnimator.setDuration(2000);
    filterAnimator.setRepeatCount(0);
    filterAnimator.setInterpolator(new LinearInterpolator());
    filterAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            expandRadius = (int) animation.getAnimatedValue();
            invalidate();
        }
    });
    filterAnimator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            resetData();
            setVisibility(GONE);
        }
    });

    animatorSet = new AnimatorSet();
    animatorSet.playSequentially(expandAnimator, collapsingAnimator, filterAnimator);

    circleAnimatorSet = new AnimatorSet();
    circleAnimatorSet.playTogether(circleAnimator);
}

核心的绘制方法

    @Override
protected void onDraw(Canvas canvas) {
    if (expandRadius > -1) {
        expandPaint.setColor(Color.WHITE);
        expandPaint.setXfermode(mode);
        canvas.drawCircle(width, height, expandRadius, expandPaint);
    }

    for (int i = 0; i < colors.length; i++) {
        paint.setColor(colors[i]);
        float radius = (outerRadius - innerRadius) * factor;
        float cx = (float) (radius * Math.sin((double) (rotateAngle + i * gapAngle)) + width);
        float cy = (float) (height - radius * Math.cos((double) (rotateAngle + i * gapAngle)));
        if (radius > innerRadius) {
            canvas.drawCircle(cx, cy, innerRadius, paint);
        } else {
            canvas.drawCircle(cx, cy, radius, paint);
        }
    }
}

这里遇到的一个坑就是PorterDuffXfermode

这个模式的官方的那张图有些误导，需要自己亲自实践一下，理解每种模式的含义。关于PorterDuffXfermode的具体解释网上有很多

最后贴上GitHub源码地址
https://github.com/ly85206559/AndroidCustomizeView/tree/master
欢迎Fork和Star，这个项目有新的动画就会往里面添加，也可以在评论区留言看那些动画比较不错，我来实现并往里面添加