 
      
      
    2018-5-15 seo達人
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
    
     
            首先在wxml中定義image
         
            注意其中的animation屬性,image就由它來實現(xiàn)動畫。
         
            而{{animation}}我們在js的data中定義
         
            data: {
         
            animation: \'\'
         
            },
         
            相關(guān)代碼
         
            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時,會發(fā)現(xiàn)有時候出現(xiàn)旋轉(zhuǎn)速度很快或者反向旋轉(zhuǎn)再正向旋轉(zhuǎn)的清空,這都是由于rotate的值設(shè)置有問題。
         
            1、rotate的值應(yīng)該是上一次結(jié)束時的值,
         
            2、如果設(shè)置了全局變量,記得在oncreate時初始化,不然第二次打開同一頁面會有問題。
         
            注意事項:
         
            這里為什么不直接給_animation.rotate(120 * (n)).step()設(shè)置一個足夠大的值,原因有兩點:
         
            1、我們需要便利的控制開始和停止,
         
            2、animation在小程序進入后臺后,會持續(xù)運行,占用手機內(nèi)存和cpu,而小程序依賴于微信,在iphone上會導(dǎo)致微信被終止運行
        
    
         
        
        
藍藍設(shè)計的小編 http://www.ynkmey.cn