微信小程序动画实现弹出(关闭)优惠卷页面_微信小程序优惠券弹出窗怎么做

进入页面是动态弹出优惠卷，点击关闭再次运行代码即可弹出，其中图片可根据个人需要更换：

代码如下：

wxml

<view>
    <!-- 弹窗遮罩层 -->
    <view wx:if="{{show}}" class="popover-mask-layer"></view>
    <view hidden="{{!show}}" class="container" animation="{{cartoonData}}">
        <image bindload="cartoon" class="logo" mode="widthFix" src="../../icon/logo.jpeg"></image>
        <view class="content">
            <view class="font">新人专享优惠</view>
            <view class="middle">
                <view class="text">送你新人见面礼</view>
                <view class="ticket">
                    <view class="left">
                        <view class="money">￥20</view>
                        <view class="liter">首杯立减</view>
                    </view>
                    <view class="right">
                        <view class="logo">
                            <image mode="widthFix" src="../../icon/search.png"></image>
                        </view>
                    </view>
                </view>
            </view>
            <view class="foot">
                <view class="title">第一杯咖啡 喝椰树</view>
                <view>
                    <button class="button">立即使用</button>
                </view>
            </view>
        </view>
        <view class="bottom" bindtap="closeTheCouponPopUp">
            <image mode="widthFix" src="{{closeBtnImages}}"></image>
        </view>
    </view>
</view>

css:

.usermotto{
    margin-top: 100px;
    border:solid;
}
.container{
    transform: scale(0);
}
.content{
    width: 400rpx;
    height: 500rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: orangered;
    border-radius: 10px 10px 10px 10px;
    /* z-index: 1000; */
    
}
.font{
    color: white;
    background-color:     #FF4500;
    width: 220rpx;
    text-align: center;
    height: 50rpx;
    border-radius: 0 0 12px 12px;
    z-index: 999;
    font-size: 17px;
    font-weight: bold;
}
.middle{
    margin-top: -46rpx;
    width: 100%;
    height: 250rpx;
    background-color: #FFFFF0;
    display: flex;
    flex-direction: column;
    border-radius: 10px 10px 0 0;
    /* justify-content: center; */
    align-items: center;
 
}
.text{
    color: orangered;
    font-weight: bolder;
    letter-spacing: 1px;
    margin-top: 50rpx;
    font-size: 17px;
}
.ticket{
    width: 80%;
    height: 140rpx;
    /* background-color: #FF9933; */
    background-color: white;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
}
.left{
  flex: 3;
  color:    #D2691E;
  background-color: #FFDEAD;
  border-radius: 5px;
  background:radial-gradient(circle at right 0, transparent 16rpx, #FFDEAD 0) left 0 /100% 50%  no-repeat,
  radial-gradient(circle at right 100%, transparent 16rpx,  #FFDEAD  0) left 100% /100% 50%  no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.right{
  flex: 2;
  background-color: #FFDEAD;
  border-radius: 10px;
  text-align: center;
  background:radial-gradient(circle at left 0, transparent 16rpx, #FFDEAD 0) left 0 /100% 50%  no-repeat,
  radial-gradient(circle at left 100%, transparent 16rpx,  #FFDEAD 0) left 100% /100% 50%  no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 100%;
}
.foot{
    width: 100%;
    height: 250rpx;
    border-radius: 0 0 10px 10px;
    background-color: teal;
    background: radial-gradient(200px 50px at 110px 0, #FFFFF0 60%, orangered 65%);
}
.title{
    margin-top: 90rpx;
    text-align: center;
    font-weight: bold;
    color: white;
    letter-spacing: 1px;
    font-size: 13px;
    font-family:"宋体",Times,serif;
}
.button{
    border-radius: 20px;
    margin-top: 20rpx;
    color:     #D2691E;
    background-color:     #F4A460;
    /* height: 60rpx; */
    font-size: 17px;
    font-weight: bolder;
}
.liter{
  font-weight: bolder;
  letter-spacing: 1px;
 font-size: 10px;
  /* font-family:"黑体",Times,serif; */
}
.money{
   font-size: 28px;
   font-weight: bolder;
}
.logo{
   border-radius: 50px;
    width: 100rpx;
}
.popover-mask-layer {
    height: 100vh;
    width: 100vw;
    background-color: rgba(129, 126, 126, 0.5);
    position: fixed;
    top: 0;
    z-index: 0;
  }
  .bottom{
      width: 40rpx;
      height: 40rpx;
      border-radius: 10px;
      margin-top: 30rpx;
  }

js:

Page({
  /**
   * 页面的初始数据
   */
  data: {
   show:false,
   closeBtnImages: 'http://m.qpic.cn/psc?/V14ZaBeY40XWC8/zkoezU7GGNbZGOF.DPhgQZjV2a5npNMM5D47K1jMLBHO3ccXXkEwsTHa*69Gi8pCGkdmz4imEISAR0fRbZj7*malDMMANN7ZzH8oI6XDWDk!/b&bo=QABAAEAAQAADCSw!&rf=viewer_4'
  },
 
  cartoon:function(){
    // var that = this;
    setTimeout(()=>{
      this.setData({
        show:true
      })
      var animation=wx.createAnimation({
       duration:600,
       timingFunction:'ease-in-out'
      });
      // that.animation = animation;
      animation.scale(1).step();
      this.setData({
        cartoonData:animation.export()
      })
    },500)
  
  },
  closeTheCouponPopUp:function(){
    var animation=wx.createAnimation({
      duration:600,
      timingFunction:'ease-in-out'
    });
    animation.scale(0).opacity(0).step();
    this.setData({
      cartoonData:animation.export(),  
    })
    setTimeout(()=>{
   this.setData({
     show:false
   })
    },1000)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

参考：https://blog.csdn.net/weixin_42063951/article/details/104062033