[淘宝小程序]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

<view class="testView" animation="{
  {myAnimation}}"></view>

使用心得

1.缺点：

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

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

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

2.使用 my.createAnimation 生成的动画是通过过渡（Transition）实现的，只会触