小程序动画方案 · 语雀

小程序中可使用的动画方案：

1. CSS 动画（transform、keyframe）
2. JS 动画（setInterval、requestAnimationFrame）
3. canvas 动画 （第三方库 wxDraw.js ）
4. 官方API -- wx.createAnimation

不支持：

1. svg 动画
2. webgl (小游戏可使用)

CSS3 动画属性支持

• transform 变换
• keyframe   帧动画

示例代码：

.animate_demo{
  width: 90px;
  height: 100px;
  color: green;
  font-size: 20px;
  animation:bgChange 5s infinite;
}

@keyframes bgChange{
  form {
    color: red;
    font-size: 12px;
    transform: translateX(30px)
  }
  to{
    color: blue;
    font-size: 30px;
    transform: translateX(80px)
  }
}

requestAnimationFrame & setInterval & setTimeout

示例代码：

onReady: function () {
    var _this = this;
    var rafId = requestAnimationFrame(function a (){
      _this.setData({
        width: ++_this.data.width
      })
      rafId = requestAnimationFrame(a)
    });

   setTimeout(function(){
     cancelAnimationFrame(rafId );
   },5000)
}

 <view class="animate_demo" style="width:{{ width + 'px' }}">
     <text>动画文案{{ width }}</text>
 </view>

canvas 动画

微信小程序 canvas 文档小程序 canvas 第三方 动画库 wxDraw.js看几个截图小程序官方canvas Demo 。示例代码wxDraw.js 示例截图 。示例代码

wx.createAnimation

官方文档 示例截图示例代码：

<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx">{{ text }}</view>

Page({
  data: {
    text:'',
    animationData: {}
  },
  onShow: function () {
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })

    this.animation = animation

    // 第一段
    this.rotateAndScale();
    
    // 第二段
    setTimeout(function(){
      this.rotateThenScale();
    }.bind(this),1000)

    // 第三段
    setTimeout(function () {
      this.rotateAndScaleThenTranslate();
    }.bind(this), 2000)
  },
  rotateAndScale: function () {
    // 旋转同时放大
    this.animation.rotate(90).scale(2, 2).step()
    this.setData({
      text:'第一段',
      animationData: this.animation.export()
    })
  },
  rotateThenScale: function () {
    // 先旋转后放大
    this.animation.rotate(-45).step()
    this.animation.scale(3, 3).step()
    this.setData({
      text: '第二段',
      animationData: this.animation.export()
    })
  },
  rotateAndScaleThenTranslate: function () {
    // 先旋转同时放大，然后平移
    this.animation.rotate(45).scale(1, 1).step()
    this.animation.translate(100, 100).step({ duration: 1000 })
    this.setData({
      text: '第三段',
      animationData: this.animation.export()
    })
  }
})