強大的CSS:模擬下雪效果動畫制作教程
css
模擬下雪的效果,更多效果大家可以自行發揮。
1.前言
由於公司產品的活動,需要模擬類似下雪的效果。瀏覽器實現動畫無非css3
和canvas
(還有gif
),對比下css3
和canvas
的優缺點:
- 動畫自由度:
canvas
勝; - 復雜度:
canvas
勝; - 兼容性:
canvas
勝; - 性能:
css3
勝(requestAnimationFrame
和硬件加速)。
由於對於性能有一定的要求,canvas
對比css3
會有更多的計算量導致性能可能不太好,所以選用css3
模擬下雪效果(ps:能用css
解決的問題就不用javascript
2.原理
本文所采用的是css3
的animation
。為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中找到這幾點隨機性的對應屬性:
- 起始點:
position
的左右方位(動畫我們一般采用定位,因為可以減少不必要的重排和重繪); - 速度:
animation-timing-function
(提供了豐富的速度屬性); - 時間:
animation-duration
和animation-delay
; - 搖擺:
transform: translateX()
可能有人會問,這幾個屬性並不是隨機的呀,並不像Math.random
隨機函數那樣。我們換個思考方向,本文所說的隨機是隨機雪,並不是隨機雪的屬性。每個雪的下落時間、下落速度、擺動幅度是固定的,雪與雪之間的下落時間、下落速度、擺動幅度是不同,那麽就達到效果了。
意識到這點,就剩下最後一個問題,怎樣給每個雪不同的下落時間、下落速度、擺動幅度呢?這裏我們使用真正的隨機函數Math.random
,利用data自定義屬性配合Math.random
和css的屬性匹配規則,就可以確定動畫效果了。
3.構造雪形狀
3.1 一條線性漸變
.linear{
width: 100px;
height: 100px;
background: linear-gradient(0, green 40%, red 40%, red 60%, green 60%);
}
3.2 多條線性漸變畫雪花
.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~100
vw
:註意單位是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 時間
時間包含動畫運動時間和延時時間。
@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 雪花元素
<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
:下雪速度;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)]
}
這裏推薦一下我的前端學習交流扣qun:767273102 ,裏面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效,遊戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小夥伴。2019最新技術,與企業需求同步。好友都在裏面學習交流,每天都會有大牛定時講解前端技術!
點擊:加入
強大的CSS:模擬下雪效果動畫制作教程