一款炫酷Loading动画--加载失败
来源:互联网 发布:audition for mac 编辑:程序博客网 时间:2024/05/21 21:41
简介
上一篇文章一款炫酷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。
- 一款炫酷Loading动画--加载失败
- 一款炫酷Loading动画--加载成功
- loading 加载动画
- loading加载动画
- css3加载动画loading
- cocos2d-x - loading加载动画
- [Cocos2d-x] loading加载动画
- CSS实现Loading加载动画
- Loading动画--加载成功--圆环
- 各类加载loading动画效果
- 仿美团loading加载中的动画
- 【求解】CSS3动画loading加载
- 30种CSS3炫酷页面预加载loading动画特效
- 一款Loading动画的实现思路(一)
- 收集炫酷的Android Loading动画
- Flash Loading 加载动画效果代码
- CSS3制作加载中loading动画效果
- android应用加载过程中的loading动画
- 使用Mahout搭建推荐系统之入门篇4-Mahout实战
- Java之多线程内存可见性_1
- python34+pyserial2.7+PyQt5开发环境配置方法
- QT配置问题
- 单选,多选及其OnCheckedChange监听器
- 一款炫酷Loading动画--加载失败
- Rich Go language support for Visual Studio Code
- 3g驱动移植
- C#使用参数数组
- C++内联(inline)
- 三种按钮,普通,带背景,背景切换
- Velocity新手入门
- Android酷炫实用的开源框架(UI框架)
- 5-6 UVA 1595 Symmetry对称轴