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

动画的实现
官方文档是这样说的：
①创建一个动画实例 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 angle)从 Y 轴顺时针旋转一个角度
rotateZ(number angle)从 Z 轴顺时针旋转一个角度
scale(number sx, number sy)缩放
scale3d(number sx, number sy, number sz)缩放
scaleX(number scale)缩放 X 轴
scaleY(number scale)缩放 Y 轴
scaleZ(number scale)缩放 Z 轴
skew(number ax, number ay)对 X、Y 轴坐标进行倾斜
translate(number tx, number ty)平移变换
translate3d(number tx, number ty, number tz)对 xyz 坐标进行平移变换
.translateX(number translation)对 X 轴平移
translateY(number translation)对 Y 轴平移
translateZ(number translation)对 Z 轴平移
opacity(number value)设置透明度

实例：小程序购物车加的抛物线动画
点击加号调用handleclik 生成一个从加开始到购物车的抛物线动画
原理:由于小程原生不能生成抛物线动画，所以把小球包在两个中，为处层view生成一个timingFunction参数为 - ‘ease’ 动画以低速开始的动画，为处层view生成一个timingFunction参数为 - ‘linear’ 动画从头到尾的速度是相同的动画.

 <view bindtap="handleClick" class='Arrow'>
      <image src='../../assets/icons/addBtn.png'></image>
 </view>
 <view animation="{{animationY}}" style="position:fixed;top:{{ballY}}px;" hidden="{{!showBall}}">
      <view class='Arrow' animation="{{animationX}}" style="position:fixed;left:{{ballX}}px;">
        <image src='../../assets/icons/addBtn.png'></image>
      </view>
 </view>    

 handleClick: function(e) { // x, y表示手指点击横纵坐标, 即小球的起始坐标
    var that = this
    let ballX = e.detail.x,
      	ballY = e.detail.y;
    that.createAnimation(ballX, ballY);
  },
  setDelayTime:function(sec) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, sec)
    });
  },
  // 创建动画
  createAnimation: function(ballX, ballY) {
    var bottomX=0
    var bottomY=0 
    wx.getSystemInfo({
      success: function (res) {
        console.log("SystemInfo",res)
        bottomX =res.screenWidth
        bottomY = res.screenHeight - 50
      }
    })

    let that = this,
      animationX = that.flyX(bottomX, ballX), // 创建小球水平动画
      animationY = that.flyY(bottomY, ballY); // 创建小球垂直动画
      that.setData({
        ballX : ballX,
        ballY : ballY,
        showBall :true
      })

    //that.$apply();
    that.setDelayTime(100).then(() => { // 100ms延时,确保小球已经显示
      that.setData({
      animationX : animationX.export(),
      animationY : animationY.export(),
      })
      //that.$apply(); // 400ms延时, 即小球的抛物线时长
      return that.setDelayTime(400);
    }).then(() => {
      that.setData({
      animationX : this.flyX(0,0, 0).export(),
      animationY: this.flyY(0, 0, 0).export(),
      showBall: false,
      isLoading: false,
      })
      //that.$apply();
    })
  },
  // 水平动画
  flyX: (bottomX, ballX, duration) => {
    let animation = wx.createAnimation({
      duration: duration || 400,
      timingFunction: 'linear',
    })
    animation.translateX(bottomX - ballX).step();
    return animation;
  },
  // 垂直动画
  flyY: (bottomY, ballY, duration) => {
    let animation = wx.createAnimation({
      duration: duration || 400,
      timingFunction: 'ease-in',
    })
    animation.translateY(bottomY - ballY).step();
    return animation;
  },