微信小程序開發——動畫效果

動畫效果的實現，使用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
        })
      },
    })
  }
}

　　

本文鏈接：https://blog.csdn.net/potato512/article/details/80000566

本人，認為 例子挺實用的，自己收藏變成工具類哈，感覺分享。有個輪子可以大把時間做自己喜歡的事。

熱愛生活，熱愛編程！