小程序动画实现方法

小程序动画实现方法

在普通的网页开发中，动画效果能够经过css3来实现大部分需求，在小程序开发中一样能够使用css3，同时也能够经过api方式来实现。

指路：小程序animatiom动画API

API解读

小程序中，经过调用api来建立动画，须要先建立一个实例对象。这个对象经过wx.createAnimation返回,animation的一系列属性都基于这个实例对象。

建立这个对象

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

这个animation就是经过wx.createAnimation以后返回的实例。在建立过程当中，能够给这个实例添加一些属性，如以上代码所示，等同于css3中animation:$name 2s linear的写法。

添加动效

实例建立完成以后，基于该实例，添加须要的动态效果，动态类型能够查阅文档得知，以最多见的移动，旋转为例：

animation.translate($width, 0).rotate($deg);
复制代码

结束动画

.step()表示一组动画的结束

animation.step();
复制代码

导出动画

动画效果添加完成了，如何给想要的dom添加动效呢。这里须要用到.export()导出动画队列，赋值给某个dom对象。

this.setData({ moveOne: animation.export() })
复制代码

<view animation="{{moveOne}}"></view>
复制代码

例子

如下将经过2组动画，来对比一下css3与api实现方式的不一样。

1、模块移动动画

动画效果：

下图有两组动画，分别为api方式（上）与css3方式（下）完成的效果，点击move按钮，动画启动。

代码实现

如下分别为css3与api的核心代码：

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中经过动态改变class类名来达到动画的效果，如上代码经过one、two、three、four来分别控制移动的距离，经过sass能够避免代码过于冗余的问题。（纠结如何在小程序中使用sass的童鞋请看这里哦：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)
    }
复制代码

效果图可见，模块之间都是简单的移动，能够将他们的运动变化写成一个公共的事件，经过向事件传值，来移动到不一样的位置。其中的参数w,h,m,ele分别表示发散水平方向移动的距离、聚拢时垂直方向、水平方向的距离以及须要修改animationData的对象。

经过这种方法产生的动画，没法按照原有轨迹收回，因此在事件以后设置了定时器，定义在执行动画2s以后，执行另外一个动画。同时动画只能执行一次，若是须要循环的动效，要在外层包裹一个重复执行的定时器到。

查看源码，发现api方式是经过js插入并改变内联样式来达到动画效果，下面这张动图能够清晰地看出样式变化。

打印出赋值的animationData，animates中存放了动画事件的类型及参数；options中存放的是这次动画的配置选项，transition中存放的是wx.createAnimation调用时的配置，transformOrigin是默认配置，意为以对象的中心为起点开始执行动画，也可在wx.createAnimation时进行配置。

2、音乐播放动画

上面的模块移动动画不涉及逻辑交互，所以新尝试了一个音乐播放动画，该动画须要实现暂停、继续的效果。

动画效果：

两组不一样的动画效果对比，分别为api（上）实现与css3实现（下）：

代码实现

如下分别是css3实现与api实现的核心代码：

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这个属性来判断是否暂停，并控制css类的添加与删除。当为false时，添加.musicPaused类，动画暂停。

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
        })
    }
复制代码

经过api实现的方式是经过移除animationData来控制动画，同时暂停动画也须要清除定时器，因为清除定时器须要跨事件进行操做，因此定了一个全局方法rotateInterval。

api方式定义了旋转的角度，但旋转到该角度以后便会中止，若是须要实现重复旋转效果，须要经过定时器来完成。所以定义了变量i，定时器每执行一次便加1，至关于每1s旋转30°，对animation.rotate()中的度数动态赋值。暂停以后继续动画,须要从原有角度继续旋转，所以变量i须要为全局变量。

代码变化

下图能够看出，api方式旋转是经过不断累加角度来完成，而非css3中循环执行。

对比

经过上述两个小例子对比，不管是便捷度仍是代码量，经过css3来实现动画效果相对来讲是更好的选择。api方式存在较多局限性：

1. 动画只能执行一次，循环效果须要经过定时器完成。
2. 没法按照原有轨迹返回，须要返回必须定义定时器。
3. 频繁借助定时器在性能上有硬伤。

综合以上，推荐经过css3来完成动画效果。