微信小程序红包封面动画_小程序模拟红包封面滑动

使用绝对定位和动画实现如上效果:
wxml

<!--pages/testhongbao/index.wxml-->
<text>pages/testhongbao/index.wxml</text>
<text>pages/testhongbao/index.wxml</text>
<text>pages/testhongbao/index.wxml</text>
<text>pages/testhongbao/index.wxml</text>
<view class="fd">
    <view class="dtop {{onHide?'slide-top':''}}">
        <view class="gxfc">恭喜发财，大吉大利</view>
        <view class="lq" bindtap="tapHandle">開</view>
</view>
<view class="dbottom {{onHide?'slide-bottom':''}}" ></view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12

wxss:

/* pages/testhongbao/index.wxss */
.slide-top {
  -webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.slide-bottom {
  -webkit-animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-bottom 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.fd {
  position: fixed;
  z-index: 998;
  width: 100vw;
  height: 100vh;
}
.fd .dtop {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70vh;
  border-radius: 0 0 30% 30%;
  background-color: #f45e4d;
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.2);
}
.fd .dtop .gxfc {
  color: #fee3b2;
  font-size: 60rpx;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 40%;
}
.fd .dtop .lq {
  width: 250rpx;
  height: 250rpx;
  border-radius: 50%;
  background-color: #ebcd99;
  font-weight: 900;
  color: #333;
  font-size: 100rpx;
  text-align: center;
  line-height: 250rpx;
  position: absolute;
  left: 50%;
  bottom: -125rpx;
  transform: translate(-50%);
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.5);
}
.fd .dbottom {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 50vh;
  background-color: #f25542;
}
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-120%);
    transform: translateY(-120%);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-120%);
    transform: translateY(-120%);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

js:

// pages/testhongbao/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        onHide:false,
        Show:true,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    tapHandle(){
        this.setData({
            onHide:true
        })
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

json:

{
    "usingComponents": {},
    "navigationStyle": "custom"
}
1
2
3
4