android仿58跳动图形加载动画

想要知道关于更多自定义View的实例,请参考:android自定义View索引
先上个效果图,以免大家跑错地了。

image

用高清的每次只能录三秒,不管了,大家能懂啥意思就行。
大家看这效果就感觉比较复杂了,事实上比一般的复杂一点。
看到这个样子的动画,首先我们需要理智分析,不要别表面现象所迷糊了,其实就是两个东西:
一:属性
二:动画
详细说呢就是,一是物体颜色的变化和形状的变化,二是动画的跳动。

属性

那么怎么动态修改一个物体的形状和颜色,从上面的图我们可以看出来,我们使用了三个形状,方形,三角形和圆形,给出三个绘制函数:

方形 :canvas.drawPath(rectPath,paint);
三角形:canvas.drawPath(trianglePath,paint);
圆形 :canvas.drawCircle(controlWidth /2,controlWidth /2,controlWidth /2,paint);

这里的方形和三角形,我们采用的是用Path的方式进行绘制,不知道啥是Path的百度一下吧,为了缩减篇幅就不说了。
好了,那现在我们能够随心所欲的绘制这三个图形,但是我们什么时候该绘制什么图形呢?我们可以写一个枚举类,用来储存我们的形状,然后进行切换:
变形的集中图形列表,分别是方形,三角形,圆形

public enum ShapeKind {
*RECT,TRIANGLE,CIRCLE*
}

枚举类,写好了,包含三个图形,现在来实现了动态切换图形的形状了,我们可以用一个变量去递增,例如,我给个变量 i 初始值为 1 , 但是每次重绘的时候添加了,如果到了100,那么就开始切换成另外一个图形,并且将 i 重置为 100, 然后又去循环,这样就能不断动态的切换形状了,至于颜色不就更简单了,每个图形给不同的画笔,不就有三种颜色了 。
但是有时我们会发现我们的重绘速度太快了,那么我们可以用定时器减慢速度:

handler.postDelayed(new
    Runnable() {
        @Override
        public void run () {
            Message message = new Message();
            message.what = 1;
            handler.sendMessage(message);
        }
    },20);
}

这样的话就会每个0.02秒进行重绘一次了,速度就在我们的掌控之中了。

整合上面的知识,我们就能绘制出一个不断变换形状和颜色的控件了,我们起名为: ** TransformationLoading**, 然后被下面动画的类进行使用即可。

动画

下面看看我们的物体的运动变化,观察到了三种动作,一个上升,一个下降,还有一个旋转,并且都是同时进行的,那么这样我就必须要用到一个平时不常用到的函数了:

AnimatorSet
这个函数的作用就是用来把单独的动画集合起来的工具,简单给个例子:
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(transformationLoading,"translationY",0,jumpDistance);
ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(jumpShadow,"scaleX",0.2f,1f);
downAnimator =new AnimatorSet();
downAnimator.playTogether(objectAnimator, scaleIndication);
downAnimator.setDuration(time);

上面的前两行分别是位移和旋转的动画,第四行则是把两个动画集合在了一起,然后第五行是设置动画时间,基本用法就是这样。

但是我们仔细观察上面的图形,我们发现跳动的物体下面还有一个阴影和加载中三个字,不用慌,看到这里我们想到我们现在这个控件是一个容器,那我们就继承 LinearLayout 吧,起名为 ** JumpLoading ** 。

这样的话就能包含三个控件了,一个TransformationLoading,也就是我们上面属性部分创造的控件,一个阴影,其实就是一个ImageView,外加一个TextView。

那动画我们知道怎么集合再一起了,那动画上面时候开始执行和结束呢?下面给出两个函数:
//界面加载结束

    @Override
    protected void onFinishInflate() {*
        super.onFinishInflate();*
        startAnimate(0);      //开始动画*
    }

//界面被销毁

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        stopAnimate();     //停止动画
    }

两个函数属于linearLayout的生命周期里面的函数,分别是刚被绘制时和被销毁时回调的函数,再这里我们可以开始和结束动画。

说到这里所有的运转流程大家应该也就比较清楚了,具体的操作大家还是要去代码里面感受一下,具体的使用大家直接使用动画控件就行,动画控件的代码是在属性代码的基础上使用的。
先给属性的代码
不断变换图形的加载动画,仿58,参考链接:https://github.com/zzz40500/android-shapeLoadingView
总的来说,颜色变换的速度收两个值控制,一个是:colorChangeRate,一个是time,一个颜色变换率,一个是切换颜色的速度

    public class TransformationLoadingextends View {
        public static ShapeKindshapeKind =RECT;
        private float currentColorChange = 0f;//当前颜色切换总值
        private ArgbEvaluatormAnimPercent =new
        ArgbEvaluator();//用来转化两种颜色的系统工具,详情自查
        private Paintpaint;
        private float controlWidth;//控件宽度
        private Handlerhandler;
    }

//下面的参数可以根据实际需要进行更改

 private int mRectColor;//方形的颜色
    private int mTriangleColor;//三角形的颜色
    private int mCircle;//圆形的颜色
    private float colorChangeRate = 0.02f;//集中图形切换时颜色的变化速度,推荐0.01-0.5,数值越小颜色变化越不突兀
    private long time = 10;//动画的执行速度,推荐10 - 100,数值越大,动画越慢
    private boolean changeKind = false;//是否开启主动切换形状的控制器
    private boolean FlashingOrNot = false;//是否开启颜色闪动
    private boolean animateOrNot = true;//是否执行不断刷新
    public TransformationLoading(Context context) {
        super(context);
        initData();
    }
    public TransformationLoading(Context context, AttributeSet attrs) {
        super(context, attrs);
        initData();
    }

//初始化几个图形的颜色

   private void initData() {
        mRectColor = Color.argb(255, 114, 213, 114);
        mTriangleColor = Color.argb(255, 115, 153, 254);
        mCircle = Color.argb(255, 232, 78, 64);
        paint = new Paint();
        handler = new Handler() {
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                switch (msg.what) {
                    case 1:
                        invalidate();//重绘界面
                       break;
                }
            }
        };
    }
    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        controlWidth = getMeasuredWidth();
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        switch (shapeKind) {
            case RECT://绘制一个正方形
               currentColorChange += colorChangeRate;
                if (FlashingOrNot) {
                    int rectColor = (int) mAnimPercent.evaluate(currentColorChange, mRectColor, mTriangleColor);
                    paint.setColor(rectColor);
                } else {
                    paint.setColor(mRectColor);
                }
                if (currentColorChange > 1) {
                    if (changeKind) {
                        shapeKind = TRIANGLE;
                    }
                    currentColorChange = 0f;
                }
                Path rectPath = new Path();
                rectPath.moveTo(0, 0);
                rectPath.lineTo(controlWidth, 0);
                rectPath.lineTo(controlWidth, controlWidth);
                rectPath.lineTo(0, controlWidth);
                rectPath.close();
                canvas.drawPath(rectPath, paint);
                if (animateOrNot) {
                    toRefresh();
                }
                break;
            case TRIANGLE://绘制一个三角形
               currentColorChange += colorChangeRate;
                if (FlashingOrNot) {
                    int triangleColor = (int) mAnimPercent.evaluate(currentColorChange, mTriangleColor, mCircle);
                    paint.setColor(triangleColor);
                } else {
                    paint.setColor(mTriangleColor);
                }
                if (currentColorChange > 1) {
                    if (changeKind) {
                        shapeKind = CIRCLE;
                    }
                    currentColorChange = 0f;
                }
                Path trianglePath = new Path();
                trianglePath.moveTo(0.5f * controlWidth, 0);
                trianglePath.lineTo(controlWidth, controlWidth);
                trianglePath.lineTo(0, controlWidth);
                trianglePath.close();
                canvas.drawPath(trianglePath, paint);
                if (animateOrNot) {
                    toRefresh();
                }
                break;
            case CIRCLE://绘制一个圆形
               currentColorChange += colorChangeRate;
                if (FlashingOrNot) {
                    int circleColor = (int) mAnimPercent.evaluate(currentColorChange, mCircle, mRectColor);
                    paint.setColor(circleColor);
                } else {
                    paint.setColor(mCircle);
                }
                if (currentColorChange > 1) {
                    if (changeKind) {
                        shapeKind = RECT;
                    }
                    currentColorChange = 0f;
                }
                canvas.drawCircle(controlWidth / 2, controlWidth / 2, controlWidth / 2, paint);
                if (animateOrNot) {
                    toRefresh();
                }
                break;
        }
    }

//用来供主动切换形状的方法

    public void changeShape() {
       currentColorChange = 0f;//重置颜色渐变数值
       changeKind = false;//关闭自动切换图形的功能
       switch (shapeKind) {
            case RECT:
                shapeKind = TRIANGLE;
                break;
            case TRIANGLE:
                shapeKind = CIRCLE;
                break;
            case CIRCLE:
                shapeKind = RECT;
                break;
        }
    }

//重新刷新界面

    private void toRefresh() {
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                Message message = new Message();
                message.what = 1;
                handler.sendMessage(message);
            }
        }, time);
    }

//变形的集中图形列表,分别是方形,三角形,圆形

    public enum ShapeKind {
        RECT, TRIANGLE, CIRCLE
    }

//停止动画

    public void stopAnimate() {
        animateOrNot = false;
    }

//开始动画

    public void startAnimate() {
        if (!animateOrNot) {
            animateOrNot = true;
            toRefresh();
        }
    }

再给动画的代码:

  • 仿58加载动画跳动的小球,和TransformationLoading控件结合起来使用,并且要关闭TransformationLoading的主动切换形状的控制器,也就是:changeKind
    public class JumpLoadingextends LinearLayout {
        private AnimatorSetupAnimator;//上升的动画集合
        private AnimatorSetdownAnimator;//下降的动画集合
        private boolean move = false;//当前有没有执行动画
        private Runnablerunnable;
        private TransformationLoadingtransformationLoading;//跳动的小球
        private ImageViewjumpShadow;//下面的阴影

//下面的参数可以根据实际需要进行更改
        private int jumpDistance = 200;//跳动的距离
        private int time = 500;//跳动一个周期的时间,0.5秒
        private int angle = 180;//跳动过程中的旋转角度
        public JumpLoading(Context context) {
            super(context);
            initData(context);
        }
        public JumpLoading(Context context, AttributeSet attrs) {
            super(context, attrs);
            initData(context);
        }
        private void initData(Context context) {
            LayoutInflater.from(context).inflate(R.layout.jump_layout, this, true);
            transformationLoading = (TransformationLoading) findViewById(R.id.transformationLoading);
            jumpShadow = (ImageView) findViewById(R.id.jumpShadow);
            runnable = new Runnable() {
                @Override
                public void run() {
                    ViewHelper.setRotation(transformationLoading, 180f);
                    ViewHelper.setTranslationY(transformationLoading, 0f);
                    ViewHelper.setScaleX(jumpShadow, 0.2f);
                    move = true;
                    freeFall();//先执行下降动画
                }
            };
        }
//下降动画
        private void freeFall() {
            if (downAnimator == null) {
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(transformationLoading, "translationY", 0, jumpDistance);
                ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(jumpShadow, "scaleX", 0.2f, 1f);
                downAnimator = new AnimatorSet();
                downAnimator.playTogether(objectAnimator, scaleIndication);
                downAnimator.setDuration(time);
                downAnimator.setInterpolator(new AccelerateInterpolator(1.2f));
                downAnimator.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                    }
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        if (move) {
                            transformationLoading.changeShape();
                            rise();
                        }
                    }
                    @Override
                    public void onAnimationCancel(Animator animation) {
                    }
                    @Override
                    public void onAnimationRepeat(Animator animation) {
                    }
                });
            }
            downAnimator.start();
        }
//上升动画
        private void rise() {
            if (upAnimator == null) {
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(transformationLoading, "translationY", jumpDistance, 0);
                ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(jumpShadow, "scaleX", 1f, 0.2f);
                ObjectAnimator objectAnimator1 = null;
                objectAnimator1 = ObjectAnimator.ofFloat(transformationLoading, "rotation", 0, angle);
                upAnimator = new AnimatorSet();
                upAnimator.playTogether(objectAnimator, objectAnimator1, scaleIndication);
                upAnimator.setDuration(time);
                upAnimator.setInterpolator(new DecelerateInterpolator(1.2f));
                upAnimator.addListener(new Animator.AnimatorListener() {
                    @Override
                    public void onAnimationStart(Animator animation) {
                    }
                    @Override
                    public void onAnimationEnd(Animator animation) {
                        if (move) {
                            freeFall();
                        }
                    }
                    @Override
                    public void onAnimationCancel(Animator animation) {
                    }
                    @Override
                    public void onAnimationRepeat(Animator animation) {
                    }
                });
            }
            upAnimator.start();
        }
//开始执行动画,从runnable开始,然后rise和freeFall互调
        public void startAnimate(int delay) {
            if (!move) {
                if (downAnimator != null && downAnimator.isRunning()) {
                    return;
                }
                this.removeCallbacks(runnable);
                if (delay > 0) {
                    this.postDelayed(runnable, delay);
                } else {
                    this.post(runnable);
                }
            }
        }
//停止动画,停止所有动画和监听
        public void stopAnimate() {
            move = false;
            if (upAnimator != null) {
                if (upAnimator.isRunning()) {
                    upAnimator.cancel();
                }
                upAnimator.removeAllListeners();
                for (Animator animator : upAnimator.getChildAnimations()) {
                    animator.removeAllListeners();
                }
                upAnimator = null;
            }
            if (downAnimator != null) {
                if (downAnimator.isRunning()) {
                    downAnimator.cancel();
                }
                downAnimator.removeAllListeners();
                for (Animator animator : downAnimator.getChildAnimations()) {
                    animator.removeAllListeners();
                }
                downAnimator = null;
            }
            this.removeCallbacks(runnable);
        }
//界面被加载结束
        @Override
        protected void onFinishInflate() {
            super.onFinishInflate();
            startAnimate(0);
        }
//界面被销毁
        @Override
        protected void onDetachedFromWindow() {
            super.onDetachedFromWindow();
            stopAnimate();
        }
    }

喜欢我的文章的,请点击关注我哦。万学冬的简书

推荐阅读更多精彩内容