微信小程序开发——动画效果

WeChat小程序交流（QQ群：769977169）

动画效果的实现，使用wx.createAnimation实现。具体实现时，首先，创建动画对象，并设置相关的参数；其次，设置动画类型，并执行动画；第三，导出并设置动画数据；最后，将设置的动画数据动态配置相应的组件，以此实现组件的动画效果。

效果图

代码示例

xxx.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>

www.wxjs

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",
    });
    
    animation.translate((this.data.widthScreen - 60), 0).step({duration: 3000})
    this.setData({moveData: animation.export()})
  },

  rotateClick: function(even) {
    var animation = wx.createAnimation({})
    animation.rotate(180).step({duration:3000})
    this.setData({rotateData: animation.export()})
  },

  alphaClick: function(even) {
    var animation = wx.createAnimation({})
    animation.opacity(0.1).step({duration: 2000})
    this.setData({alphaData: animation.export()})
  },
  
  scaleClick: function(even) {
    var animation = wx.createAnimation({})
    animation.scale(1.6).step({duration: 2000})
    this.setData({scaleData: animation.export()})
  },
  
  skewClick: function(even) {
    var animation = wx.createAnimation({})
    animation.skew(160).step({duration: 2000})
    this.setData({skewData: animation.export()})
  },
  
  matrixClick: function(even) {
    var animation = wx.createAnimation({})
    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 thisBlock = this;
    wx.getSystemInfo({
      success: function(res) {
        thisBlock.setData({
          widthScreen: res.screenWidth
        })
      },
    })
  }
}