前言
在小程式中,使用者與界面進行互動時,有一些使用者回報提示,例如:觸發某個按鈕,從底部彈出框,從頂部彈出等
如今,有一些現成的 UI 庫,雖然已經實作了的,但若隻是為了實作一個底部彈出框或者自定義提示框,不引用第三方 UI 庫
怎麼手動原生方式去實作呢,最主要的是怎麼去實作動畫
css3 實作動畫
如下是wxml代碼
彈出底部彈出框
彈出頂部提示框
底部彈出内容 通知内容
如下是wxss代碼
.click-btn {
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 20px auto;
border: 1px solid #ccc;
border-radius: 5px;
}
.top-box {
width: 100%;
height: 30px;
background: #f56c6c;
border-radius: 0 0 8px 8px;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 28rpx;
position: absolute;
top: 0px;
left: 0;
animation-duration: 0.5s;
animation-name: slidetop;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.pop {
position: absolute;
width: 100%;
height: 180px;
background: #42b983;
border-radius: 8px 8px 0 0;
position: absolute;
bottom: 0px;
animation-duration: 0.5s;
animation-name: slidein;
}
@keyframes slidein {
from {
transform: translateY(70%);
}
to {
transform: translateY(0);
}
}
@keyframes slidetop {
from {
transform: translateY(-30px);
}
to {
transform: translateY(0px);
}
}
如下是邏輯代碼
// pages/customalertbox/customalertbox.js
Page({
data: {
isBottom: false,
isTop: false,
},
onLoad: function(options) {},
onBottomBox() {
this.setData({
isBottom: true,
});
},
onHideBox() {
this.setData({
isBottom: false,
});
},
onTopBox() {
this.setData({
isTop: true,
});
setTimeout(() => {
this.setData({
isTop: false,
});
}, 2000);
},
});
在小程式中實作動畫,如上實作的動畫,是通過css3中的@keyframes實作的,如下所示
.pop {
animation-duration: 0.5s;
animation-name: slidein; // 動畫的名稱
}
@keyframes slidein {
// 定義動畫的名稱
from {
transform: translateY(70%); // 平移,垂直方向上
}
to {
transform: translateY(0);
}
}
.top-box {
animation-duration: 0.5s;
animation-name: slidetop;
}
@keyframes slidetop {
from {
transform: translateY(-30px);
}
to {
transform: translateY(0px);
}
}
通過 css3 中的@keyframes以及變換transform,垂直方向上平移,實作動畫
示例效果如下所示
以上是通過 css3 的動畫animation結合@keyframes動畫幀實作的,那麼在小程式當中,也可以通過官方的動畫API實作的
小程式動畫 API-實作動畫
建立一個動畫執行個體 animation,調用執行個體的方法來描述動畫。最後通過動畫執行個體的 export 方法導出動畫資料傳遞給元件的 animation 屬性
示例效果如下所示
如下是執行個體代碼
彈出底部彈出框
彈出頂部提示框
wx:if="{{isBottom}}"
style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
>
底部彈出内容 通知内容
主要是給想要添加動畫的元素添加了一個animation屬性,現在的動畫是通過js去控制,而非css
如下代碼所示
// pages/customalertbox/customalertbox.js
Page({
data: {
isBottom: false,
isTop: false,
animationData: {}, // 定義動畫對象
},
onLoad: function(options) {},
onBottomBox() {
// 建立動畫
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease',
});
this.animation = animation;
// 先在y軸偏移180，然後用step()完成一個動畫
animation.translateY(180).step();
this.setData({
animationData: animation.export(),
isBottom: true,
});
// 設定setTimeout來改變y軸偏移量，實作有感覺的滑動,回到初始位置
setTimeout(() => {
animation.translateY(0).step();
this.setData({
animationData: animation.export(),
});
}, 200);
},
// 點選遮罩層隐藏彈框
onHideBox() {
var animation = wx.createAnimation({
duration: 2000,
timingFunction: 'ease',
});
this.animation = animation;
// 先在y軸偏移180，然後用step()完成一個動畫
animation.translateY(180).step();
this.setData({
animationData: animation.export(),
});
setTimeout(() => {
animation.translateY(0).step();
this.setData({
animationData: animation.export(),
isBottom: false,
});
}, 200);
},
onTopBox() {
this.setData({
isTop: true,
});
setTimeout(() => {
this.setData({
isTop: false,
});
}, 2000);
},
});
以上就是通過微信小程式中動畫API實作的完成的動畫,代碼要比 css3 要多一些,可以實作更加複雜的動畫效果
注意
如果是底部彈出框,拖動裡面時,若遮罩層底部會跟着滾動,具體解決辦法也可以在外層添加catchtouchmove="true"即可解決
彈出底部彈出框
catchtouchmove="true"
wx:if="{{isBottom}}"
style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
>
底部彈出内容 通知内容
結語
在小程式當中實作動畫可以用css3的animation結合@keyframes實作,同樣也可以通過小程式動畫的api去實作
到此這篇關于微信小程式實作自定義動畫彈框/提示框的文章就介紹到這了,更多相關微信小程式自定義動畫彈框/提示框内容請搜尋腳本之家以前的文章或繼續浏覽下面的相關文章希望大家以後多多支援腳本之家！
相關文檔