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

简单介绍

上一篇文章一款炫酷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。