原文：https://blog.csdn.net/weixin_42917830/article/details/81701125?utm_source=copy
1、先看效果
可以看到，動(dòng)畫(huà)效果十分流暢，高度復(fù)用，封裝好后只需要三行代碼實(shí)現(xiàn)動(dòng)畫(huà)
解決
1.尋根問(wèn)底，發(fā)現(xiàn)wx_mini_program(下面稱(chēng)呼微信小程序?yàn)閣xmp [差點(diǎn)叫成 (*′?皿`)mmp] )有一個(gè)全局的js邏輯文件，叫app.js，有意思，可以往里面塞自己寫(xiě)的object(函數(shù)數(shù)據(jù)等等)，那就從那里入手吧
2.在app.js中定義全局的動(dòng)畫(huà)函數(shù)
App({
//漸入，漸出實(shí)現(xiàn)
show : function(that,param,opacity){
var animation = wx.createAnimation({
//持續(xù)時(shí)間800ms
duration: 800,
timingFunction: 'ease',
});
//var animation = this.animation
animation.opacity(opacity).step()
//將param轉(zhuǎn)換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設(shè)置動(dòng)畫(huà)
that.setData(json)
},
//滑動(dòng)漸入漸出
slideupshow:function(that,param,px,opacity){
var animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY(px).opacity(opacity).step()
//將param轉(zhuǎn)換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設(shè)置動(dòng)畫(huà)
that.setData(json)
},
//向右滑動(dòng)漸入漸出
sliderightshow: function (that, param, px, opacity) {
var animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateX(px).opacity(opacity).step()
//將param轉(zhuǎn)換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設(shè)置動(dòng)畫(huà)
that.setData(json)
}
})
3.現(xiàn)在我們?cè)倏纯凑{(diào)用這個(gè)函數(shù)的具體方法
在wxml中，只需要設(shè)置animation綁定即可，以首頁(yè)index為例
// 這里是pages/page/index.wxml
//使用view包裹需要?jiǎng)赢?huà)的元素
//class中定義動(dòng)畫(huà)開(kāi)始前的初始樣式，如透明度=0，向下偏移200px等，animtion屬性填入綁定值
<view class="init" animation="{{slide_up1}}">
4.在該頁(yè)的js中
// 這里是pages/page/index.js
//首先獲取小程序?qū)嵗L(fǎng)問(wèn)app.js中的函數(shù)
this.app = getApp();
//調(diào)用show函數(shù)，傳參
//注意：查看上面show函數(shù)定義查看參數(shù)含義
//第一個(gè)參數(shù)是當(dāng)前的頁(yè)面對(duì)象，方便函數(shù)setData直接返回?cái)?shù)據(jù)
//第二個(gè)參數(shù)是綁定的數(shù)據(jù)名,傳參給setData，詳細(xì)見(jiàn)上面
//第三個(gè)參數(shù)是上下滑動(dòng)的px,因?yàn)閏lass="init"定義初始該元素向下偏移了200px，所以這里使其上移200px
//第四個(gè)參數(shù)是需要修改為的透明度，這里是1，表示從初始的class="init"中定義的透明度0修改到1
this.app.slideupshow(this, 'slide_up1', -200, 1)
5.讓我們完善流程，達(dá)到預(yù)覽圖首頁(yè)的效果(有延時(shí)的邊上升邊出現(xiàn)效果)
wxml就是將各個(gè)容器分別綁定不同的變量,一個(gè)view容器就是一個(gè)動(dòng)畫(huà)單位(可以這樣理解)，如
<view class="init" animation="{{slide_up1}}">
<card>...</card>
</view>
<view class="init" animation="{{slide_up2}}">
<card>...</card>
</view>
頁(yè)面的js
//onload時(shí)獲取小程序?qū)嵗?br>
onLoad: function (options) {
this.app = getApp()
},
//頁(yè)面展示時(shí)，觸發(fā)動(dòng)畫(huà)
onShow: function () {
this.app.slideupshow(this, 'slide_up1', -200, 1)
setTimeout(function () {
this.app.slideupshow(this, 'slide_up2', -200, 1)
}.bind(this), 200);
},
//頁(yè)面隱藏時(shí)，觸發(fā)漸出動(dòng)畫(huà)
onHide: function () {
//你可以看到，動(dòng)畫(huà)參數(shù)的200,0與漸入時(shí)的-200,1剛好是相反的，其實(shí)也就做到了頁(yè)面還原的作用，使頁(yè)面重新打開(kāi)時(shí)重新展示動(dòng)畫(huà)
this.app.slideupshow(this, 'slide_up1', 200, 0)
//延時(shí)展現(xiàn)容器2，做到瀑布流的效果，見(jiàn)上面預(yù)覽圖
setTimeout(function () {
this.app.slideupshow(this, 'slide_up2', 200, 0)
}.bind(this), 200);
}
