简介

上一篇文章一款炫酷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() {@Overridepublic 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() {@Overridepublic 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。

一款炫酷Loading动画--加载失败相关推荐

一款炫酷Loading动画--加载成功
简介昨天在简书上看到一篇文章,介绍了一个加载动画的实现过程一款Loading动画的实现思路(一) 只可惜原动画是IOS上制作的,而看了一下,作者的实现思路比较复杂,于是趁着空闲写了一个Androi ...
一款炫酷Loading动画--载入成功
简单介绍昨天在简书上看到一篇文章.介绍了一个载入动画的实现过程一款Loading动画的实现思路(一) 仅仅可惜原动画是IOS上制作的.而看了一下.作者的实现思路比較复杂,于是趁着空暇写了一个And ...
html5 loading游戏,12种炫酷html5 svg加载loading动画特效
12种炫酷html5 svg加载loading动画特效刘振兴代码分享 2015年11月23日 14182 3条评论这是一款使用HTML5 SVG技术制作的12种炫酷html5 svg加载load ...
好看的html登录遮罩提示加载中,jQuery炫酷页面预加载Loading特效插件
fakeLoader.js是一款轻量级的 jQuery 炫酷页面预加载Loading特效插件.它能帮助我们创建一个全屏遮罩效果的旋转loading效果来模拟页面预加载过程. Bower安装 bower ...
android 自定义加载动画效果,Android自定义View实现loading动画加载效果
项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. ...
css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
关于图片预加载loading及加载失败的相关问题
1.为什么网页需要loading 这是因为页面的加载是需要时间的,如果页面加载很快,loading的作用可能还不是特别能够体现,但是如果当页面加载速度不是很快甚至很慢的时候,页面就会出现白屏的状况,如 ...
img加载中显示loading，加载失败显示默认图片（React）
实现效果完整代码 import { useRef, useState } from 'react'; import './index.less'; import errorImg from '@/c ...
img加载中显示loading，加载失败隐藏img并显示自定义内容而且可点击重新加载（React）
图片加载效果完整代码 import { useRef, useState } from 'react'; import './index.less';export default function ...

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

简介

动画结构分析

红色感叹号逐渐出现

红色感叹号震动

写在最后

一款炫酷Loading动画--加载失败相关推荐

最新文章

热门文章