實現效果：

index.wxml <view class="container"><view>我是內容</view> </view><view class='shade' wx:if="{{isShow}}" animation="{{animationData}}"> <text bindtap="noShade">我是遮罩</text> </view><button type="primary" bindtap="shade" disabled="{{isDisabled}}">遮罩</button>

index.wxss

.shade {position:fixed;width:100%;height:100%;top:0px;background:rgba(0,0,0,0.4);overflow: hidden; }

index.js

Page({/*** 頁面的初始數據*/data: {// 遮罩(true顯示、false不顯示)isShow: false,// 按鈕是否可以點擊(true不可以、false可以)isDisabled: false,// 動畫animationData: {}},/*** 生命周期函數--監聽頁面加載*/onLoad: function (options) {},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function () {},// 遮罩shade: function(e) {this.setData({isShow: true,isDisabled: true})var that = this// 實例化一個動畫var animation = wx.createAnimation({duration: 1000,timingFunction: 'linear',})this.animation = animation// -500向上 500向下// 移動（如果不寫定時器移動的速度很快,體驗不是很好）animation.translateY(500).step()this.setData({animationData: animation.export()})// 設置setTimeout來改變y軸偏移量，實現有感覺的滑動setTimeout(function () {animation.translateY(0).step()that.setData({animationData: animation.export()})}, 200)},// 取消遮罩noShade: function(e) {var that = this//實例化一個動畫var animation = wx.createAnimation({duration: 1000,timingFunction: 'linear',})this.animation = animation// -500向上 500向下// 移動（如果不寫定時器移動的速度很快,體驗不是很好）animation.translateY(500).step()this.setData({animationData: animation.export()})// 設置setTimeout來改變y軸偏移量，實現有感覺的滑動setTimeout(function () {animation.translateY(0).step()that.setData({animationData: animation.export(),isShow: false,isDisabled: false})}, 200)},/*** 生命周期函數--監聽頁面顯示*/onShow: function () {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function () {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function () {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {},/*** 用戶點擊右上角分享*/onShareAppMessage: function () {} })

總結

以上是生活随笔為你收集整理的小程序动画学习-遮罩动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。