小程序实例 | 简单的动画实例

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    widthScreen: null,
    moveData: null,
    rotateData: null,
    alphaData: null,
    scaleData: null,
    skewData: null,
    matrixData: null
  },

  moveClick: function () {
    var animation = wx.createAnimation({
      duration: 3000,//动画持续时间
      delay: 0,//动画延迟时间
      timingFunction: "ease",//动画效果
    });
    // translate 平移变换  https://developers.weixin.qq.com/miniprogram/dev/api/Animation.translate.html
    // export 导出动画队列
    animation.translate( (this.data.widthScreen - 160),(this.data.heightScreen - 160)).step({ duration: 3000 })//屏幕宽度
    this.setData({ moveData: animation.export() })
  },

  rotateClick: function (even) {
    var animation = wx.createAnimation({})
    //rotate 旋转
    console.log(even)
    animation.rotate(50).step({ duration: 3000 })
    this.setData({ rotateData: animation.export() })
  },

  alphaClick: function (even) {
    var animation = wx.createAnimation({})
    //opacity 设置透明度0--1
    animation.opacity(0.1).step({ duration: 2000 })
    this.setData({ alphaData: animation.export() })
  },

  scaleClick: function (even) {
    var animation = wx.createAnimation({})
    //scale 缩放
    animation.scale(1.6).step({ duration: 2000 })
    this.setData({ scaleData: animation.export() })
  },

  skewClick: function (even) {
    var animation = wx.createAnimation({})
    //skew 倾斜
    animation.skew(120).step({ duration: 2000 })
    this.setData({ skewData: animation.export() })
  },

  matrixClick: function (even) {
    var animation = wx.createAnimation({})
    //matrix 变形
    animation.matrix(1, 3, 4, 5, 2, 2).step({ duration: 2000 })
    this.setData({ matrixData: animation.export() })
  },

  queueClick: function () {
    var animation = wx.createAnimation({});
    //移动缩小透明
    animation.translate((this.data.widthScreen - 60), 0).scale(0.3).opacity(0.5).step({ duration: 3000 })
    this.setData({ queueData: animation.export() })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 获取屏幕宽
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          widthScreen: res.screenWidth,
          heightScreen: res.screenHeight

        })
      },
    })
  }
})

wxml

<view style='width:60px;height:60px;background-color:yellow;' animation="{{moveData}}" bindtap='moveClick'>移动</view>
 
<view style='width:60px;height:60px;background-color:red;' animation="{{rotateData}}" bindtap='rotateClick'>旋转</view>
 
<view style='width:60px;height:60px;background-color:green;' animation="{{alphaData}}" bindtap='alphaClick'>透明度</view>
 
<view style='width:60px;height:60px;background-color:orange;' animation="{{scaleData}}" bindtap='scaleClick'>缩放</view>
 
<view style='width:60px;height:60px;background-color:blue;' animation="{{skewData}}" bindtap='skewClick'>倾斜</view>
 
<view style='width:60px;height:60px;background-color:black;color:white' animation="{{matrixData}}" bindtap='matrixClick'>变形</view>
 
<view style='width:60px;height:60px;background-color:yellow;' animation="{{queueData}}" bindtap='queueClick'>移动\n变小\n透明</view>