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

Z_ammo

于 2020-03-22 14:32:13 发布

阅读量2.5k

点赞数

分类专栏：淘宝小程序文章标签： vue.js 阿里巴巴小程序

本文链接：https://blog.youkuaiyun.com/Z_ammo/article/details/105027403

版权

本文介绍了在淘宝小程序中使用my.createAnimation()的方法，包括基本用法和注意事项。强调了动画基点设置的挑战，如非中心基点可能导致的位置平移和预期不符的问题。此外，文章指出my.createAnimation()生成的动画通过过渡实现，不支持某些动画事件回调。建议在需要改变基础属性时谨慎操作，并在onTransitionEnd事件中触发新的动画。最后，作者总结称此API适合简单动画，但要避免修改基点以防动画混乱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本用法

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）实现的，只会触

最低0.47元/天解锁文章