如何实现小程序动画？小程序动画的实现方法

本篇文章给大家带来的内容是介绍如何实现小程序动画？小程序动画的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

在普通的网页开发中，动画效果可以通过css3来实现大部分需求，在小程序开发中同样可以使用css3，同时也可以通过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实现方式的不同。

一、模块移动动画

动画效果：

下图有两组动画，分别为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可以避免代码过于冗余的问题。