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地址

有用记得点颗小星星

你可能感兴趣的:(Android动画 - 仿花束直播加载动画)