在普通的web开发中，动画效果可以通过css3满足大部分需求。在小程序开发中，也可以使用css3，也可以通过api实现。指导：小程序animatiomAnimationAPIAPI解读小程序，通过调用API创建动画，需要先创建一个实例对象。这个对象由wx.createAnimation返回，动画的一系列属性都是基于这个实例对象。创建这个对象letanimation=wx.createAnimation({duration:2000,delay:0,timingFunction:"linear",});这个动画就是wx.createAnimation之后返回的实例。在创建过程中，可以给这个实例添加一些属性，如上代码所示，相当于css3中animation的写法：$name2slinear。添加动画创建实例后，根据实例添加需要的动态效果。动态类型可以参考文档。以最常见的移动和旋转为例：animation.translate($width,0).rotate($deg);Endanimation.step()表示一组动画结束animation.step();导出动画动画effectisadded，如何给想要的dom添加动画效果。这里需要使用.export()导出动画队列，赋值给一个dom对象。this.setData({moveOne:animation.export()})例子下面将用两组动画来比较css3和api实现的区别。1、模块移动动画动画效果：下图中有两组动画，分别是api方式（上）和css3方式（下）完成的效果。单击移动按钮开始动画。代码实际以下区分为css3与api的核心代码：css3：//scss@mixinmovePublic($oldLeft,$oldTop,$left,$top){from{转换：翻译（$oldLeft，$oldTop）；}到{转换：翻译（$left，$top）；}}@mixinblockStyle($color,$name){背景：$color;动画：$name2s线性无限交替；}.one{@includeblockStyle(lightsalmon,onemove);}@keyframesonemove{@includemovePublic(50rpx,-25rpx,-150rpx,0rpx);}.two{@includeblockStyle(lightblue,twomove);}@keyframestwomove{@includemovePublic(0rpx,25rpx,-50rpx,0rpx);}.three{@includeblockStyle(lightgray,threemove);}@keyframesthreemove{@includemovePublic(0rpx,25rpx,50rpx,0rpx);}.four{@includeblockStyle(grey,fourmove);}@keyframesfourmove{@includemovePublic(-50rpx,-25rpx,150rpx,0rpx);}//jsmoveFunction(){this.setData({isMove:true})}在css3中，动画的效果是通过动态改变类名来实现的。上面的代码分别用一、二、三、四来控制移动距离。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');这个.moveFunction();//该事件触发css3模块移动},//模块移动方法move:function(w,h,m,ele){letself=this;letmoveFunc=function(){letanimation=wx.createAnimation({duration:2000,delay:0,timingFunction:"linear",});动画片。翻译（w，0）。步骤（）自我。setData({[ele]:animation.export()})lettimeout=setTimeout(function(){animation.translate(m,h).step();self.setData({//[ele]代表数组对象需要绑定animation[ele]:animation.export()})}.bind(this),2000)}moveFunc();letinterval=setInterval(moveFunc,4000)}效果图可见，模块全部就是一个简单的移动，你可以把他们的移动变化写成一个公共事件，通过给事件传值来移动到不同的位置。需要修改animationData的纵横距离和对象。该方法生成的动画不能按原轨迹回退，所以在事件后设置一个定时器，定义动画执行完2s后执行另一个动画。同时，动画只能执行一次。如果需要循环动画效果，需要在外层包裹一个重复执行的定时器。查看源码，发现api方法是通过js插入和改变内联样式来实现动画效果的。下面的动图可以很明显的看出风格的变化。打印出赋值的animationData，animates存放动画事件的类型和参数；options存放的是这个动画的配置选项，transition存放的是调用wx.createAnimation时的配置，transformOrigin是默认的配置，意思是使用对象的中心作为开始动画的起点，也可以在wx.createAnimation期间配置。2.音乐播放动画上面的模块移动动画不涉及逻辑交互，所以尝试了一个新的音乐播放动画，需要实现暂停和继续的效果。动画效果：对比两组不同的动画效果，即api（上）实现和css3实现（下）：代码实现下面分别是css3实现和api实现的核心代码：css3://scss.musicRotate{动画：旋转3s线性无限；}@keyframesrotate{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.musicPaused{animation-play-state:paused;}//jsplayTwo(){this.setData({playTwo:!this.data.playTwo},()=>{letback=this.data.backgroundAudioManager;if(this.data.playTwo){back.play();}else{back.pause();}})}passp属性layTwo用于判断是否暂停，控制css类的增删改查。为false时，添加.musicPaused类，动画暂停。api://jsplay(){this.setData({play:!this.data.play},()=>{letback=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){设self=this;让rotateFuc=function(){i++;self.setData({i:i++});让动画=wx.createAnimation({持续时间：1000，延迟：0，timingFunction：“线性”，}）；animation.rotate(30*(i++)).step()self.setData({musicRotate:animation.export()});}旋转Fuc();让rotateInterval=setInterval(rotateFuc,1000);//全局定时事件this.setData({rotateInterval:rotateInterval})}是通过api实现的，通过移除animationData来控制动画，同时暂停动画也需要清空定时器，因为清空定时器需要跨事件操作，定义了一个全局方法rotateIntervalapi来定义旋转的角度，但是旋转到这个角度后就会停止。如果需要实现重复旋转的效果，需要使用定时器来完成。所以定义了变量i，定时器每执行一次加1，相当于每1s旋转30°，animation.rotate()中的度数是动态赋值的。暂停后要继续动画，需要从原来的角度继续旋转，所以变量i需要是一个全局变量。代码改动从下图可以看出，api方式下的旋转是通过不断累加角度来完成的，而不是css3中的循环执行。对比通过上面两个小例子的对比，无论是方便还是代码量，通过css3实现动画效果都是相对较好的选择。api方法有很多限制：动画只能执行一次，循环效果需要通过定时器来完成。不可能按照原来的轨迹返回，必须定义一个定时器才能返回。频繁使用定时器在性能上存在缺陷。基于以上，推荐使用CSS3来完成动画效果。广而告之，本文发表于薄荷前端周刊，欢迎关注星★，转载请注明出处。欢迎讨论，点个赞走咯?????～
