怎么在微信小程序中實(shí)現(xiàn)循環(huán)動(dòng)畫(huà)效果？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供薊州網(wǎng)站建設(shè)、薊州做網(wǎng)站、薊州網(wǎng)站設(shè)計(jì)、薊州網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、薊州企業(yè)網(wǎng)站模板建站服務(wù)，十余年薊州做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

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

wx.createAnimation(OBJECT)

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

屬性方法：

 

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

 

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

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

 

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

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

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

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

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

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

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

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

本文標(biāo)題：怎么在微信小程序中實(shí)現(xiàn)循環(huán)動(dòng)畫(huà)效果
當(dāng)前網(wǎng)址：http://aaarwkj.com/article46/gjddhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開(kāi)發(fā)、域名注冊(cè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、定制開(kāi)發(fā)、商城網(wǎng)站、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)