红包动画弹窗_电商红包弹窗 源码

红包动画效果 https://6465-dev-m4zlr-1300328850.tcb.qcloud.la/payMoney/bk.mp4

//red_page.js文件
/**
 * > 组件名:mask-alert
 * > 调用方式第一步:JSON引入"red-page":"../components/red-page/red-page"
 * > 调用方式第二步:页面引入<red-page></red-page>
 * > 开发者:老五
 * > 编辑时间:2019.9.25
 */
const audio = wx.createInnerAudioContext();
 
audio.src = 'https://gxm-ecommerce.oss-cn-shenzhen.aliyuncs.com/user_upload/rc-upload-1547213682422-20.mp3'
const app = getApp()
 
Component({
  properties: {
    /**
     * 显示/隐藏遮罩弹窗
     */
    modalStart: {
      type: Boolean,
      value: false
    },
  },
  /**
   * 注意:diffid[1:成功中奖弹窗;2:未中奖弹窗;]
   */
  data: {
    tellTitle: "",
    open: false,
    showModel: true,
    money:0,
    redId:0,
    shows: 'none',
    canceImg: "https://6465-dev-be16e9-1255326756.tcb.qcloud.la/payimg1/cance.png"
  },
  lifetimes: {
    /**
     * 默认三秒消失
     */
    attached(obj) {
 
    },
    ready() { },
    detached() { }
  },
  methods: {
 
    /**
     * 取消事件
     */
    getCance() {
      audio.stop();
      this.setData({
        modalStart: false
      })
      this.triggerEvent('getCanceRed',this.data.redId, {
      })
    },
    /**
     * 组件中传值
     */
    getOenMask: function (res) {
      audio.play();
      this.setData({
        open:true,
        shows:"block",
        redId:1
      })
     this.triggerEvent('getOPenselectCoupon', {
     })
 
    },
    // 显示
    getShow(res) {
      console.log("获取红包金额==>", res);
      this.setData({
        modalStart: true,
        money:res
      })
   
    },
 
    /**
     * 组件事件点击触发
     */
    // getOPenselectCoupon() {
    //   this.triggerEvent('getOPenselectCoupon', {})
    // }
 
  }
})

//red_page.json
{
  "component": true
}

//red_page.wxml
<view class="red-packet" hidden="{{!modalStart}}" catchtouchmove="preventdefault">
  <view class="red-packet-layout {{ open ? 'red-packet-open' : '' }}" >
  <!-- 遮盖消失 -->
    <view class="red-packet-up" />
    <!-- 居中背景 -->
    <view class="red-packet-middle">
    <view class="message" style="display:{{shows}}">此红包可抵扣1v1金额</view>
    <view class="getGo" style="display:{{shows}}">
    <view class="getGoSub" bind:tap="getCance">立即使用</view>
    </view>
    </view>
 
    <!-- 红包金额 -->
    <view class="models" style="display:{{shows}}">{{money}}<span>元</span></view>
    <view class="red-packet-top" bind:tap="getOenMask"/>
    <!-- 以下是金币Icon -->
    <view class="red-money red-money-left1"/>
    <view class="red-money red-money-left2"/>
    <view class="red-money red-money-left3"/>
    <view class="red-money red-money-left4"/>
    <view class="red-money red-money-middle1"/>
    <view class="red-money red-money-middle2" />
    <view class="red-money red-money-middle3" />
    <view class="red-money red-money-middle4" />
    <view class="red-money red-money-right1"/>
    <view class="red-money red-money-right2" />
    <view class="red-money red-money-right3"/>
    <view class="red-money red-money-right4" />
     <view class="red-money red-money-right5" />
  <!-- 取消按钮 -->
  <view class="canceView" >
  <image src="{{canceImg}}" class="canceImg" bind:tap="getCance"></image>
  </view>
  </view>
</view>

//red_page.wxss
@keyframes open-top {
  0% {
    transform: rotateX(0);
  }
 
  100% {
    transform: rotateX(90deg);
  }
}
 
@keyframes open-up {
  0% {
    transform: rotateX(-90deg);
    opacity: 0.8;
  }
 
  30% {
    transform: rotateX(-70deg);
    opacity: 0.5;
  }
 
  50% {
    transform: rotateX(-50deg);
    opacity: 0.3;
  }
 
  80% {
    transform: rotateX(-30deg);
    opacity: 0.2;
  }
 
  100% {
    transform: rotateX(0);
    opacity: 0;
  }
}
.red-packet {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  z-index: 1000;
background:rgba(0,0,0,0.6);
}
 
 
 
@-webkit-keyframes move {
  0%, 65% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
 
  70% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }
 
  75% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
 
  80% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }
 
  85% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
 
  90% {
    -webkit-transform: rotate(6deg);
    transform: rotate(6deg);
  }
 
  95% {
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
  }
 
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
 
.red-packet .red-packet-layout {
  position: relative;
  bottom: 79rpx;
  animation: move 1s 0s infinite;
  -webkit-animation: move 1s 0s infinite;
  transform-origin: bottom;
  animation-iteration-count:1;
  -webkit-transform-origin: bottom;
  animation-duration: 2s;
}
 
.canceView {
  position: absolute;
  width: 100%;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  bottom: -100rpx;
}
 
.canceImg {
  display: inline-block;
  width: 76rpx;
  height: 76rpx;
}
 
.red-packet .red-packet-layout .red-packet-up {
  background-image: url('https://6465-dev-be16e9-1255326756.tcb.qcloud.la/payimg1/12.png');
  background-size: 490rpx 82rpx;
  width: 492rpx;
  height: 82rpx;
  transform: rotateX(-90deg);
  transform-origin: 50% 100%;
}
 
.models {
  position: absolute;
  width: 100%;
  height: 75rpx;
  top: 226rpx;
  line-height: 75rpx;
  font-size: 90rpx;
  text-align: center;
  font-family: Microsoft YaHei UI;
  font-weight: bold;
  color: rgba(208, 84, 59, 1);
  /* background: red; */
}
 
.message {
  position: absolute;
  bottom: 182rpx;
  height: 30rpx;
  width: 100%;
  font-size: 24rpx;
  text-align: center;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(255, 231, 182, 1);
}
 
.getGo {
  position: absolute;
  bottom: 80rpx;
  width: 100%;
  text-align: center;
  height: 77rpx;
  line-height: 77rpx;
}
 
.getGoSub {
  display: inline-block;
  width: 353rpx;
  height: 77rpx;
  text-align: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 600;
  color: rgba(207, 80, 57, 1);
  background: rgba(246, 226, 186, 1);
  box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(211, 56, 55, 0.5);
  border-radius: 39rpx;
}
 
.models span {
  font-size: 30rpx;
}
 
.red-packet .red-packet-layout.red-packet-open .red-packet-up {
  animation: open-up 0.2s ease-in-out 0.2s 1 normal;
  animation-fill-mode: forwards;
}
 
.red-packet .red-packet-layout .red-packet-middle {
  background-image: url('https://6465-dev-be16e9-1255326756.tcb.qcloud.la/payimg1/14.png');
  background-size: 492rpx 100%;
  width: 492rpx;
  height: 639rpx;
}
 
/* 红包盖子 */
 
.red-packet .red-packet-layout .red-packet-top {
  background-image: url('https://6465-dev-be16e9-1255326756.tcb.qcloud.la/payimg1/12.png');
  background-size: 490rpx 546rpx;
  width: 490rpx;
  height: 546rpx;
  position: absolute;
  top: 10rpx;
  left: 0;
  z-index: 101;
}
 
.red-packet .red-packet-layout.red-packet-open .red-packet-top {
  transform-origin: 0 200rpx;
  animation: open-top 0.2s ease-in-out 0s 1 normal;
  animation-fill-mode: forwards;
}
 
.red-packet .red-packet-layout .red-money {
  position: absolute;
  background-image: url('https://6465-dev-be16e9-1255326756.tcb.qcloud.la/payimg1/bi.png');
  visibility: visible;
  transition-property: top;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
  top: 0;
}
 
.red-packet .red-packet-layout .red-money.red-money-left1 {
  background-size: 44rpx 32rpx;
  width: 44rpx;
  height: 32rpx;
  left: 20rpx;
  top: 15rpx;
  transform: rotate(15deg);
  transition-delay: 0.1s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-left1 {
  top: 350rpx;
  left: 50rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-left2 {
  background-size: 33rpx 24rpx;
  width: 33rpx;
  height: 24rpx;
  left: 30rpx;
  top: 23rpx;
  transform: rotate(20deg);
  transition-delay: 0.1s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-left2 {
  top: 323rpx;
  left: 20rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-left3 {
  background-size: 33rpx 24rpx;
  width: 33rpx;
  height: 24rpx;
  left: 60rpx;
  top: 30rpx;
  transform: rotate(5deg);
  transition-delay: 0.1s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-left3 {
  top: 390rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-left4 {
  background-size: 33rpx 24rpx;
  width: 33rpx;
  height: 24rpx;
  left: 90rpx;
  top: 20rpx;
  transform: rotate(9deg);
  transition-delay: 0.3s;
  animation-timing-function: cubic-bezier(0.14, -0.2, 1, 0.18);
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-left4 {
  top: 396rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-middle1 {
  background-size: 90rpx 64rpx;
  width: 90rpx;
  height: 64rpx;
  top: 20rpx;
  transition-delay: 0.2s;
  animation-timing-function: cubic-bezier(0.14, -0.2, 1, 0.18);
  left: 200rpx;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-middle1 {
  top: 376rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-middle2 {
  background-size: 67rpx 48rpx;
  width: 67rpx;
  height: 48rpx;
  left: 160rpx;
  animation-timing-function: cubic-bezier(0.14, -0.2, 1, 0.18);
  top: 20rpx;
  transition-delay: 0.3s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-middle2 {
  top: 349rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-middle3 {
  background-size: 56rpx 40rpx;
  width: 56rpx;
  height: 40rpx;
  left: 120rpx;
  animation-timing-function: cubic-bezier(0.14, -0.2, 1, 0.18);
  top: 20rpx;
  transform: rotate(10deg);
  transition-delay: 0.1s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-middle3 {
  top: 382rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-middle4 {
  background-size: 56rpx 40rpx;
  width: 56rpx;
  height: 40rpx;
  left: 270rpx;
  top: 20rpx;
  animation-timing-function: cubic-bezier(0.14, -0.2, 1, 0.18);
  transition-delay: 0.4s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-middle4 {
  top: 345rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-right1 {
  background-size: 56rpx 40rpx;
  width: 56rpx;
  height: 40rpx;
  top: 20rpx;
  right: 50rpx;
  animation-timing-function: cubic-bezier(0.14, -0.2, 1, 0.18);
  transform: rotate(-30deg);
  transition-delay: 0.2s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-right1 {
  top: 353rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-right2 {
  background-size: 33rpx 24rpx;
  width: 33rpx;
  height: 24rpx;
  right: 26rpx;
  top: 20rpx;
  animation-timing-function: cubic-bezier(0.14, -0.2, 1, 0.18);
  transform: rotate(-10deg);
  transition-delay: 0.2s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-right2 {
  top: 280rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-right3 {
  background-size: 33rpx 24rpx;
  width: 33rpx;
  height: 24rpx;
  right: 10rpx;
  top: 20rpx;
  transition-delay: 0.1s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-right3 {
  top: 309rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-right4 {
  background-size: 44rpx 32rpx;
  width: 44rpx;
  height: 32rpx;
  top: 20rpx;
  right: 96rpx;
  transition-delay: 0.2s;
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-right4 {
  top: 309rpx;
}
 
.red-packet .red-packet-layout .red-money.red-money-right5 {
  background-size: 44rpx 32rpx;
  width: 45rpx;
  height: 65rpx;
  top: 20rpx;
  right: 115rpx;
  transition-delay: 0.2s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
 
.red-packet .red-packet-layout.red-packet-open .red-money.red-money-right5 {
  top: 356rpx;
}