Android仿花束直播加载动画-技术圈

效果图

分析动画

首先分析动画，如上图所示：动画由三个圆形几何图形组成，中间圆形图案不动，左侧右侧圆形图案向中间平移，到达中间后，圆形图案变换颜色，在进行反向平移。

动画慢放如下：

慢放图我们可以看出圆形图案交换颜色的顺序为：
左->中中->右右->左

进行绘制

主要运用Drawable动画进行绘制。

public class ThreeBallsLoadingDrawable extends Drawable implements Animatable {}

准备三只画笔，分别绘制三个圆形图案

private Paint mLeftPaint,mMiddlePaint,mRightPaint;
    @Override    public void draw(Canvas canvas) {
        canvas.save();        //平移        canvas.translate(translateX,0);        canvas.drawCircle(RADIUS,mHeight/2,RADIUS,mLeftPaint);        canvas.restore();
        canvas.save();        canvas.drawCircle(mWidth/2,mHeight/2,RADIUS,mMiddlePaint);        canvas.restore();
        canvas.save();        canvas.translate(-translateX,0);        canvas.drawCircle(mWidth-RADIUS,mHeight/2,RADIUS,mRightPaint);        canvas.restore();    }

进行动画部分代码编写，主要运用ValueAnimator

分析动画，左侧圆形图案，向右平移到中间，然后变换颜色，在反向平移到原来位置。所以我们动画分为两部分，向内平移和向外平移。向内平移动画结束，变化圆形图案颜色（变化策略在上方）

    /**     * 向内平移     */    private void innerMove() {        final ValueAnimator translateXInnerAnimation = ValueAnimator.ofFloat(0,170);        translateXInnerAnimation.setDuration(ANIMATION_DURATION);        translateXInnerAnimation.setInterpolator(new AccelerateInterpolator());        translateXInnerAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                translateX = (float) translateXInnerAnimation.getAnimatedValue();                invalidateSelf();            }        });

        translateXInnerAnimation.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                super.onAnimationEnd(animation);                //变换颜色                exchangeColor();                expendMove();            }        });
        translateXInnerAnimation.start();    }

    /**     * 向外平移     */    private void expendMove(){        final ValueAnimator translateXExpendAnimation = ValueAnimator.ofFloat(170,0);        translateXExpendAnimation.setDuration(ANIMATION_DURATION);        translateXExpendAnimation.setInterpolator(new DecelerateInterpolator());        translateXExpendAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                translateX = (float) translateXExpendAnimation.getAnimatedValue();                invalidateSelf();            }        });

        translateXExpendAnimation.addListener(new AnimatorListenerAdapter() {            @Override            public void onAnimationEnd(Animator animation) {                super.onAnimationEnd(animation);                innerMove();            }        });
        translateXExpendAnimation.start();    }

    /**     * 变换颜色方法     */    private void exchangeColor(){        int mLeftPaintColor = mLeftPaint.getColor();        int mRightPaintColor = mRightPaint.getColor();        int mMiddlePaintColor = mMiddlePaint.getColor();        mLeftPaint.setColor(mRightPaintColor);        mRightPaint.setColor(mMiddlePaintColor);        mMiddlePaint.setColor(mLeftPaintColor);    }

动画使用

在ImageView中设置drawable即可

ThreeBallsLoadingDrawable threeBallsLoadingDrawable  = new ThreeBallsLoadingDrawable();imageView.setImageDrawable(threeBallsLoadingDrawable);threeBallsLoadingDrawable.start();

源码地址：

https://github.com/mariolu0605/ShapeLoading

到这里就结束啦。