微信小程序：水波纹扩散特效，头像实践

(Updated: )
开发

上图看效果：预览有些掉帧是因为录制Gif压缩了，实际上很流畅的。

2323.gif

其实效果很简单：

大家应该都见过安卓手机上经常有扩散的水波纹特效，而且前端UI库也有很多，但是它们都是背景颜色扩散，不是这种线条波纹，怎么处理的呢，其实就是使用多个叠加的元素附加在指定目标上，叠加的元素需要是绝对定位，然后设置动画：随着时间修改padding大小，这个叠加的元素是有border的，这样border就被扩展开了，如何多个依次呢？让多个叠加的元素动画错开一点就好了。

看看代码，为了简单示例：我用了两个伪元素：after，before

1
2
3
4
5
6
<view  class="usermotto pulse ">

<open-data  type="userAvatarUrl"></open-data>

</view>

下面是CSS

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
  

.usermotto  {

height:  150rpx;

/* background: #b6b6b6; */

border:  1px  solid #b6b6b67c;

border-radius:  160rpx;

width:  150rpx;

margin:  20%  auto;

overflow:  hidden;

}
.pulse::before  {

content:  '';

display:  block;

position:  absolute;

width:  150rpx;

box-sizing:  border-box;

height:  100%;

top:  0;

left:calc(50%  -  75rpx);

border:  inherit;

border-radius:  inherit;

transition:  opacity  0.3s,  transform  0.3s,  -webkit-transform  0.3s;

-webkit-animation:  pulse-animation  1s  cubic-bezier(0.24,  0,  0.38,  1)  infinite;

animation:  pulse-animation  2s  cubic-bezier(0.24,  0,  0.38,  1)  infinite;

z-index:  -1;

}

.pulse::after  {

content:  '';

display:  block;

position:  absolute;

width:  150rpx;

box-sizing:  border-box;

height:  100%;

top:  0;

left:calc(50%  -  75rpx);

border:  inherit;

border-radius:  inherit;

transition:  opacity  0.4s,  transform  0.4s,  -webkit-transform  0.4s;

-webkit-animation:  pulse-animation  1.5s  cubic-bezier(0.24,  0,  0.38,  1)  infinite;

animation:  pulse-animation  1.5s  cubic-bezier(0.24,  0,  0.38,  1)  infinite;

z-index:  -1;

}

  

@keyframes  pulse-animation  {

0%  {

opacity:  1;

padding:  10rpx;

transform:  scale(1);

-webkit-transform:  scale(1)

}

  

80%  {

opacity:  0;

padding:  40rpx;

transform:  scale(1.8);

-webkit-transform:  scale(1.8)

}

  

100%  {

opacity:  0;

padding:  60rpx;

transform:  scale(2);

-webkit-transform:  scale(2)

}

}