Android动画 - 仿花束直播加载动画

效果图

loading.gif

分析动画

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

loadingslow.gif

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

进行绘制

主要运用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();

GitHub地址

有用记得点颗小星星