微信小程序 連續(xù)旋轉(zhuǎn)動畫（this.animation.rotate）詳解
更新時間：2017年04月07日 10:41:47 作者：ForeverGuard
這篇文章主要介紹了微信小程序 連續(xù)旋轉(zhuǎn)動畫（this.animation.rotate）詳解的相關資料,需要的朋友可以參考下
微信小程序 連續(xù)旋轉(zhuǎn)動畫
一、.js中封裝旋轉(zhuǎn)動畫方法
添加animation屬性
data:{
animation:''"
}
改變animation的值（官網(wǎng)提供角度范圍是-180~180，但是我發(fā)現(xiàn)角度越大會一直旋轉(zhuǎn)）
onShow: function() {
console.log('index---------onShow()')
this.animation = wx.createAnimation({
duration: 1400,
timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delay: 0,
transformOrigin: '50% 50% 0',
success: function(res) {
console.log("res")
}
})
},
rotateAni: function (n) {
console.log("rotate=="+n)
this.animation.rotate(180*(n)).step()
this.setData({
animation: this.animation.export()
})
},
二、在.wxml中需要的控件上添加animation屬性
<view class="show-iconView">
<image src="{{src}}" class="show-iconImage" animation="{{animation}}" mode="scaleToFill"></image>
</view>
三、連續(xù)動畫需要添加定時器
this.interval = setInterval所傳參數(shù)每次++i就行！
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要為大家介紹了TypeScript的基礎類型，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
在本篇文章里小編給大家整理了一篇關于js正則表達式簡單校驗方法，有需要的朋友們可以參考下。2021-01-01
這篇文章主要為大家詳細介紹了微信小程序自定義頭部導航欄，膠囊按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
本篇文章主要介紹了使用Dropzone.js上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章介紹了圖片上傳判斷及預覽腳本的效果實例，有需要的朋友可以參考一下2013-08-08
今天小編就為大家分享一篇Layui點擊圖片彈框預覽的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript實現(xiàn)檢驗的各種規(guī)則
這篇文章主要介紹了javascript實現(xiàn)檢驗的各種規(guī)則,涉及javascript針對手機號、郵箱、網(wǎng)址、漢字及圖片等相關檢測技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了JavaScript瀑布流的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
在 JavaScript 中,事件是非常核心的概念,它們使得我們可以設計交互性強的網(wǎng)頁應用,本文主要和來大家聊聊如何在JavaScript中自定義事件,感興趣的可以了解下2024-04-04
前端插件之Bootstrap Dual Listbox使用教程
這篇文章主要介紹了前端插件之Bootstrap Dual Listbox使用教程，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07