微信小程序實現元素漸入漸出動畫效果封裝方法
在jQuery中，漸入漸出的動畫效果比較容易實現，直接用show(slow),hide(slow)即可實現，但是在微信小程序中，如何實現呢？其實也不難，雖然沒有現成的API函數能調用，但是我們可以通過微信的wx.createAnimation API寫個封裝函數重復使用。廢話不多說，直接上代碼示例如下：
1、在app.js中定義全局的動畫函數，如下代碼
App({
//漸入，漸出實現
show : function(that,param,opacity){
var animation = wx.createAnimation({
//持續時間800ms
duration: 800,
timingFunction: 'ease',
});
//var animation = this.animation
animation.opacity(opacity).step()
//將param轉換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設置動畫
that.setData(json)
},
//滑動漸入漸出
slideupshow:function(that,param,px,opacity){
var animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateY(px).opacity(opacity).step()
//將param轉換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設置動畫
that.setData(json)
},
//向右滑動漸入漸出
sliderightshow: function (that, param, px, opacity) {
var animation = wx.createAnimation({
duration: 800,
timingFunction: 'ease',
});
animation.translateX(px).opacity(opacity).step()
//將param轉換為key
var json = '{"' + param + '":""}'
json = JSON.parse(json);
json[param] = animation.export()
//設置動畫
that.setData(json)
}
})
2、在wxml中，只需要設置animation綁定即可
// 這里是pages/page/index.wxml
//使用view包裹需要動畫的元素
//class中定義動畫開始前的初始樣式，如透明度=0，向下偏移200px等，animtion屬性填入綁定值
<view class="init" animation="{{slide_up1}}">
3、在該頁的js中
// 這里是pages/page/index.js
//首先獲取小程序實例，訪問app.js中的函數
this.app = getApp();
//調用show函數，傳參
//注意：查看上面show函數定義查看參數含義
//第一個參數是當前的頁面對象，方便函數setData直接返回數據
//第二個參數是綁定的數據名,傳參給setData，詳細見上面
//第三個參數是上下滑動的px,因為class="init"定義初始該元素向下偏移了200px，所以這里使其上移200px
//第四個參數是需要修改為的透明度，這里是1，表示從初始的class="init"中定義的透明度0修改到1
this.app.slideupshow(this, 'slide_up1', -200, 1)
4、完整示例，頁面show時綁定view由下向上滑動展現，頁面hide時綁定的view由上向下滑動消失
1）wxml代碼：
<view class="init" animation="{{slide_up1}}">
<card>...</card>
</view>
<view class="init" animation="{{slide_up2}}">
<card>...</card>
</view>
2）js代碼：
//onload時獲取小程序實例
onLoad: function (options) {
this.app = getApp()
},
//頁面展示時，觸發動畫
onShow: function () {
this.app.slideupshow(this, 'slide_up1', -200, 1)
setTimeout(function () {
this.app.slideupshow(this, 'slide_up2', -200, 1)
}.bind(this), 200);
},
//頁面隱藏時，觸發漸出動畫
onHide: function () {
//你可以看到，動畫參數的200,0與漸入時的-200,1剛好是相反的，其實也就做到了頁面還原的作用，使頁面重新打開時重新展示動畫
this.app.slideupshow(this, 'slide_up1', 200, 0)
//延時展現容器2，做到瀑布流的效果，見上面預覽圖
setTimeout(function () {
this.app.slideupshow(this, 'slide_up2', 200, 0)
}.bind(this), 200);
}
上一篇：小程序webview嵌入H5 如
下一篇：H5頁面跳轉小程序的3種實現方式
