《设计师小姐姐说,我做了个状态动画 就问你怕不怕?》之前因
前因
突然有一天,设计师小姐姐说,老板让我做了一个加载状态动画,就问你怕不怕.我淡定的说,给我
gif图.然后小姐姐说不可以.
多大点事.这还能难倒我了.虽然我会的不多,但我会拆分啊.由于时间紧,我这里就不去画渐变了.直接使用图片代替.后续有时间了,改成绘画.
复杂的动画.无非是有简单的动画组合使用.话不多说,先看第一种状态的动画效果,后面我还会把剩下的动画状态补上.
分析
从上面的表现层来说
-
整体动画效果分为两种
- 旋转动画
- 缩放动画
-
从图层来说分为6层:
图层描述 图层样式 底层虚化阴影 
缩放背景 
逆时针光线 
逆时针边线 
圆环 
渐变色 
经过分解之后,来实现动画,就相对来说简单.只需要实现旋转和缩放动画即可.
实现
为了实现上面的动画,我们需要准备两个部分.
-
动画的执行
从官方文档中.我们知道.如果想要执行动画效果,必须要创建一个动画实例,并调用实例的方法来描述动画是旋转还是缩放.然后最后通过动画实例的eport方法导出动画数据,并赋值给
组件的animation属性.基本上满足了我们的需求.-
创建动画实例
createAnimation(time) { return wx.createAnimation({ duration: time,// 动画执行时间 timingFunction: 'linear',//表示动画匀速执行 delay: 0, // 动画延迟事件 transformOrigin: '50% 50% 0' }); }这里就不一一讲解参数含义了,不懂的直接看官方文档即可.从上面的方法中,我们就创建好动画实例了.经我们分析动画.等到三个动画效果.并且每一个动画时长也是不一样的.如下所示
动画效果 动画时长 顺时针旋转动画 500ms 逆时针旋转动画 1000ms 缩放动画 1500ms 这样我们就可以先把动画实例创建一下.
-
定义全局动画实例和基数动画时长
-
在组件进入树节点时,创建动画实例
-
-
描述动画
创建好动画实例后,我们再把对应的动画效果创建一下.如下所示
/// 顺时针动画效果 _clockwiserotaeAnim.rotate(120 * n).step(); /// 逆时针动画效果 _anitclockwiserotaeAnim.rotate(-120 * n).step(); /// 缩放动画效果 /// 定义缩放倍数. let nscale = this.data.scale == 1.3 ? 1.0 : 1.3; _scaleAnim.scale(nscale).step(); -
赋值给animation
拿到描述动画后,我们按照官方文档示例,现在就需要导出和赋值.
-
导出
/// 顺时针动画导出 this.setData({ clockAnima: _clockwiserotaeAnim.export(), }) /// 逆时针动画导出 this.setData({ anitclockAnima: _anitclockwiserotaeAnim.export() }); /// 缩放动画导出 this.setData({ scaleAnim: _scaleAnim.export(), scale: nscale, })
-
-
赋值
由于赋值都是一样的,这里就举例说明一下即可.
<image animation="{{scaleAnim}}" />经过上面的配置,动画就已经初步完成了.如下所示
-
-
无限循环
为了让我们的动画可以一直执行,这里就需要使用定时器,让动画重复执行即可,从上面的动画时长中,我们知道,他们的时间比例时1:2:3.所以,我们只需要一个定时器即可.经过逻辑处理,来执行3个动画.
- 定义定时器的标识
var _intervalId = -1; // 动画定时任务id，通过setInterval来达到无限旋转，记录id，用于结束 - 定时器使用
_intervalId = setInterval(() => { let time = this.data.animatime + _ANIMATION_TIME; /// 每500ms执行一下顺时针旋转动画 that.configAnimation(time / 500 + 1, 0); if (time % 1500 == 0) { /// 每1500ms执行一下缩放动画 that.configAnimation(0, 2); } if (time % 1000 == 0) { /// 每1000ms执行逆时针动画 that.configAnimation(time / 1000 + 1, 1); } this.setData({ animatime: time }) }, _ANIMATION_TIME); - 定时器的销毁
// 动画结束 stopAnimation() { // 这是为了判断定时器是否存在. if (_intervalId > 0) { // 销毁定时器 clearInterval(_intervalId); _intervalId = -1; } },
经过上面定时执行.我们第一种状态的动画就完成.
今天分享主要是在遇到复杂的动画的时候,不要慌,学会拆分动画.一个一个去实现,总会完成的.
- 定义定时器的标识