[淘宝小程序]my.createAnimation()的用法与填坑

基本用法

1.在js文件中设置animation

onLoad () {
  this.test();
}
test () {
  var animation = my.createAnimation({
    transformOrigin: "top right",
    duration: 3000,
    timeFunction: "ease-in-out",
    delay: 100,
  })
  animation.scale(3,3).rotate(60).step();
  this.setData({
    myAnimation: animation.export()
  });
}

 在页面加载完成后会自动执行动画。如果是组件的话，要将onLoad替换为didMount。createAnimation可实现的动作很多，可以参考官方文档。

2.在axml中引入animation

使用心得

1.缺点：

  1)结束后基点会重新返回中心，可能导致位置平移。

  2)不论动画有几步，基点都是相对最初状态的位置，所以当基点不是中心时，旋转，缩放，改变长宽都可能产生超出预期的结果。而且根据实际操作来看，以任何非中心点为基点作动画，都只能保证起始态和最终态符合要求，而过程并不符合。

  3)强烈建议不要使用非中心的基点。

2.使用 my.createAnimation 生成的动画是通过过渡（Transition）实现的，只会触发 onTransitionEnd，不会触发 onAnimationStart, onAnimationIteration, onAnimationEnd。

3.如果不更改基点等设置,直接进行下一步动画，可以在step后继续链式调用，两个step之间的所有动作会同时进行。每一步执行时间都等于设置的时间。

4.如果在一段动画后要重新定义基点等基础属性，可以对step传入与createAnimation相同的参数。
step({transformOrigin: 'center'})

注意，每个step的设置影响的是step之前那一步的动画，而且会覆盖createAnimation的基础设置。且下一个step仍然是初始设置。

5.如果确实需要新建一个animation，建议通过onTransitionEnd触发新的animation，不能重复设置，否则只会执行最后一个动画。

总结

官方提供的createAnimation()api并不是很好用，可以用来快速实现一些简单的动画。而且因为是通过transition实现的，所以我们是可以自己实现相同的效果的。千万不要修改基点位置，否则动画会变得一团糟。