快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)循環(huán)動(dòng)畫效果

更新時(shí)間：2018年07月16日 15:02:14 作者：Hi以夢(mèng)為馬

這篇文章主要介紹了微信小程序循環(huán)動(dòng)畫效果的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

在微信小程序的交互效果中，通常通過(guò)各種動(dòng)畫效果來(lái)增強(qiáng)用戶體驗(yàn)，本文通過(guò)微信小程序原生API來(lái)實(shí)現(xiàn)小程序中控件的各種動(dòng)畫效果，先看下本文最終的效果：

這里寫圖片描述

上圖中的“關(guān)注公眾號(hào)”動(dòng)畫就是我們要實(shí)現(xiàn)的效果。

為了實(shí)現(xiàn)上文中的效果，我們首先來(lái)看一下微信小程序關(guān)于動(dòng)畫的官方API

微信官方API學(xué)習(xí)

wx.createAnimation(OBJECT)

說(shuō)明：創(chuàng)建一個(gè)動(dòng)畫實(shí)例animation。調(diào)用動(dòng)畫操作方法后要調(diào)用 step() 來(lái)表示一組動(dòng)畫完成，可以在一組動(dòng)畫中調(diào)用任意多個(gè)動(dòng)畫方法，一組動(dòng)畫中的所有動(dòng)畫會(huì)同時(shí)開始，一組動(dòng)畫完成后才會(huì)進(jìn)行下一組動(dòng)畫。最后通過(guò)動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的animation屬性。

屬性方法：

這里寫圖片描述

主要說(shuō)明一下：timingFunction

這里寫圖片描述

通過(guò)上述中的timingFunction值，可以設(shè)置動(dòng)畫的執(zhí)行效果。

動(dòng)畫和動(dòng)畫方法

這里寫圖片描述

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

效果實(shí)現(xiàn)

通過(guò)上文的介紹，結(jié)合官方API文檔，已經(jīng)對(duì)創(chuàng)建動(dòng)畫的方法有了基本了解，接下來(lái)，開始實(shí)現(xiàn)效果圖中的動(dòng)畫效果。

1.wxml文件添加動(dòng)畫屬性

在wxml中創(chuàng)建一個(gè)布局，添加動(dòng)畫屬性：

<view class='pro-attention' bindtap='toAttention' animation='{{attentionAnim}}'>
 <text>關(guān)注公眾號(hào)</text>
</view>

2.JS中動(dòng)畫效果實(shí)現(xiàn)

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

通過(guò)wx.createAnimation創(chuàng)建一個(gè)動(dòng)畫，setInterval()方法執(zhí)行循環(huán)調(diào)用。至此，即可實(shí)現(xiàn)效果圖中的顯示效果。

總結(jié)

以上所述是小編給大家介紹的微信小程序循環(huán)動(dòng)畫效果的實(shí)現(xiàn)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: