《设计师小姐姐说,我做了个状态动画 就问你怕不怕?》之前因

前因

突然有一天,设计师小姐姐说,老板让我做了一个加载状态动画,就问你怕不怕.我淡定的说,给我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;
         }
    },
    

  经过上面定时执行.我们第一种状态的动画就完成.

  今天分享主要是在遇到复杂的动画的时候,不要慌,学会拆分动画.一个一个去实现,总会完成的.

demo

• DEMO

系列文章

• 完整篇

学习资料

• 官方文档