美文网首页Android知识移动开发
一款炫酷Loading动画--加载失败

一款炫酷Loading动画--加载失败

作者: 336daf225a10 | 来源:发表于2015-12-24 02:56 被阅读426次

    简介

    上一篇文章一款炫酷Loading动画--加载成功,给大家介绍了成功动画的绘制过程,这篇文章将接着介绍加载失败特效的制作。
    相比成功动画,有了前面的经验,失败动画的过程就显得比较简单了。

    动画结构分析

    首先我们来看失败动画的一张图:


    失败动画

    失败动画的状态转移描述如下:

    1、加载过程,画蓝色圆环,当进度为100%时,圆环完成
    2、从右侧抛出蓝色小方块,小方块沿着曲线到达圆环正上方
    3、小方块突然消失,红色感叹号逐渐出现
    4、感叹号完整出现以后,圆环变红色,感叹号发生震动

    由于前两个过程,和加载成功是一样的,所以我们主要来看过程3,4


    红色感叹号逐渐出现

    逐渐”,有这两个字,我们就应该知道这是一个动画效果。
    将感叹号分成两个路径,较长的和较短的,剩下来的工作,就是我们将这个路径逐渐绘制出来。这个思路和之前的绿色勾等的绘制是一样的。
    我们需要一个计时器,两个路径Path,和对应的PathMeasure

    这里我们结合代码说得更清楚些,路径是这样的:

            //感叹号路径
            Path commaPath1 = new Path();
            Path commaPath2 = new Path();
            commaPath1.moveTo(2f * radius+strokeWidth, 1.25f * radius+strokeWidth);
            commaPath1.lineTo(2f * radius+strokeWidth, 2.25f * radius+strokeWidth);
            commaPath2.moveTo(2f * radius+strokeWidth, 2.75f * radius+strokeWidth);
            commaPath2.lineTo(2f * radius+strokeWidth, 2.5f * radius+strokeWidth);
            commaPathMeasure1 = new PathMeasure(commaPath1,false);
            commaPathMeasure2 = new PathMeasure(commaPath2,false);
    

    计时器就简单了,是一个ValueAnimator

            //感叹号动画        
            mCommaAnimation = ValueAnimator.ofFloat(0f, 1f);
            mCommaAnimation.setDuration(500);
            mCommaAnimation.setInterpolator(new AccelerateInterpolator());
            mCommaAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    commaPrecent = (float) animation.getAnimatedValue();
                    invalidate();
                }
            });
    

    最后,利用PathMeasure计算出的部分路径,就可以逐渐将完整路径绘制出来

        /**
         * 绘制感叹号
         */
        private void drawComma(Canvas canvas) {
            Path path1 = new Path();
            commaPathMeasure1.getSegment(0, commaPrecent * commaPathMeasure1.getLength(), path1, true);
            path1.rLineTo(0, 0);
            Path path2 = new Path();
            commaPathMeasure2.getSegment(0, commaPrecent * commaPathMeasure2.getLength(), path2, true);
            path2.rLineTo(0, 0);
            canvas.drawPath(path1, commaPaint);//较长
            canvas.drawPath(path2, commaPaint);//较短
            canvas.drawArc(mRectF, 0, 360, false, commaPaint);//红色圆环
        }
    


    红色感叹号震动

    震动效果怎么实现了,我的思路是旋转画布!
    仔细观察震动效果,会发现过程是这样的:

    向左偏移-》回到中间-》向右偏移-》回到中间-》向左偏移-》。。。

    这意味着震动其实是一个快速偏移的过程,但是要偏移一定角度,再绘制感叹号会比较麻烦。我想出来的办法,就是将画布偏移,而不是将感叹号偏移
    于是我们的计时器是这样的:

            //震动动画
            mshockAnimation = ValueAnimator.ofInt(-1, 0, 1, 0, -1, 0,1,0);
            mshockAnimation.setDuration(1000);
            
            mshockAnimation.setInterpolator(new LinearInterpolator());
            mshockAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {
                    shockPrecent = (int) animation.getAnimatedValue();
                    invalidate();
                }
    
            });
    

    如果是-1,画布就向左旋转30度,0就不旋转,1就向右旋转30度。

    /**
         * 绘制震动效果
         * @param canvas
         */
        private void drawShockComma(Canvas canvas) {
            Path path1 = new Path();
            commaPathMeasure1.getSegment(0, commaPathMeasure1.getLength(), path1, true);
            path1.rLineTo(0, 0);
            Path path2 = new Path();
            commaPathMeasure2.getSegment(0, commaPathMeasure2.getLength(), path2, true);
            path2.rLineTo(0, 0);
            
            if (shockPrecent!=0){
                canvas.save();
                if (shockPrecent==1)
                    canvas.rotate(shockDir, 2 * radius, 2 * radius);
                else if(shockPrecent==-1)
                    canvas.rotate(-shockDir, 2 * radius, 2 * radius);
            }
            canvas.drawPath(path1, commaPaint);
            canvas.drawPath(path2, commaPaint);
            canvas.drawArc(mRectF, 0, 360, false, commaPaint);
            if (shockPrecent!=0) {
                canvas.restore();
            }
        }
    

    其中注意,canvas.save()方法和canvas.restore()方法必须成对使用,然后我们调用canvas.rotate()方法,就可以旋转画布了。

    失败动画


    写在最后

    有了前面的经验,失败动画其实就是新瓶装旧酒了,使用画布旋转来实现震动,这个思路也是比较有趣的。
    对于API不熟悉的朋友,建议用到的时候去查官方文档,或者看看其他朋友的一些介绍基础的文章。
    最后,提供源码下载地址github地址,欢迎大家下载和star。

    未经授权,谢绝转载。
    更多文章,可以关注我的csdn博客,一起学习。

    相关文章

      网友评论

        本文标题:一款炫酷Loading动画--加载失败

        本文链接:https://www.haomeiwen.com/subject/thuvhttx.html