新年新气象，制作微信原生小程序红包特效

新的一年又到来了，对于我们这些长大了的猿们，再也不能肆无忌惮的摊手收红包了，反而要笑嘻嘻的给别个发红包，辛苦一年还不够回趟老家。

作为勤劳的技术猿，没有红包，我们就自己造红包，还可以发给身边的人，乐呵乐呵，今天我们来探讨一下如何实现一个不那么高端的新年红包吧

先上最终效果图，简书没有音效，完整效果直接扫文章结尾的小程序码吧

QQ20190112-002757-HD77777.gif

基础布局

首先我们先了解一下整体切图

image.png

接下来我们需要完成基础布局

image.png

通过小程序标签完成以上基础布局，我们需要将顶不top向后翻转90度，为什么需要这样呢，主要是为了在红包盖子打开成90度时向上翻起衔接翻开动画，形成如上样式

代码解析如下:

<view class="red-packet">
  <view class="red-packet-content">
    <view class="red-packet-up" />
    <view class="red-packet-middle" />
  </view>
</view>

相关样式如下

.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.60);
}

.red-packet .red-packet-content {
  position: relative;
}

.red-packet .red-packet-content .red-packet-up {
  background-image: url('https://gxm-ecommerce.oss-cn-shenzhen.aliyuncs.com/user_upload/rc-upload-1547213682422-2.png');
  background-size: 490rpx 82rpx;
  width: 490rpx;
  height: 82rpx;
}

.red-packet .red-packet-content .red-packet-middle {
  background-image: url('https://gxm-ecommerce.oss-cn-shenzhen.aliyuncs.com/user_upload/rc-upload-1547213682422-4.png');
  background-size: 490rpx 462rpx;
  width: 490rpx;
  height: 462rpx;
}

制作红包盖子样式

image.png

红色箭头后面说明用处，此处忽略

<view class="red-packet">
  <view class="red-packet-layout">
    <view class="red-packet-up" />
    <view class="red-packet-middle" />
    <view class="red-packet-content" />
    <view class="red-packet-top" />
    <view class="red-packet-bottom" />
  </view>
</view>

.red-packet .red-packet-layout .red-packet-top {
  background-image: url('https://gxm-ecommerce.oss-cn-shenzhen.aliyuncs.com/user_upload/rc-upload-1547213682422-6.png');
  background-size: 490rpx 546rpx;
  width: 490rpx;
  height: 546rpx;
  position: absolute;
  top: -116rpx;
  left: 0;
  z-index: 101;
}

.red-packet .red-packet-layout .red-packet-bottom {
  background-image: url('https://gxm-ecommerce.oss-cn-shenzhen.aliyuncs.com/user_upload/rc-upload-1547213682422-8.png');
  background-size: 490rpx 264rpx;
  width: 490rpx;
  height: 264rpx;
  position: absolute;
  top: 278rpx;
  left: 0;
  z-index: 100;
}

.red-packet .red-packet-layout.red-packet-open .red-packet-bottom {
  background-image: url('https://gxm-ecommerce.oss-cn-shenzhen.aliyuncs.com/user_upload/rc-upload-1547213682422-10.png');
}

到此红包的基础布局便完成了效果如下

image.png

红包特效

接下来我们开始制作开启红包的效果，我们希望效果是打开红包红包盖子向上翻起，底部替换为开启状态的底部，当红包盖子翻起到90度时顶部向上翻起，红包内容缓慢伸出

定义盖子开启效果

@keyframes open-top {
  0% {
    transform: rotateX(0);
  }
  100% {
    transform: rotateX(90deg);
  }
}

.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;
}

定义顶部开启效果

@keyframes open-up {
  0% {
    transform: rotateX(-90deg);
  }
  100% {
    transform: rotateX(0);
  }
}

.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-open .red-packet-content {
  top: -40rpx;
  transition: top 0.2s ease-in-out 0.2s;
}

效果如下

QQ20190111-232027-HD.gif

元宝掉落效果

元宝掉落仅仅简单的实现了垂直散落，由于元素和代码较多，在这里就不一一列举了，直接查看源代码吧，效果如下:

QQ20190112-001053-HD333333.gif

添加音效

添加声音效果需要用到wx函数

const audio = wx.createInnerAudioContext()
audio.src = 'https://gxm-ecommerce.oss-cn-shenzhen.aliyuncs.com/user_upload/rc-upload-1547213682422-20.mp3'

Component({
  data: {
    open: false,
  },
  methods: {
    handleOpen() {
      audio.play()
      this.setData({ open: true })
    },
  }
})

结束语

整体红包的编写完成，项目托管于github, 完整代码查看weapp-red-packet，为了更好的展现红包，我们可以对图片资源做预加载，当资源准备完成后，才显示红包给用户，以免产生闪动及呈现效果不佳等问题

image.png