微信小程序 动画效果 Animation 理解部分

这里是官方实例的代码 下面备注一些自己的理解

WXML 部分

js 部分

Page({
  onReady: function () {
    this.animation = wx.createAnimation({
      duration: 5000, //设置动画时长  
      timingFunction：“linear ” ,//设置动画效果
      transformOrigin :("50 %50 0")//  默认50 %50 0   设置动画的基点
    })
  },
  rotate: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.setData({animation: this.animation.export()})
  },
  scale: function () {
    this.animation.scale(Math.random() * 2).step()
    this.setData({animation: this.animation.export()})
  },
  translate: function () {
    
    this.animation.translateX(100).step()
    this.setData({animation: this.animation.export()})
  },
  skew: function () {
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({animation: this.animation.export()})
  },
  rotateAndScale: function () {
    this.animation.rotate(Math.random() * 720 - 360)
        .scale(Math.random() * 2)
        .step()
    this.setData({animation: this.animation.export()})
  },
  rotateThenScale: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
        .scale(Math.random() * 2).step()
    this.setData({animation: this.animation.export()})
  },
  all: function () {
    this.animation.rotate(Math.random() * 720 - 360)
        .scale(Math.random() * 2)
        .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
        .skew(Math.random() * 90, Math.random() * 90)
        .step()
    this.setData({animation: this.animation.export()})
  },
  allInQueue: function () {
    this.animation.rotate(Math.random() * 720 - 360).step()
        .scale(Math.random() * 2).step()
        .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
        .skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({animation: this.animation.export()})
  },
  reset: function () {
    this.animation.rotate(0, 0)
                  .scale(1)
                  .translate(0, 0)
                  .skew(0, 0)
                  .step({duration: 0})
    this.setData({animation: this.animation.export()})
  }
})

这里主要说下timingFunction和transformOrigin
timingFunction 设置动画效果

linear 默认为linear 动画一直较为均匀
ease 开始时缓慢中间加速到快结束时减速
ease-in 开始的时候缓慢
ease-in-out 开始和结束时减速
ease-out 结束时减速
step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
transformOrigin 设置动画的基点 默认%50 %50 0

left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%