强大的CSS:模拟下雪效果动画制作教程-创新互联

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

网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了天宁免费建站欢迎大家使用!

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

1.前言

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

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

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

2.原理

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

              animation        
  

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

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

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

  1. 起始点: position 的左右方位(动画我们一般采用定位,因为可以减少不必要的重排和重绘);
  2. 速度: animation-timing-function (提供了丰富的速度属性);
  3. 时间: animation-duration animation-delay
  4. 摇摆: 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 $i from 1 through 100 {   .animation[data-animation-position='#{$i}'] {     left: #{$i}vw;   } }

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

  1. 范围1~100 vw :注意单位是 vw ,我们想要雪花的起始点出现在水平方向的任意位置,而 vw 是把屏幕等分为 100 份, 100vw 就是满屏;
  2. 为什么要把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 $timing {   .animation[data-animation-timing='#{$key}'] {     transition-timing-function: $value;   } }

4.3 时间

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

@for $i from 1 through 4 {   .animation[data-animation-delay='#{$i}'] {     animation-delay: #{$i}s;   } } @for $i from 4 through 8 {   .animation[data-animation-duration='#{$i}'] {     animation-duration: #{$i}s;   } }

4.4 摇摆

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

@for $i from 1 through 4 {   .animation[data-animation-name='#{$i}'] {     animation-name: fall, swing#{$i};   } } @for $i from 1 through 4 {   @keyframes swing#{$i}{     25% {       transform: translateX(-#{$i * 10}px);     }     50% {       transform: translateX(#{$i * 10}px);     }     75%{       transform: translateX(-#{$i * 10}px);     }     100%{       transform: translateX(#{$i * 10}px);     }   } }

5.随机性

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

5.1 雪花元素

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

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

  1. data-animation-position :起始位;
  2. data-animation-timing :下雪速度;
  3. data-animation-delay :延时;
  4. data-animation-duration :下雪总时间;
  5. 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)] }


自己是个做了几年全栈开发的老码农,如果你对前端开发这门技术感兴趣,这里推荐一下我的前端学习交流群: 767273102     ,里面都是学习前端的从最基础的HTML+CSS+JavaScript。jQuery,Ajax,node,angular等到移动端HTML5的项目实战的资料都有整理,送给每一位前端小伙伴。最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!


当前标题:强大的CSS:模拟下雪效果动画制作教程-创新互联
文章地址:http://myzitong.com/article/dehhes.html

其他资讯