强大的CSS:模拟下雪效果动画制作教程

原创 高志飞 教程 css 82阅读 13 天前 举报

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。

1.前言

由于公司产品的活动,需要模拟类似下雪的效果。浏览器实现动画无非css3canvas(还有gif),对比下css3canvas的优缺点:

  1. 动画自由度:canvas胜;
  2. 复杂度:canvas胜;
  3. 兼容性:canvas胜;
  4. 性能:css3胜(requestAnimationFrame和硬件加速)。

由于对于性能有一定的要求,canvas对比css3会有更多的计算量导致性能可能不太好,所以选用css3模拟下雪效果(ps:能用css解决的问题就不用javascript解决哈哈)。

2.原理

本文所采用的是css3animation。为dom元素添加animation属性就可以模拟动画,例如w3school的例子:

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

  1. 在浏览器中下雪的起始点随机;
  2. 下雪的速度随机;
  3. 下雪从开始到落到地面的时间随机(延时随机和整个下雪过程的时间随机);
  4. 下雪过程中摇摆随机。

我们可以在css中找到这几点随机性的对应属性:

  1. 起始点:position的左右方位(动画我们一般采用定位,因为可以减少不必要的重排和重绘);
  2. 速度:animation-timing-function(提供了丰富的速度属性);
  3. 时间:animation-durationanimation-delay
  4. 摇摆:transform: translateX()(在水平方向上的位移)。

可能有人会问,这几个属性并不是随机的呀,并不像Math.random随机函数那样。我们换个思考方向,本文所说的随机是随机雪,并不是随机雪的属性。每个雪的下落时间、下落速度、摆动幅度是固定的,雪与雪之间的下落时间、下落速度、摆动幅度是不同,那么就达到效果了。

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

3.构造雪形状

3.1 一条线性渐变

3.2 多条线性渐变画雪花

4.构造下雪动画

我用sass写的css来构造动画,其实语言无所谓,重在原理。

4.1 起始点

这里运用sass的循环函数来创造1到100的匹配class名为animation和属性选择器为[data-animation-position=1~100vw]的值,例如我们想要元素的left50vw,就直接添加classdata-animation-position=50vw。这里有两点需要说明:

  1. 范围1~100vw:注意单位是vw,我们想要雪花的起始点出现在水平方向的任意位置,而vw是把屏幕等分为100份,100vw就是满屏;
  2. 为什么要把1~100都循环出来:只有这样才能匹配到范围内我们需要的值。

4.2 速度

4.3 时间

时间包含动画运动时间和延时时间。

4.4 摇摆

下雪由两个动画组成,分别是下落fall和摇摆swing,下落的动画是固定的,只有摇摆需要随机,所以我自定义了属性匹配规则,就可以随机摇摆了。

5.随机性

这里用react来演示代码,还是那句话只要理解了原理,语言其实并不太重要。

5.1 雪花元素

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

  1. data-animation-position:起始位;
  2. data-animation-timing:下雪速度;
  3. data-animation-delay:延时;
  4. data-animation-duration:下雪总时间;
  5. data-animation-name:下落动画和摇摆动画。

5.1 随机范围函数

5.2 属性随机赋值

一个人学习会有迷茫,动力不足。这里推荐一下我的前端学习交流群:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复