快捷導(dǎo)航

如何使用less實(shí)現(xiàn)隨機(jī)下雪動(dòng)畫(huà)詳解

更新時(shí)間：2019年01月02日 11:44:57 作者：白樹(shù)

這篇文章主要給大家介紹了關(guān)于如何使用less實(shí)現(xiàn)隨機(jī)下雪動(dòng)畫(huà)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

元旦在公司擼碼，想起圣誕節(jié)的搖搖樂(lè)項(xiàng)目有段代碼挺有意思的，借著空閑的時(shí)間把代碼抽出來(lái)，沉淀下經(jīng)驗(yàn)。

冬天來(lái)了，設(shè)計(jì)師說(shuō)搖搖樂(lè)的場(chǎng)景需要隨機(jī)下落的雪花動(dòng)畫(huà)，第一時(shí)間就想到的方法是canvas比較好，項(xiàng)目非常緊急，然而小程序?qū)anvas支持不夠友好，容易在項(xiàng)目中出現(xiàn)無(wú)法預(yù)估的兼容性問(wèn)題，馬上又否定了這種想法，想了想用javascript來(lái)寫(xiě)隨機(jī)動(dòng)畫(huà)成本又高。既不用canvas也不用javascript來(lái)實(shí)現(xiàn)，最終決定使用css預(yù)處理器less來(lái)實(shí)現(xiàn)隨機(jī)雪花，less怎么可能實(shí)現(xiàn)隨機(jī)雪花？對(duì)于喜歡寫(xiě)css的人來(lái)說(shuō)，這非常有趣。

上圖的雪花效果還蠻炫酷吧，怎么實(shí)現(xiàn)呢？less因?yàn)橛幸韵碌?個(gè)特點(diǎn)，可以嘗試使用它來(lái)實(shí)現(xiàn)我們的場(chǎng)景

1.遞歸調(diào)用

實(shí)際上less并沒(méi)有自帶類(lèi)似javascript的for循環(huán)的功能，但less可以用過(guò)引導(dǎo)when來(lái)實(shí)現(xiàn)條件判斷，簡(jiǎn)單的方法也可以讓聰明的程序員簡(jiǎn)單實(shí)現(xiàn)遞歸調(diào)用

.snow(@n) when (@n > 0) {

 fn()//生成雪花函數(shù)fn()

 .snow((@n - 1));//再次執(zhí)行函數(shù)fn()

}
.snow(60);//執(zhí)行次數(shù)

2.避免編譯JavaScript 表達(dá)式

雪花需要生成的隨機(jī)數(shù)，我們需要運(yùn)用javascript表達(dá)式嵌入到less代碼，同時(shí)也要避免javascript表達(dá)式被less錯(cuò)誤的編譯，我們需要了解兩個(gè)點(diǎn)。

一些 LESS不認(rèn)識(shí)的專(zhuān)有語(yǔ)法，可以在字符串前加上一個(gè) ~，
JavaScript 表達(dá)式在less 文件中使用，可以通過(guò)反引號(hào)的方式使用

于是有了如下隨機(jī)位移、隨機(jī)時(shí)間、隨機(jī)大小的代碼

left: ~"`Math.round(Math.random() * @{windowWidth})`px";
animation: ~"snowani_@{n} `(-Math.random() * 4 + 8).toFixed(2)`s linear infinite";
transform: ~"scale(`(Math.random() * 0.7 + 0.5).toFixed(2)`)";

于是有了如下的Less代碼，具體怎么實(shí)現(xiàn)請(qǐng)留意詳細(xì)的代碼注釋

以下less代碼使用構(gòu)建后可生產(chǎn)一份隨機(jī)css固定雪花文件，決定了每一個(gè)雪花有不同的大小、水平位移、垂直位移、出場(chǎng)位置、出場(chǎng)時(shí)間，不同的雪花大小，不同的下落速度，用肉眼看到的雪花就像是隨機(jī)的，可以在項(xiàng)目上線前嘗試多構(gòu)建幾次，得到一份均勻分布在窗口的隨機(jī)雪花。

* {
 padding: 0;
 margin: 0;
}
html, body {
 height: 100%;
}

//瀏覽器窗口寬度
@windowWidth: 750;
//雪花
.snow {
 &_wrap{
 position: relative;
 width: ~"@{windowWidth}px";
 height: 100%;
 overflow: hidden;
 background: rgba(14,99,69,1);
 margin: 0 auto;
 }
 //雪花初始化大小
 position: absolute;
 width:20px;
 height: 20px;
 &:after{
 content: '';
 position: absolute;
 left:0;
 top:0;
 width:20px;
 height: 20px;
 background-color:#fff;
 opacity:1;
 border-radius: 100%;
 filter:blur(5px);//此處使用css3濾鏡來(lái)畫(huà)雪花
 }
}
//隨機(jī)雪花函數(shù)
.snow(@n) when (@n > 0) {
 .snow_@{n}{
 //水平方向上的位移
 left: ~"`Math.round(Math.random() * @{windowWidth})`px";
 //動(dòng)畫(huà)運(yùn)行時(shí)間8~12秒，保證雪花有不同的移動(dòng)速度
 animation: ~"snowani_@{n} `(-Math.random() * 4 + 8).toFixed(2)`s linear infinite";
 //動(dòng)畫(huà)提前出場(chǎng)時(shí)間，也就是垂直方向上位移
 animation-delay: ~"`(-Math.random() * 8 + 0.2).toFixed(2)`s";
 &:after{
  //雪花大小隨機(jī)，0.5~1.2
  transform: ~"scale(`(Math.random() * 0.7 + 0.5).toFixed(2)`)";
 }
 }
 @keyframes ~"snowani_@{n}" {
 0%{
  transform: translateY(0);
 }
 100%{
  //垂直方向上高度，保證雪花有不同的移動(dòng)速度
  transform: ~"translateY(`Math.round(Math.random() * 200 + 1600)`px)";
 }
 }
 .snow((@n - 1));
}
.snow(60);//生成雪花的數(shù)量

把上面的雪花的代碼構(gòu)建后如下：