如何用css模拟降雪效果

terry 2年前 (2023-09-27) 阅读数 68 #数据结构与算法

降雪效果只是一些自由落体运动效果（如红包雨）可以实现的效果类型的名称。本文使用clean css来模拟下雪效果。

1。简介

由于公司产品的活动，需要模拟下雪的效果。浏览器动画实现无非就是css3和canvas（和gifs›‶），比较和canvas 优点和缺点：动画自由度：canvas获胜；

难度：画布获胜；

兼容性：画布获胜；

性能：css3 获胜（requestAnimationFrame 和硬件加速）。

由于一定的性能要求，canvas相对于css3计算量会更多，性能可能不是很好，所以我们选择css3进行模拟。下雪效果（ps：用css能解决的问题不需要用javascript解决哈哈）。

链接地址

雪花效果Github代码
雪花效果Codex Pen

`2。原理`

本文使用动画css3 。将 dom 元素添加到 animation 属性可以模拟类似 w3school 示例的动画：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>animation</title>
  <style>
    .animation{
      width:100px;
      height:100px;
      background:red;
      position:relative;
      animation:mymove 5s infinite;
      -webkit-animation:mymove 5s infinite;
    }
    @keyframes mymove{
      from {
        left:0px;
      }
      to {
        left:200px;
      }
    }
  </style>
</head>
<body>
  <div class="animation"></div>
</body>
</html>
复制代码

当然，任何人都可以做到，但这不是机械崩溃的问题。相反，波动有快有慢，幅度不同，时间不确定。这里的关键是需要构建随机性并对其进行理性分析。

浏览器中的降雪起点是随机的；
降雪率是随机的；
从开始到落地的时间是随机的（延迟是随机的，整个下雪过程的时间是随机的）；
下雪时摇摆是随机的。

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

起始点：左右方向位置（一般动画我们使用定位，因为这样可以减少不必要的重建和重绘）；
速度：动画-功能-计时（提供丰富的速度属性）；
时间：动画持续时间和动画延迟；
摆动：变换：translateX()（水平方向移动）。

有人可能会问，这些属性不是随机的，不像随机函数Math.random。我们换个思考的方向吧。本文所说的随机性是随机雪，而不是随机雪属性。每场雪的下落时间、下落速度、摆动幅度都是固定的，但不同雪的下落时间、下落速度、摆动幅度不同，所以达到了效果。

一旦意识到这一点，最后一个问题仍然存在：如何给每场雪不同的下落时间、下落速度和摆动幅度？这里我们使用真正的随机函数Math.random，并使用自定义的数据属性来匹配Math.random和css属性比较规则来确定动画效果。？ css

用于构造动画。其实，语言并不重要，重要的是原理。

4.1 起点

@for $i from 1 through 100 {
  .animation[data-animation-position='#{$i}'] {
    left: #{$i}vw;
  }
}
复制代码

这里我们使用循环函数sass来创建对应的类，名为‶ani，属性选择器是来自的值[数据动画-position=1 ~100vw]，例如，如果我们希望 left, 直接位于 class 元素中的50。名称数据动画位置=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 $timing {
  .animation[data-animation-timing='#{$key}'] {
    transition-timing-function: $value;
  }
}
复制代码

`4.3 时间`

时间包括动画移动时间和延迟时间。 I 自定义属性匹配规则后可以随意挥杆。

@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 雪花元素`

<div className='page'>
  {
    Array(10).fill().map((v, i) => (
      <span
        key={i}
        className='animation span'
        data-animation-position={this.position()}
        data-animation-timing={this.timing()}
        data-animation-delay={this.delay()}
        data-animation-duration={this.duration()}
        data-animation-name={this.name()}
      />
    ))
  }
</div>
复制代码

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

data-animation-position：初始位置；
data-animation-timing：低于 Snow 速度；
data-animation-delay：延迟；
data-animation-duration：总降雪持续时间；
data-animation-name：下落动画和摇摆动画。？我个人认为，如果一定要加第四个无的话，可能就是无js哈哈（开个玩笑）。随着css的发展，它的领域非常广、深、不可或缺。很多时候，如果css用得更好，会节省很多时间，代码js 会降低整个功能的实现难度，大家互相鼓励。作者：四海链接：https://juejin.im/post/5c4525ab6fb9a049bb7ca45c.来源：掘金商业转载请联系作者获得许可。非商业转载请注明来源。