微信小程序 Animation實現(xiàn)圖片旋轉(zhuǎn)動畫示例
最近小程序中有一個圖片旋轉(zhuǎn)的需求，最初是想著通過切換多張圖片達到旋轉(zhuǎn)的效果，后來發(fā)現(xiàn)微信小程序帶有動畫api，然后就改由image+Animation來實現(xiàn)。
首先在wxml中定義image
<image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image>
注意其中的animation屬性，image就由它來實現(xiàn)動畫。
而{{animation}}我們在js的data中定義
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()
})
},
相關代碼
var _animation;
var _animationIndex
const _ANIMATION_TIME = 500;
pages {
...
onShow: function () {
_animation = wx.createAnimation({
duration: _ANIMATION_TIME,
timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
delay: 0,
transformOrigin: '50% 50% 0'
})
},
/**
* 實現(xiàn)image旋轉(zhuǎn)動畫，每次旋轉(zhuǎn) 120*n度
*/
rotateAni: function (n) {
_animation.rotate(120 * (n)).step()
this.setData({
animation: _animation.export()
})
},
/**
* 開始旋轉(zhuǎn)
*/
startAnimationInterval: function () {
var that = this;
that.rotateAni(++_loadImagePathIndex); // 進行一次旋轉(zhuǎn)
_animationIntervalId = setInterval(function () {
that.rotateAni(++_loadImagePathIndex);
}, _ANIMATION_TIME); // 沒間隔_ANIMATION_TIME進行一次旋轉(zhuǎn)
},
/**
* 停止旋轉(zhuǎn)
*/
stopAnimationInterval: function () {
if (_animationIntervalId> 0) {
clearInterval(_animationIntervalId);
_animationIntervalId = 0;
}
},
}
微信自帶的Animation可以實現(xiàn)一次動畫，然后可以通過setInterval來達到不斷旋轉(zhuǎn)的目的，在使用時，控制startAnimationInterval和stopAnimationInterval即可。
注意：
這里為什么不直接給_animation.rotate(120 * (n)).step()設置一個足夠大的值，原因有兩點：
1、我們需要便利的控制開始和停止，
2、animation在小程序進入后臺后，會持續(xù)運行，占用手機內(nèi)存和cpu，而小程序依賴于微信，在iphone上會導致微信被終止運行
在使用animation時，會發(fā)現(xiàn)有時候出現(xiàn)旋轉(zhuǎn)速度很快或者反向旋轉(zhuǎn)再正向旋轉(zhuǎn)的清空，這都是由于rotate的值設置有問題。
1、rotate的值應該是上一次結(jié)束時的值，
2、如果設置了全局變量，記得在oncreate時初始化，不然第二次打開同一頁面會有問題。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
在2016年10月11日facebook 公開了新的javascript包管理工具 yarn, 用來替代目前被廣泛使用的npm(nodejs 自帶的包管理工具)，本文將介紹yarn工具帶來的優(yōu)點和使用入門，以及對比npm解決了什么問題，帶來哪些便利。有需要的朋友們下面來一起看看吧。2016-12-12
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)非常好看的計數(shù)器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細介紹了JavaScrip如何利用?TensorFlow.js?中的?HandPose?模型,實現(xiàn)一個基于視頻流的手勢識別系統(tǒng),感興趣的可以了解下2024-12-12
JavaScript實現(xiàn)反轉(zhuǎn)字符串的方法詳解
這篇文章主要介紹了JavaScript實現(xiàn)反轉(zhuǎn)字符串的方法,結(jié)合實例形式分析了字符串反轉(zhuǎn)操作,并詳細講述了相關函數(shù)的功能與使用注意事項,需要的朋友可以參考下2017-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)ajax的用戶簡單登入功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
webpack5新特性Asset?Modules資源模塊詳解
這篇文章主要為大家介紹了webpack5新特性Asset?Modules資源模塊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
原生javascript實現(xiàn)解析XML文檔與字符串
這篇文章主要介紹了javascript解析XML文檔和XML字符串的方法和具體的代碼解析，有需要的小伙伴可以參考下。2016-03-03
javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)頁背景煙花效果的方法,涉及javascript數(shù)學運算及頁面元素動態(tài)操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
本文主要是分享了一段由JS生成驗證碼并驗證的代碼，非常簡單，并分析了此方法的實用性，提供給大家參考下2014-09-09
本文為大家介紹下javascript中如何將時間戳處理為日期格式，下面有個不錯的示例，感興趣的朋友可以參考下2014-01-01