這篇文章將為大家詳細講解有關小程序開發中如何實現自定義彈出框的動畫，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
微信小程序之自定義底部彈出框動畫，供大家參考，具體內容如下
最近做小程序時，會經常用到各種彈框。直接做顯示和隱藏雖然也能達到效果，但是體驗性太差，也比較簡單粗暴。想要美美地玩，添加點動畫還是非常有必要的。下面做一個底部上滑的彈框。
wxml
<view class="modals modals-bottom-dialog" hidden="{{hideModal}}">
<view class="modals-cancel" bindtap="hideModal"></view>
<view class="bottom-dialog-body bottom-pos" animation="{{animationData}}"></view>
</view>
<button bindtap="showModal">點我</button>wxss
/*模態框*/
.modals {
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.modals-cancel {
position: absolute;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
}
.bottom-dialog-body {
position: absolute;
z-index: 10001;
bottom: 0;
left: 0;
right: 0;
padding: 30rpx;
height: 800rpx;
background-color: #fff;
}
/*動畫前初始位置*/
.bottom-pos {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}js
Page({
data:{
hideModal:true, //模態框的狀態 true-隱藏 false-顯示
animationData:{},//
},
// 顯示遮罩層
showModal: function () {
var that=this;
that.setData({
hideModal:false
})
var animation = wx.createAnimation({
duration: 600,//動畫的持續時間 默認400ms 數值越大，動畫越慢 數值越小，動畫越快
timingFunction: 'ease',//動畫的效果 默認值是linear
})
this.animation = animation
setTimeout(function(){
that.fadeIn();//調用顯示動畫
},200)
},
// 隱藏遮罩層
hideModal: function () {
var that=this;
var animation = wx.createAnimation({
duration: 800,//動畫的持續時間 默認400ms 數值越大，動畫越慢 數值越小，動畫越快
timingFunction: 'ease',//動畫的效果 默認值是linear
})
this.animation = animation
that.fadeDown();//調用隱藏動畫
setTimeout(function(){
that.setData({
hideModal:true
})
},720)//先執行下滑動畫，再隱藏模塊
},
//動畫集
fadeIn:function(){
this.animation.translateY(0).step()
this.setData({
animationData: this.animation.export()//動畫實例的export方法導出動畫數據傳遞給組件的animation屬性
})
},
fadeDown:function(){
this.animation.translateY(300).step()
this.setData({
animationData: this.animation.export(),
})
},
})關于小程序開發中如何實現自定義彈出框的動畫就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
