在(zai)普(pu)通(tong)的(de)網頁(ye)開(kai)發(fa)中，動(dong)畫(hua)效(xiao)果可(ke)(ke)以(yi)通(tong)過css3來(lai)實現大部分需求，在(zai)小程序(xu)開(kai)發(fa)中同樣可(ke)(ke)以(yi)使用 css3 ，同時也可(ke)(ke)以(yi)通(tong)過 api 方式來(lai)實現。

指路： 小程序animatiom動(dong)畫API

API解讀

小程序(xu)中，通過調用 api 來創建(jian)動畫，需要先創建(jian)一個實例(li)對(dui)象(xiang)(xiang)。這個對(dui)象(xiang)(xiang)通過 wx.createAnimation 返回(hui), animation 的一系(xi)列(lie)屬(shu)性都基于(yu)這個實例(li)對(dui)象(xiang)(xiang)。

創建這個對象

let animation = wx.createAnimation({
        duration: 2000,
        delay: 0,
        timingFunction: "linear",
    });
復制代碼

這(zhe)(zhe)個(ge) animation 就是(shi)通過 wx.createAnimation 之后返回的實(shi)例(li)。在(zai)創(chuang)建過程(cheng)中，可以給(gei)這(zhe)(zhe)個(ge)實(shi)例(li)添加一些屬性，如以上代碼所示，等同(tong)于 css3 中 animation:$name 2s linear 的寫法(fa)。

添加動效

實(shi)例(li)(li)創建完(wan)成之后，基于該(gai)實(shi)例(li)(li)，添加需(xu)要的動態效果，動態類(lei)型可以(yi)查閱(yue)文檔得(de)知(zhi)，以(yi)最(zui)常見的移動，旋(xuan)轉為例(li)(li)：

animation.translate($width, 0).rotate($deg);
復制代碼

結束動畫

.step() 表示(shi)一組動畫的結束

animation.step();
復制代碼

導出動畫

動畫效果(guo)添加完成了，如何給想要的dom添加動效呢。這里需要用到(dao) .export() 導(dao)出動畫隊列，賦(fu)值給某個dom對(dui)象。

this.setData({ moveOne: animation.export() })
復制代碼

<view  animation="{{moveOne}}"></view>
復制代碼

例子

以(yi)下將通(tong)過2組動畫，來對比一下 css3 與 api 實現方式的不同。

一、模塊移動動畫

動畫效果：

下(xia)(xia)圖有(you)兩組(zu)動畫，分別為(wei) api 方式（上）與 css3 方式（下(xia)(xia)）完成的效果，點擊move按(an)鈕，動畫啟動。

代碼實現

以下(xia)分別為 css3 與 api 的核(he)心(xin)代碼：

css3：

<!-- wxml -->
    <view class='border'>
        <view class='css-block {{isMove && "one"}}'></view>
        <view class='css-block {{isMove && "two"}}'></view>
        <view class='css-block {{isMove && "three"}}'></view>
        <view class='css-block {{isMove && "four"}}'></view>
    </view>
復制代碼

// scss
    @mixin movePublic($oldLeft,$oldTop,$left,$top) {
        from {
          transform:translate($oldLeft,$oldTop);
        }
        to {
          transform:translate($left,$top);
        }
    }
    
    @mixin blockStyle($color,$name) {
        background: $color;
        animation:$name 2s linear infinite alternate;
    }
    .one {
        @include blockStyle(lightsalmon,onemove);
    }
    
    @keyframes onemove {
        @include movePublic(50rpx,-25rpx,-150rpx,0rpx);
    }
    
    .two {
        @include blockStyle(lightblue,twomove);
    }
    
    @keyframes twomove {
        @include movePublic(0rpx,25rpx,-50rpx,0rpx);
    }
    
    .three {
        @include blockStyle(lightgray,threemove);
    }
    
    @keyframes threemove {
        @include movePublic(0rpx,25rpx,50rpx,0rpx);
    }
    
    .four {
        @include blockStyle(grey,fourmove);
    }
    
    @keyframes fourmove {
        @include movePublic(-50rpx,-25rpx,150rpx,0rpx);
    }
復制代碼

// js
    moveFunction(){
        this.setData({
            isMove: true
        })
    }
復制代碼

 css3 中通過動態(tai)改變(bian) class 類名來達到動畫的(de)(de)(de)效果，如上代(dai)碼通過 one 、 two 、 three 、 four 來分別控制移動的(de)(de)(de)距離，通過sass可以(yi)避免代(dai)碼過于冗(rong)余的(de)(de)(de)問題。 （糾(jiu)結如何在小程序中使用 sass 的(de)(de)(de)童鞋請(qing)看這里哦(e)： wechat-mina-template ）

api：

moveClick(){
        this.move(-75,-12.5,25,'moveOne');
        this.move(-25,12.5, 0,'moveTwo');
        this.move(25, 12.5,0,'moveThree');
        this.move(75, -12.5,-25,'moveFour');
        this.moveFunction(); // 該事件觸發css3模塊進行移動
    },

    // 模塊移動方法
    move: function (w,h,m,ele) {
        let self = this;
        let moveFunc = function () {
        let animation = wx.createAnimation({
            duration: 2000,
            delay: 0,
            timingFunction: "linear",
        });
    
        animation.translate(w, 0).step()
        self.setData({ [ele]: animation.export() })
        let timeout = setTimeout(function () {
            animation.translate(m, h).step();
            self.setData({
                // [ele] 代表需要綁定動畫的數組對象
                [ele]: animation.export()
            })
          }.bind(this), 2000)
        }
        moveFunc();
        let interval = setInterval(moveFunc,4000)
    }
復制代碼

效(xiao)果圖可見，模塊之間都是(shi)簡單的(de)(de)(de)(de)移動，可以(yi)將他們的(de)(de)(de)(de)運動變化寫成一個(ge)公(gong)共的(de)(de)(de)(de)事(shi)件，通過(guo)向(xiang)(xiang)事(shi)件傳值(zhi)，來(lai)移動到不同(tong)的(de)(de)(de)(de)位置(zhi)。其中的(de)(de)(de)(de)參(can)數 w,h,m,ele 分(fen)別表(biao)示發散水(shui)平(ping)方(fang)向(xiang)(xiang)移動的(de)(de)(de)(de)距離(li)、聚攏時垂直方(fang)向(xiang)(xiang)、水(shui)平(ping)方(fang)向(xiang)(xiang)的(de)(de)(de)(de)距離(li)以(yi)及需要(yao)修改 animationData 的(de)(de)(de)(de)對象。

通過這種(zhong)方法(fa)產生的動(dong)(dong)畫(hua)(hua)(hua)，無(wu)法(fa)按照原有軌(gui)跡收回，所(suo)以在事件之后設置了(le)定(ding)時(shi)(shi)器，定(ding)義在執(zhi)(zhi)行(xing)動(dong)(dong)畫(hua)(hua)(hua)2s之后，執(zhi)(zhi)行(xing)另(ling)一(yi)個動(dong)(dong)畫(hua)(hua)(hua)。同時(shi)(shi) 動(dong)(dong)畫(hua)(hua)(hua)只能執(zhi)(zhi)行(xing)一(yi)次 ，如果需(xu)要(yao)循環的動(dong)(dong)效，要(yao)在外(wai)層包裹一(yi)個重(zhong)復(fu)執(zhi)(zhi)行(xing)的定(ding)時(shi)(shi)器到(dao)。

查看源碼，發現 api 方(fang)式是通(tong)過 js 插入并改變內(nei)聯樣(yang)式來(lai)達(da)到動畫效果，下(xia)面這張動圖可以清晰地(di)看出(chu)樣(yang)式變化。

打印出賦值的(de) animationData ， animates 中存(cun)放了動畫(hua)事件的(de)類型(xing)及參數(shu)； options 中存(cun)放的(de)是此次動畫(hua)的(de)配置選項， transition 中存(cun)放的(de)是 wx.createAnimation 調用(yong)時的(de)配置， transformOrigin 是默認(ren)配置，意(yi)為(wei)以對象的(de)中心為(wei)起(qi)點開始執(zhi)行動畫(hua)，也可在 wx.createAnimation時進行配置。

二、音樂播放動畫

上面的模塊(kuai)移(yi)動動畫(hua)(hua)不涉及邏輯交互，因此新嘗(chang)試了一個音樂播放動畫(hua)(hua)，該動畫(hua)(hua)需(xu)要實現暫停、繼(ji)續的效果。

動畫效果：

兩組不同的動(dong)畫效果對比，分別為 api （上(shang)）實現與 css3 實現（下）：

代碼實現

以下(xia)分別是 ;css3 實(shi)現與(yu) api 實(shi)現的(de)核心代(dai)碼(ma)：

css3：

<!-- wxml -->
    <view class='music musicTwo musicRotate {{playTwo ? " ": "musicPaused"}} ' bindtap='playTwo'>
        <text class="iconfont has-music" wx:if="{{playTwo}}"></text>
        <text class="iconfont no-music" wx:if="{{!playTwo}}"></text>
    </view>
復制代碼

// scss
    .musicRotate{
        animation: rotate 3s linear infinite;
    }
    
    @keyframes rotate{
        from{
            transform: rotate(0deg)
        }
        to{
            transform: rotate(359deg)
        }
    }
    
    .musicPaused{
        animation-play-state: paused;
    }
復制代碼

// js
    playTwo(){
        this.setData({
            playTwo: !this.data.playTwo
        },()=>{
            let back = this.data.backgroundAudioManager;
            if(this.data.playTwo){
                back.play();
            } else {
                back.pause();
            }
        })
    }
復制代碼

通過 playTwo 這個屬性來判斷是否暫(zan)停，并(bing)控制(zhi) css 類(lei)的添加與刪除(chu)。當為(wei) false 時，添加 .musicPaused 類(lei)，動畫暫(zan)停。

api:

<!-- wxml -->
    <view class='music' bindtap='play'  animation="{{play && musicRotate}}">
        <text class="iconfont has-music" wx:if="{{play}}"></text>
        <text class="iconfont no-music" wx:if="{{!play}}"></text>
    </view>
復制代碼

// js
    play(){
        this.setData({
            play: !this.data.play
        },()=>{
            let back = this.data.backgroundAudioManager;
            if (!this.data.play) {
                back.pause();
               // 跨事件清除定時器
               clearInterval(this.data.rotateInterval);
            } else {
                back.play();
                // 繼續旋轉，this.data.i記錄了旋轉的程度
                this.musicRotate(this.data.i);
            }
        })
    },
    musicRotate(i){
        let self = this;
        let rotateFuc = function(){
            i++;
            self.setData({
                i:i++
            });
            let animation = wx.createAnimation({
                duration: 1000,
                delay: 0,
                timingFunction: "linear",
            });
            animation.rotate(30*(i++)).step()
            self.setData({ musicRotate: animation.export() });
        }
        rotateFuc();
        let rotateInterval = setInterval(
            rotateFuc,1000
        );
        // 全局定時事件
        this.setData({
            rotateInterval: rotateInterval
        })
    }
復制代碼

通過(guo) api 實現的(de)方(fang)式(shi)是通過(guo)移除 animationData 來(lai)控制動畫，同時暫停動畫也需(xu)(xu)要(yao)清除定時器，由于清除定時器需(xu)(xu)要(yao)跨(kua)事(shi)件進行(xing)操作(zuo)，所以定了(le)一個全局方(fang)法 rotateInterval 。

api 方式定義了(le)旋(xuan)(xuan)(xuan)轉(zhuan)的(de)角(jiao)(jiao)度，但旋(xuan)(xuan)(xuan)轉(zhuan)到該(gai)角(jiao)(jiao)度之后便(bian)(bian)會停止(zhi)，如果(guo)需要實(shi)現(xian)重復旋(xuan)(xuan)(xuan)轉(zhuan)效果(guo)，需要通過定時(shi)(shi)器(qi)(qi)來完成。因(yin)此定義了(le)變(bian)量(liang)(liang)i，定時(shi)(shi)器(qi)(qi)每(mei)執行一(yi)次便(bian)(bian)加1，相當于每(mei)1s旋(xuan)(xuan)(xuan)轉(zhuan)30°，對 animation.rotate() 中(zhong)的(de)度數動態賦(fu)值。暫停之后繼續動畫,需要從(cong)原有角(jiao)(jiao)度繼續旋(xuan)(xuan)(xuan)轉(zhuan)，因(yin)此變(bian)量(liang)(liang)i需要為全局變(bian)量(liang)(liang)。

代碼變化

下圖可以看出， api 方式旋轉是通過(guo)不斷累(lei)加角度來完成(cheng)，而非 css3 中循環執行。

對比

通過上述兩個(ge)小(xiao)例子對(dui)比，無論是便捷(jie)度還是代碼(ma)量，通過 css3 來實現動畫(hua)效果(guo)相對(dui)來說是更好的選擇(ze)。 api 方式(shi)存(cun)在(zai)較多局限性：

1. 動畫只能執行一次，循環效果需要通過定時器完成。
2. 無法按照原有軌跡返回，需要返回必須定義定時器。
3. 頻繁借助定時器在性能上有硬傷。

綜合以上(shang)，推(tui)薦通(tong)過 css3 來(lai)完成(cheng)動畫效果。