微信小程序實現元素漸入漸出動畫效果封裝方法
在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種實現方式