本篇文章給大家?guī)淼膬?nèi)容是介紹如何實現(xiàn)小程序動畫？小程序動畫的實現(xiàn)方法。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。
在普通的網(wǎng)頁開發(fā)中，動畫效果可以通過css3來實現(xiàn)大部分需求，在小程序開發(fā)中同樣可以使用css3，同時也可以通過api方式來實現(xiàn)。
API解讀
小程序中，通過調用api來創(chuàng)建動畫，需要先創(chuàng)建一個實例對象。這個對象通過wx.返回,的一系列屬性都基于這個實例對象。
創(chuàng)建這個對象
let animation = wx.createAnimation({
duration: 2000,
delay: 0,
timingFunction: "linear",
});
登錄后復制
這個就是通過wx.之后返回的實例。在創(chuàng)建過程中，可以給這個實例添加一些屬性，如以上代碼所示，等同于css3中:$name 2s 的寫法。
添加動效
實例創(chuàng)建完成之后，基于該實例，添加需要的動態(tài)效果，動態(tài)類型可以查閱文檔得知，以最常見的移動，旋轉為例：
animation.translate($width, 0).rotate($deg);
登錄后復制
結束動畫
.step()表示一組動畫的結束
animation.step();
登錄后復制
導出動畫
動畫效果添加完成了，如何給想要的dom添加動效呢。這里需要用到.()導出動畫隊列，賦值給某個dom對象。
this.setData({ moveOne: animation.export() })
登錄后復制
登錄后復制
例子
以下將通過2組動畫，來對比一下css3與api實現(xiàn)方式的不同。
一、模塊移動動畫
動畫效果：
下圖有兩組動畫，分別為api方式（上）與css3方式（下）完成的效果，點擊move按鈕，動畫啟動。
代碼實現(xiàn)
以下分別為css3與api的核心代碼：
css3：
登錄后復制
// 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中通過動態(tài)改變class類名來達到動畫的效果，如上代碼通過one、two、three、four來分別控制移動的距離，通過sass可以避免代碼過于冗余的問題。（糾結如何在小程序中使用sass的童鞋請看這里哦：-mina-）
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(); // 該事件觸發(fā)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] 代表需要綁定動畫的數(shù)組對象
[ele]: animation.export()
})
}.bind(this), 2000)
}
moveFunc();
let interval = setInterval(moveFunc,4000)
}
登錄后復制
效果圖可見，模塊之間都是簡單的移動，可以將他們的運動變化寫成一個公共的事件，通過向事件傳值，來移動到不同的位置。其中的參數(shù)w,h,m,ele分別表示發(fā)散水平方向移動的距離、聚攏時垂直方向、水平方向的距離以及需要修改的對象。
通過這種方法產(chǎn)生的動畫，無法按照原有軌跡收回，所以在事件之后設置了定時器，定義在執(zhí)行動畫2s之后小動畫程序基本設計思路，執(zhí)行另一個動畫。同時動畫只能執(zhí)行一次，如果需要循環(huán)的動效，要在外層包裹一個重復執(zhí)行的定時器到。
查看源碼，發(fā)現(xiàn)api方式是通過js插入并改變內(nèi)聯(lián)樣式來達到動畫效果，下面這張動圖可以清晰地看出樣式變化。
打印出賦值的，中存放了動畫事件的類型及參數(shù)；中存放的是此次動畫的配置選項，中存放的是wx.調用時的配置，是默認配置，意為以對象的中心為起點開始執(zhí)行動畫，也可在wx.時進行配置。
二、音樂播放動畫
上面的模塊移動動畫不涉及邏輯交互，因此新嘗試了一個音樂播放動畫，該動畫需要實現(xiàn)暫停、繼續(xù)的效果。
動畫效果：
兩組不同的動畫效果對比，分別為api（上）實現(xiàn)與css3實現(xiàn)（下）：
代碼實現(xiàn)
以下分別是css3實現(xiàn)與api實現(xiàn)的核心代碼：
css3：
登錄后復制
// 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();
}
})
}
登錄后復制
通過這個屬性來判斷是否暫停，并控制css類的添加與刪除。當為false時，添加.類，動畫暫停。
api:
登錄后復制
// 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();
// 繼續(xù)旋轉，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實現(xiàn)的方式是通過移除來控制動畫，同時暫停動畫也需要清除定時器，由于清除定時器需要跨事件進行操作，所以定了一個全局方法。
api方式定義了旋轉的角度，但旋轉到該角度之后便會停止，如果需要實現(xiàn)重復旋轉效果，需要通過定時器來完成。因此定義了變量i，定時器每執(zhí)行一次便加1，相當于每1s旋轉30°，對.()中的度數(shù)動態(tài)賦值。暫停之后繼續(xù)動畫,需要從原有角度繼續(xù)旋轉，因此變量i需要為全局變量。
代碼變化：
下圖可以看出小動畫程序基本設計思路，api方式旋轉是通過不斷累加角度來完成，而非css3中循環(huán)執(zhí)行。
對比
通過上述兩個小例子對比，無論是便捷度還是代碼量，通過css3來實現(xiàn)動畫效果相對來說是更好的選擇。api方式存在較多局限性：
動畫只能執(zhí)行一次，循環(huán)效果需要通過定時器完成。
無法按照原有軌跡返回，需要返回必須定義定時器。
頻繁借助定時器在性能上有硬傷。
綜合以上，推薦通過css3來完成動畫效果。
以上就是如何實現(xiàn)小程序動畫？小程序動畫的實現(xiàn)方法的詳細內(nèi)容，更多請關注悠悠之家其它相關文章！