小程序animation动画效果（小程序组件案例）

WXML

<view class="container">
  <view class="page-body">
    <view class="page-section">
 
      <view class="animation-element-wrapper">
        <view class="animation-element" animation="{{animation}}"></view>
      </view>
      <scroll-view class="animation-buttons" scroll-y="true">
        <button class="animation-button" bindtap="rotate">旋转</button>
        <button class="animation-button" bindtap="scale">缩放</button>
        <button class="animation-button" bindtap="translate">移动</button>
        <button class="animation-button" bindtap="skew">倾斜</button>
        <button class="animation-button" bindtap="rotateAndScale">旋转并缩放</button>
        <button class="animation-button" bindtap="rotateThenScale">旋转后缩放</button>
        <button class="animation-button" bindtap="all">同时展示全部</button>
        <button class="animation-button" bindtap="allInQueue">顺序展示全部</button>
        <button class="animation-button animation-button-reset" bindtap="reset">还原</button>
      </scroll-view>
    </view>
  </view>
</view>

WXSS:

.animation-element-wrapper {
  display: flex;
  width: %;
  padding-top: 150rpx;
  padding-bottom: 150rpx;
  justify-content: center;
  overflow: hidden;
  background-color: #ffffff;
}
.animation-element {
  width: 200rpx;
  height: 200rpx;
  background-color: #1AAD19;
}
.animation-buttons {
  padding: 30rpx 50rpx 10rpx;
  width: %;
  height: 600rpx;
  box-sizing: border-box;
}
.animation-button {
  float: left;
  line-height: ;
  width: 300rpx;
  margin: 15rpx 12rpx;
}
 
.animation-button-reset {
  width: 620rpx;
}

JS:

Page({
  onReady: function () {
    this.animation = wx.createAnimation()
  },
  rotate: function () {
    this.animation.rotate(Math.random() *  - ).step()
    this.setData({ animation: this.animation.export() })
  },
  scale: function () {
    this.animation.scale(Math.random() * ).step()
    this.setData({ animation: this.animation.export() })
  },
  translate: function () {
    this.animation.translate(Math.random() *  - , Math.random() *  - ).step()
    this.setData({ animation: this.animation.export() })
  },
  skew: function () {
    this.animation.skew(Math.random() * , Math.random() * ).step()
    this.setData({ animation: this.animation.export() })
  },
  rotateAndScale: function () {
    this.animation.rotate(Math.random() *  - )
      .scale(Math.random() * )
      .step()
    this.setData({ animation: this.animation.export() })
  },
  rotateThenScale: function () {
    this.animation.rotate(Math.random() *  - ).step()
      .scale(Math.random() * ).step()
    this.setData({ animation: this.animation.export() })
  },
  all: function () {
    this.animation.rotate(Math.random() *  - )
      .scale(Math.random() * )
      .translate(Math.random() *  - , Math.random() *  - )
      .skew(Math.random() * , Math.random() * )
      .step()
    this.setData({ animation: this.animation.export() })
  },
  allInQueue: function () {
    this.animation.rotate(Math.random() *  - ).step()
      .scale(Math.random() * ).step()
      .translate(Math.random() *  - , Math.random() *  - ).step()
      .skew(Math.random() * , Math.random() * ).step()
    this.setData({ animation: this.animation.export() })
  },
  reset: function () {
    this.animation.rotate(, )
      .scale()
      .translate(, )
      .skew(, )
      .step({ duration:  })
    this.setData({ animation: this.animation.export() })
  }
})