在微信小程序的交互效果中，通常通過各種動畫效果來增強用戶體驗，本文通過微信小程序原生API來實現小程序中控件的各種動畫效果，先看下本文最終的效果：

 上圖中的“關注公眾號”動畫就是我們要實現的效果。

 為了實現上文中的效果，我們首先來看一下微信小程序關于動畫的官方API

微信官方API學習

wx.createAnimation(OBJECT)

說明：創建一個動畫實例animation。調用動畫操作方法后要調用 step() 來表示一組動畫完成，可以在一組動畫中調用任意多個動畫方法，一組動畫中的所有動畫會同時開始，一組動畫完成后才會進行下一組動畫。最后通過動畫實例的export方法導出動畫數據傳遞給組件的animation屬性。

屬性方法：

主要說明一下：timingFunction

通過上述中的timingFunction值，可以設置動畫的執行效果。

動畫和動畫方法

注：旋轉、縮放、偏移、傾斜、矩陣變形等API本文不在介紹，可參考官方API。

效果實現

通過上文的介紹，結合官方API文檔，已經對創建動畫的方法有了基本了解，接下來，開始實現效果圖中的動畫效果。

1.wxml文件添加動畫屬性

在wxml中創建一個布局，添加動畫屬性：

<view class='pro-attention' bindtap='toAttention' animation='{{attentionAnim}}'> <text>關注公眾號</text></view>

2.JS中動畫效果實現

Page({ data: {  attentionAnim: '',  //....其他配置 }, /**  * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () {  var attentionAnim = wx.createAnimation({   duration: 150,   timingFunction: 'ease',   delay: 0  })  //設置循環動畫  this.attentionAnim = attentionAnim  var next = true;  setInterval(function () {   if (next) {    //根據需求實現相應的動畫    this.attentionAnim.rotate(3).step()    next = !next;   } else {    this.attentionAnim.rotate(-3).step()    next = !next;   }   this.setData({    //導出動畫到指定控件animation屬性    attentionAnim: attentionAnim.export()   })  }.bind(this), 150) },//....

通過wx.createAnimation創建一個動畫，setInterval()方法執行循環調用。至此，即可實現效果圖中的顯示效果。

總結

以上所述是小編給大家介紹的微信小程序循環動畫效果的實現，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持！