【筚路蓝缕】菜鸟历险之微信小程序动画怎么做

作为一个之前没有写过网页，也没有做过微信小程序的小白，这几天被小程序动画逼疯了，现记录要点如下：
先上基本的动画实现逻辑：
js:

Page({
  data: {
  ...
   animation:"",
   animationdata:""
  }
  ...
   onLoad: function () {
  
    this.data.animation = wx.createAnimation({
      duration: 1400,
      timingFunction: 'ease',
      delay: 0,
      transformOrigin: '50% 50% 0'
    })
  },
  xxxx:function(){// 调用动画的函数
   this.data.animation.scale(0.9).rotate(360).step({
      duration: 100,
      delay: 0,
      timingFunction: "ease"
    });
    this.data.animation.scale(1).rotate(0).step({
      duration: 500,
      delay: 0,
      timingFunction: "ease"
    });

    this.setData({
      rotate: this.data.animation.export()
    });
  }
})

wxml:

<xxx ... animation="{{animationdata}}"></xxx>

现在来进行分析：
上官方API图：
【筚路蓝缕】菜鸟历险之微信小程序动画怎么做
我把最重要的三个函数已经表明出来了：
wx.createAnimation：创建动画实例；
step：创建单步动画；
export：导出动画；
其中wx.createAnimation和step的参数是一样的，这里就像是WXML里子样式和父样式的区别一样；wx.createAnimation里的参数指定一套动画参数，step导出单步的时候还可以改变。
再对这两个函数里比较重要的两个参数作一个解释：
duration 动画持续时间，单位 ms
delay 动画延迟时间，单位ms

在实际的制作动画的时候就这几步：
1、wx.createAnimation创建实例；
2、使用scale，rotate这样的函数嵌套指定动画动作
3、step生成单步动画
4、如果需要做连续多步动画重复2,3步
5、export函数导出动画
6、重复2~5制作下一个动画

强调点：
1、wx.createAnimation生成的动画实例和export导出的动画不是一个东西，所以在上面的代码里用了animation和animationdata来区分，在WXML标签里的animation属性应用的动画也是export导出的animationdata。
2、第二步里设置的动画动作是同步执行的，执行参数（时长，延时等）由step和wx.createAnimation的参数共同决定，这里的参数不是叠加，而是指定目标值，比如我先设定scale（0.5）然后step，export，执行会得到一个正确动画，但是如果我马上又生成一个这样的动画，就不会执行，这个的原因就是scale指定的是目标值，将要变化到0.5scale而不是再加上0.5scale。这一点需要重点理解。
3、两个连续的step然后再export导出的是两步连续动画。比如我的例子生成的动画就是先变化到scale(0.9).rotate(360)时长100ms延时0变化样式ease，执行完以后再变化到.scale(1).rotate(0)时长500ms延时0变化样式ease。总的动画时长0+100+0+500=600ms。

好了，最后再打个总结，虽然微信小程序各方面还不完善，但是我们还是要尽量相信官方，比如我之前不清楚这个流程的时候还想到用定时器setTimeOut来做两步动画，结果用两步step可以轻松实现。当然这个个人原因占有很大一部分。筚路蓝缕以启山林，菜鸟历险进行中。

【筚路蓝缕】菜鸟历险之微信小程序动画怎么做

相关推荐