快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)自定義動(dòng)畫彈框/提示框的方法實(shí)例

更新時(shí)間：2020年11月06日 10:20:06 作者：itclanCoder

這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)自定義動(dòng)畫彈框/提示框的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

在小程序中,用戶與界面進(jìn)行交互時(shí),有一些用戶反饋提示,例如:觸發(fā)某個(gè)按鈕,從底部彈出框,從頂部彈出等

如今,有一些現(xiàn)成的 UI 庫,雖然已經(jīng)實(shí)現(xiàn)了的,但若只是為了實(shí)現(xiàn)一個(gè)底部彈出框或者自定義提示框,不引用第三方 UI 庫

怎么手動(dòng)原生方式去實(shí)現(xiàn)呢,最主要的是怎么去實(shí)現(xiàn)動(dòng)畫

css3 實(shí)現(xiàn)動(dòng)畫

如下是wxml代碼

<view>
 <view class="click-btn" catchtap="onBottomBox">彈出底部彈出框</view>
 <view class="click-btn" bindtap="onTopBox">彈出頂部提示框</view>
 <view wx:if="{{isBottom}}" class="bottom-box">
 <div class="mask" bindtap="onHideBox"></div>
 <div class="pop">底部彈出內(nèi)容</div>
 </view>
 <div wx:if="{{isTop}}" class="top-box">通知內(nèi)容</div>
</view>

如下是wxss代碼

/* pages/customalertbox/customalertbox.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({
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 isBottom: false,
 isTop: false,
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function(options) {},

 onBottomBox() {
 this.setData({
 isBottom: true,
 });
 },

 onHideBox() {
 this.setData({
 isBottom: false,
 });
 },

 onTopBox() {
 this.setData({
 isTop: true,
 });

 setTimeout(() => {
 this.setData({
 isTop: false,
 });
 }, 2000);
 },
});

在小程序中實(shí)現(xiàn)動(dòng)畫,如上實(shí)現(xiàn)的動(dòng)畫,是通過css3中的@keyframes實(shí)現(xiàn)的,如下所示

.pop {
 /* ... */
 animation-duration: 0.5s;
 animation-name: slidein; // 動(dòng)畫的名稱
}

@keyframes slidein {
 // 定義動(dòng)畫的名稱
 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,垂直方向上平移,實(shí)現(xiàn)動(dòng)畫

示例效果如下所示

以上是通過 css3 的動(dòng)畫animation結(jié)合@keyframes動(dòng)畫幀實(shí)現(xiàn)的,那么在小程序當(dāng)中,也可以通過官方的動(dòng)畫API實(shí)現(xiàn)的

小程序動(dòng)畫 API-實(shí)現(xiàn)動(dòng)畫

創(chuàng)建一個(gè)動(dòng)畫實(shí)例 animation,調(diào)用實(shí)例的方法來描述動(dòng)畫。最后通過動(dòng)畫實(shí)例的 export 方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的 animation 屬性

示例效果如下所示

如下是實(shí)例代碼

<view>
 <view class="click-btn" bindtap="onBottomBox">彈出底部彈出框</view>
 <view class="click-btn" bindtap="onTopBox">彈出頂部提示框</view>
 <view
 wx:if="{{isBottom}}"
 style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
 >
 <div class="mask" bindtap="onHideBox"></div>
 <div class="pop" animation="{{animationData}}">底部彈出內(nèi)容</div>
 </view>
 <div wx:if="{{isTop}}" class="top-box">通知內(nèi)容</div>
</view>

主要是給想要添加動(dòng)畫的元素添加了一個(gè)animation屬性,現(xiàn)在的動(dòng)畫是通過js去控制,而非css

如下代碼所示

// pages/customalertbox/customalertbox.js
Page({
 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 isBottom: false,
 isTop: false,
 animationData: {}, // 定義動(dòng)畫對(duì)象
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function(options) {},

 onBottomBox() {
 // 創(chuàng)建動(dòng)畫
 var animation = wx.createAnimation({
  duration: 2000,
  timingFunction: 'ease',
 });

 this.animation = animation;
 // 先在y軸偏移180，然后用step()完成一個(gè)動(dòng)畫
 animation.translateY(180).step();
 this.setData({
  animationData: animation.export(),
  isBottom: true,
 });

 // 設(shè)置setTimeout來改變y軸偏移量，實(shí)現(xiàn)有感覺的滑動(dòng),回到初始位置
 setTimeout(() => {
  animation.translateY(0).step();
  this.setData({
  animationData: animation.export(),
  });
 }, 200);
 },

 // 點(diǎn)擊遮罩層隱藏彈框
 onHideBox() {
 var animation = wx.createAnimation({
  duration: 2000,
  timingFunction: 'ease',
 });
 this.animation = animation;
 // 先在y軸偏移180，然后用step()完成一個(gè)動(dòng)畫
 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);
 },
});

以上就是通過微信小程序中動(dòng)畫API實(shí)現(xiàn)的完成的動(dòng)畫,代碼要比 css3 要多一些,可以實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫效果

注意

如果是底部彈出框,拖動(dòng)里面時(shí),若遮罩層底部會(huì)跟著滾動(dòng),具體解決辦法也可以在外層添加catchtouchmove="true"即可解決

<view>
 <view class="click-btn" bindtap="onBottomBox">彈出底部彈出框</view>
 <view
 catchtouchmove="true"
 wx:if="{{isBottom}}"
 style="position: absolute;width: 100%;height: 100%;bottom: 0px;"
 >
 <div class="mask" bindtap="onHideBox"></div>
 <div class="pop" animation="{{animationData}}">底部彈出內(nèi)容</div>
 </view>
 <div wx:if="{{isTop}}" class="top-box">通知內(nèi)容</div>
</view>

結(jié)語

在小程序當(dāng)中實(shí)現(xiàn)動(dòng)畫可以用css3的animation結(jié)合@keyframes實(shí)現(xiàn),同樣也可以通過小程序動(dòng)畫的api去實(shí)現(xiàn)

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)自定義動(dòng)畫彈框/提示框的文章就介紹到這了,更多相關(guān)微信小程序自定義動(dòng)畫彈框/提示框內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！