如何自定義實(shí)現(xiàn)小程序動(dòng)畫彈框/提示框

這篇文章將為大家詳細(xì)講解有關(guān)如何自定義實(shí)現(xiàn)小程序動(dòng)畫彈框/提示框，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

如何自定義實(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>

/* 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);
  },
});

.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)畫

示例效果如下所示

掘金不支持gif-實(shí)例效果可戳鏈接

以上是通過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 屬性

示例效果如下所示

掘金不支持gif-實(shí)例效果可戳鏈接

如下是實(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)畫對象
  },

  /**
   * 生命周期函數(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>

關(guān)于“如何自定義實(shí)現(xiàn)小程序動(dòng)畫彈框/提示框”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。