CSS：模拟下雪效果动画制作教程

1.前言
由于公司产品的活动，需要模拟类似下雪的效果。浏览器实现动画无非css3和canvas（还有gif），对比下css3和canvas的优缺点：

动画自由度：canvas胜；
复杂度：canvas胜；
兼容性：canvas胜；
性能：css3胜（requestAnimationFrame和硬件加速）。
由于对于性能有一定的要求，canvas对比css3会有更多的计算量导致性能可能不太好，所以选用css3模拟下雪效果（ps：能用css解决的问题就不用javascript解决哈哈）。

对web前端这门技术感兴趣的小伙伴可以加入到我们的学习圈来，正因为我不是211，985，只是个普通的本科生，英语不是特别好，数学不是特别好。所以我选择了前端。工作第六个年头了，我庆幸自己选择了这条路。767-273-102 秋裙。在鹅厂做过，跟着创业头子混过。想把自己的技术分享给大家，如果你还在迷茫，也希望能进我一些绵薄之力，帮助到你。都是一群有梦想的人，我们可能在不同的城市，但我们会一起结伴同行前端前端前端

2.原理
本文所采用的是css3的animation。为dom元素添加animation属性就可以模拟动画，例如w3school的例子：

当然这谁都会，但有个问题是，下雪并不是机械的下落，而是有快有慢、摆动幅度、时间不定，这里的重点是需要构造随机性，理性分析下。

在浏览器中下雪的起始点随机;
下雪的速度随机;
下雪从开始到落到地面的时间随机（延时随机和整个下雪过程的时间随机）;
下雪过程中摇摆随机。
我们可以在css中找到这几点随机性的对应属性：

起始点：position的左右方位（动画我们一般采用定位，因为可以减少不必要的重排和重绘）；
速度：animation-timing-function（提供了丰富的速度属性）；
时间：animation-duration和animation-delay；
摇摆：transform: translateX()（在水平方向上的位移）。
可能有人会问，这几个属性并不是随机的呀，并不像Math.random随机函数那样。我们换个思考方向，本文所说的随机是随机雪，并不是随机雪的属性。每个雪的下落时间、下落速度、摆动幅度是固定的，雪与雪之间的下落时间、下落速度、摆动幅度是不同，那么就达到效果了。

意识到这点，就剩下最后一个问题，怎样给每个雪不同的下落时间、下落速度、摆动幅度呢？这里我们使用真正的随机函数Math.random，利用data自定义属性配合Math.random和css的属性匹配规则，就可以确定动画效果了。

3.构造雪形状
3.1 一条线性渐变
CSS：模拟下雪效果动画制作教程

.linear{
width: 100px;
height: 100px;
background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%);
}
3.2 多条线性渐变画雪花
CSS：模拟下雪效果动画制作教程

.linear{
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),
linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%);
}
4.构造下雪动画
我用sass写的css来构造动画，其实语言无所谓，重在原理。

4.1 起始点
@for KaTeX parse error: Expected '}', got '#' at position 62: …tion-position='#̲{i}’] {
left: #{$i}vw;
}
}
这里运用sass的循环函数来创造1到100的匹配class名为animation和属性选择器为[data-animation-position=1~100vw]的值，例如我们想要元素的left为50vw，就直接添加class名data-animation-position=50vw。这里有两点需要说明：

范围1~100vw：注意单位是vw，我们想要雪花的起始点出现在水平方向的任意位置，而vw是把屏幕等分为100份，100vw就是满屏；
为什么要把1～100都循环出来：只有这样才能匹配到范围内我们需要的值。
4.2 速度
$timing: (
linear: linear,
ease: ease,
ease-in: ease-in,
ease-out: ease-out,
ease-in-out: ease-in-out
);

@each $key, $value in KaTeX parse error: Expected '}', got '#' at position 46: …mation-timing='#̲{key}’] {
transition-timing-function: $value;
}
}
4.3 时间
时间包含动画运动时间和延时时间。

@for KaTeX parse error: Expected '}', got '#' at position 57: …imation-delay='#̲{i}’] {
animation-delay: #{$i}s;
}
}
@for KaTeX parse error: Expected '}', got '#' at position 60: …tion-duration='#̲{i}’] {
animation-duration: #{$i}s;
}
}
4.4 摇摆
下雪由两个动画组成，分别是下落fall和摇摆swing，下落的动画是固定的，只有摇摆需要随机，所以我自定义了属性匹配规则，就可以随机摇摆了。

@for KaTeX parse error: Expected '}', got '#' at position 56: …nimation-name='#̲{i}’] {
animation-name: fall, swing#{$i};
}
}
@for KaTeX parse error: Expected '}', got '#' at position 40: …keyframes swing#̲{i}{
25% {
transform: translateX(-#{KaTeX parse error: Expected 'EOF', got '}' at position 7: i * 10}̲px); } …i * 10}px);
}
75%{
transform: translateX(-#{KaTeX parse error: Expected 'EOF', got '}' at position 7: i * 10}̲px); } …i * 10}px);
}
}
}
5.随机性
这里用react来演示代码，还是那句话只要理解了原理，语言其实并不太重要。

5.1 雪花元素

{ Array(10).fill().map((v, i) => ( )) }

我们的雪花元素包含几下几个属性值：

data-animation-position：起始位；
data-animation-timing：下雪速度；
data-animation-delay：延时；
data-animation-duration：下雪总时间；
data-animation-name：下落动画和摇摆动画。
5.1 随机范围函数
random(min, max){
return Math.floor(Math.random() * (max - min + 1) + min)
}
5.2 属性随机赋值
position(){
return this.random(1, 100)
}
delay(){
return this.random(1, 4)
}
duration(){
return this.random(4, 8)
}
name(){
return this.random(1, 4)
}
timing(){
return [‘linear’, ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’][this.random(0, 4)]
}
深圳网站建设www.sz886.com