本文共 4140 字,大约阅读时间需要 13 分钟。
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯 css
模拟下雪的效果,更多效果大家可以自行发挥。
由于公司产品的活动,需要模拟类似下雪的效果。浏览器实现动画无非 css3
和 canvas
(还有 gif
),对比下 css3
和 canvas
的优缺点:
canvas
胜; canvas
胜; canvas
胜; css3
胜( requestAnimationFrame
和硬件加速)。 由于对于性能有一定的要求, canvas
对比 css3
会有更多的计算量导致性能可能不太好,所以选用 css3
模拟下雪效果(ps:能用 css
解决的问题就不用 javascript
解决哈哈)。
本文所采用的是 css3
的 animation
。为 dom
元素添加 animation
属性就可以模拟动画,例如w3school的例子:
animation
当然这谁都会,但有个问题是,下雪并不是机械的下落,而是有快有慢、摆动幅度、时间不定,这里的重点是需要构造随机性,理性分析下。
我们可以在css中找到这几点随机性的对应属性:
position
的左右方位(动画我们一般采用定位,因为可以减少不必要的重排和重绘); animation-timing-function
(提供了丰富的速度属性); animation-duration
和 animation-delay
; transform: translateX()
(在水平方向上的位移)。 可能有人会问,这几个属性并不是随机的呀,并不像 Math.random
随机函数那样。我们换个思考方向,本文所说的随机是随机雪,并不是随机雪的属性。每个雪的下落时间、下落速度、摆动幅度是固定的,雪与雪之间的下落时间、下落速度、摆动幅度是不同,那么就达到效果了。
意识到这点,就剩下最后一个问题,怎样给每个雪不同的下落时间、下落速度、摆动幅度呢?这里我们使用真正的随机函数 Math.random
,利用data自定义属性配合 Math.random
和css的属性匹配规则,就可以确定动画效果了。
.linear{ width: 100px; height: 100px; background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%); }
.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%); }
我用 sass
写的 css
来构造动画,其实语言无所谓,重在原理。
@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
。这里有两点需要说明:
vw
:注意单位是 vw
,我们想要雪花的起始点出现在水平方向的任意位置,而 vw
是把屏幕等分为 100
份, 100vw
就是满屏; $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; } }
时间包含动画运动时间和延时时间。
@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; } }
下雪由两个动画组成,分别是下落 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); } } }
这里用 react
来演示代码,还是那句话只要理解了原理,语言其实并不太重要。
{ Array(10).fill().map((v, i) => ( )) }
我们的雪花元素包含几下几个属性值:
data-animation-position
:起始位; data-animation-timing
:下雪速度; data-animation-delay
:延时; data-animation-duration
:下雪总时间; data-animation-name
:下落动画和摇摆动画。 random(min, max){ return Math.floor(Math.random() * (max - min + 1) + min) }
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)] }
自己是个做了几年全栈开发的老码农,如果你对前端开发这门技术感兴趣,这里推荐一下我的前端学习交流群: ,里面都是学习前端的从最基础的HTML+CSS+JavaScript。jQuery,Ajax,node,angular等到移动端HTML5的项目实战的资料都有整理,送给每一位前端小伙伴。最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/69901074/viewspace-2644783/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/69901074/viewspace-2644783/