微信小程序怎么實(shí)現(xiàn)彈出和隱藏遮罩層動(dòng)畫

這篇文章主要介紹“微信小程序怎么實(shí)現(xiàn)彈出和隱藏遮罩層動(dòng)畫”，在日常操作中，相信很多人在微信小程序怎么實(shí)現(xiàn)彈出和隱藏遮罩層動(dòng)畫問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”微信小程序怎么實(shí)現(xiàn)彈出和隱藏遮罩層動(dòng)畫”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

train.wxml

<view class='train_con'>

 <view class='head'>
 <text>{{bankname}}</text>
 <text class='count'>{{index+1}}/{{allquestion.length}}</text>
 </view>

<view bindtouchstart="touchStart" bindtouchend="touchEnd" style='width:100%;height:100%;display: flex;flex-direction: column;justify-content: center;align-items: center;'>

 <view class='question_view'>
 <text class='question_text'>{{questionlist.question}}</text>

 <view class='option_view' data-id="A" bindtap="changeColor">

 <view class="letter_view {{letterid=='A'?'active':''}} {{errorid=='A'?'error':''}}">
 <text class='letter'>A</text>
 </view>

 <view class='option_text_view' >
 <text class='option_text'>{{questionlist.choiceA}}</text> 
 </view>
 </view>

 <view class='option_view'  data-id='B' bindtap="changeColor">

 <view class="letter_view {{letterid=='B'?'active':''}} {{errorid=='B'?'error':''}}">
 <text class='letter'>B</text>
 </view>

 <view class='option_text_view'>
 <text class='option_text'>{{questionlist.choiceB}}</text>
 </view>
 </view>

 <view class='option_view'  data-id='C' bindtap="changeColor">
 <view class="letter_view  {{letterid=='C'?'active':''}} {{errorid=='C'?'error':''}}">
 <text class='letter'>C</text>
 </view>

 <view class='option_text_view'>
 <text class='option_text'>{{questionlist.choiceC}}</text>
 </view>
 </view>

 <view class='option_view'  data-id='D' bindtap="changeColor">
 <view class="letter_view {{letterid=='D'?'active':''}} {{errorid=='D'?'error':''}}">
 <text class='letter'>D</text>
 </view>

 <view class='option_text_view'>
 <text class='option_text'>{{questionlist.choiceD}}</text>
 </view>
 </view>
 
 </view>
<!-- 答案解析 -->
 <view>
 <view class="analysis_view {{clickcheckid==1?'checked2':''}}">
 <text>參考答案：{{questionlist.answer}}\n參考解析：{{questionlist.analysis}}</text>
 </view>
 </view>

 
 <view class="checkanswer_view {{clickcheckid==1?'checked':''}}" bindtap='checkanswer_click'>
 <text>查看答案</text>
 </view>
 </view>

<!-- 透明遮蓋層，用于退出評(píng)分層 -->
 <view  bindtap="hideModal" animation="{{animationData}}" class="touming_top" wx:if="{{showModalStatus}}"> 
 </view> 

 <!-- 評(píng)分遮蓋層 -->
<view animation="{{animationData}}" class="container-column buydes-dialog-container" wx:if="{{showModalStatus}}"> 
 <view class="buydes-dialog-container-top">這道題對(duì)你有用嗎？評(píng)個(gè)分吧</view> 
 <view class="container-column buydes-dialog-container-bottom"> 
 <!-- 評(píng)分 -->
 <block wx:for="{{stars}}">
 <image class="star-image" style="left: {{item*80+185}}rpx" src="{{key > item ?selectedSrc : normalSrc}}">
 <view class="item" style="left:0rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
 </image>
 </block> 
 <view class="mark_btn" bindtap='mark_click'>
 <text>確定</text>
 </view>
 </view> 
 </view>

<!-- 透明遮蓋層，用于退出評(píng)分層 -->
 <view  bindtap="hideModal" animation="{{animationData}}" class="touming" wx:if="{{showModalStatus}}"> 
 </view> 

<!-- 底部欄 -->
 <view class='leftandright'>

 <view class='bottom_view' bindtap="showModal" >
 <image class="bottom_image" src='../images/score.png'></image>
 </view>

 <view class='bottom_view' bindtap='nextquestion_click'>
 <image class="bottom_image" src='../images/comment.png'></image>
 </view>
 
 <button style="color: #fff; width: 80rpx;height: 80rpx;background-color: #fff;padding:0rpx;          margin-left:0rpx;margin-right:0rpx;padding-left:0px;padding-right:0px;" id="shareBtn"               open-type="share" class='share_btn'>
 <image class="bottom_image" src='../images/share.png'></image>
 </button>
 
 </view>


</view>

train.js

var interval = "";//周期執(zhí)行函數(shù)的對(duì)象
var time = 0;//滑動(dòng)時(shí)間
var touchDot = 0;//觸摸時(shí)的原點(diǎn)
var flag_hd = true;//判定是否可以滑動(dòng)

let animationShowHeight = 300;//動(dòng)畫偏移高度

Page({

 /**
   * 頁(yè)面的初始數(shù)據(jù)
 */
  data: {

 // 遮罩層變量
    animationData: "",
    showModalStatus: false,
    imageHeight: 0,
    imageWidth: 0,

 // 評(píng)分變量
    stars: [0, 1, 2, 3, 4],//評(píng)分?jǐn)?shù)值數(shù)組
    normalSrc: '../images/score.png',//空心星星圖片路徑
    selectedSrc: '../images/fullstar.png',//選中星星圖片路徑
    key: 0,//評(píng)分
  },

 //點(diǎn)擊星星
  selectRight: function (e) {
 var key = e.currentTarget.dataset.key
    console.log("得" + key + "分")
 this.setData({
      key: key
    })
  },

 // 確定評(píng)分
  mark_click: function () {
 this.hideModal()
  },

 // 顯示遮罩層  
  showModal: function () {
 //創(chuàng)建一個(gè)動(dòng)畫實(shí)例animation。調(diào)用實(shí)例的方法來描述動(dòng)畫。
 var animation = wx.createAnimation({
      duration: 500,         //動(dòng)畫持續(xù)時(shí)間500ms
      timingFunction: "ease",//動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢
      delay: 0               //動(dòng)畫延遲時(shí)間0ms
    })
 this.animation = animation
 //調(diào)用動(dòng)畫操作方法后要調(diào)用 step() 來表示一組動(dòng)畫完成
    animation.translateY(animationShowHeight).step()//     在Y軸向上偏移300
 this.setData({
 //通過動(dòng)畫實(shí)例的export方法導(dǎo)出動(dòng)畫數(shù)據(jù)傳遞給組件的animation屬性。
      animationData: animation.export(),
      showModalStatus: true //顯示遮罩層
    })
    setTimeout(function () {
      animation.translateY(0).step()
 this.setData({
        animationData: animation.export()
      })
    }.bind(this), 1)
  },

 // 隱藏遮罩層  
  hideModal: function () {
 var animation = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
 this.animation = animation;
    animation.translateY(animationShowHeight).step()
 this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
 this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  },

 // 評(píng)分按鈕
  score_click: function () {
 
  },


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

 /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
 */
  onReady: function () {

  },

 /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
 */
  onShow: function () {
    flag_hd = true;    //重新進(jìn)入頁(yè)面之后，可以再次執(zhí)行滑動(dòng)切換頁(yè)面代碼
    clearInterval(interval); // 清除setInterval
    time = 0;
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        animationShowHeight = res.windowHeight;
      }
    })
  },

 /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
 */
  onHide: function () {

  },

 /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
 */
  onUnload: function () {

  },

 /**
   * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 */
  onPullDownRefresh: function () {

  },

 /**
   * 頁(yè)面上拉觸底事件的處理函數(shù)
 */
  onReachBottom: function () {

  },

 /**
   * 用戶點(diǎn)擊右上角分享
 */
  onShareAppMessage: function () {

  },

})

train.wxss

page {
  background-color: #fff;
}

/* -----------------評(píng)分遮罩層----------------- */

/* 分享按鈕 */

.share_btn::after {
  border: none;
}

/* 整個(gè)評(píng)分遮罩層 */

.buydes-dialog-container {
  width: 100%;
  height: 300rpx;
  justify-content: space-between;
  background-color: #fff;
  position: fixed;
  bottom: 101rpx;
 /* z-index: 998;   */
  border-top: 1rpx solid #e8e8e8;
}

/* 評(píng)分遮罩層頂部 */

.buydes-dialog-container-top {
  height: 100rpx;
  padding-top: 20rpx;
  display: flex;
  justify-content: center;
  flex-grow: 1;
  font-size: 32rpx;
  color: #737373;
}

/* 評(píng)分遮罩層底部 */

.buydes-dialog-container-bottom {
  height: 150rpx;
  padding-top: 20rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  flex-grow: 0;
}

/* 空心的星星圖片 */

.star-image {
  position: absolute;
  top: 100rpx;
  width: 60rpx;
  height: 60rpx;
  src: "../../images/score.png";
}

/* 觸發(fā)評(píng)分點(diǎn)擊的區(qū)域 */

.item {
  position: absolute;
  top: 0rpx;
  width: 60rpx;
  height: 60rpx;
}

/* 確認(rèn)評(píng)分按鈕 */

.mark_btn {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  color: #55c5ac;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1rpx solid #eaeaea;
  margin-top: 60rpx;
  margin-bottom: 150rpx;
  font-size: 32rpx;
}

/* 透明遮罩層（上） */

.touming_top {
  width: 100%;
  height: 900rpx;
  opacity: 0;
  position: fixed;
  bottom: 402rpx;
  z-index: 998;
}

/* 透明遮罩層（下） */

.touming {
  width: 100%;
  height: 101rpx;
  opacity: 0;
  position: fixed;
  bottom: 0rpx;
  z-index: 998;
}

到此，關(guān)于“微信小程序怎么實(shí)現(xiàn)彈出和隱藏遮罩層動(dòng)畫”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！