小程序动画的一些理解购物车的抛物线动画

动画的实现
官方文档是这样说的：
①创建一个动画实例 animation。

 var animation = wx.createAnimation({
   
      duration: 4000,
      timingFunction: 'ease',
      delay: 1000
    });

②调用实例的方法来描述动画。

animation.opacity(0.2).translate(100, -100).step()

③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

this.setData({
   
  ani:  animation.export()
})

组件用animation属性邦定

  <view class="usermotto" animation="{
   {ani}}">
    <text class="user-motto">{
   {
   motto}}</text>
  </view>

wx.createAnimation 只有四个参数，通过设置这四个参数来初始化一个动画实例，这四个参数分别是，
1、duration number 动画持续时间，单位 ms 默认为400
2、timingFunction string 动画的效果

• ‘linear’ 动画从头到尾的速度是相同的
• ‘ease’ 动画以低速开始，然后加快，在结束前变慢
• ‘ease-in’ 动画以低速开始
  具体参考小程序

3、delay number 动画延迟时间，单位 ms
4、transformOrigin string ‘50% 50% 0’ 参考原点
'50% 50% 0’表示屏幕中心为参考原点
‘left top 0’ 表示屏幕左上角为参考原点

实例的方法常用的有
rotate(number angle)从原点顺时针旋转一个角度
rotate3d(number x, number y, number z, number angle)从 固定 轴顺时针旋转一个角度
rotateX(number angle)从 X 轴顺时针旋转一个角度
rotateY(number