【原】使用less實現隨機下雪動畫

元旦在公司擼碼，想起聖誕節的搖搖樂項目有段代碼挺有意思的，藉着空閒的時間把代碼抽出來，沉澱下經驗。
冬天來了，設計師說搖搖樂的場景須要隨機下落的雪花動畫，第一時間就想到的方法是canvas比較好，項目很是緊急，然而小程序對canvas支持不夠友好，容易在項目中出現沒法預估的兼容性問題 ，立刻又否認了這種想法，想了想用javascript來寫隨機動畫成本又高。既不用canvas也不用javascript來實現，最終決定使用css預處理器less來實現隨機雪花，less怎麼可能實現隨機雪花？對於喜歡寫css的人來講，這很是有趣。

上圖的雪花效果還蠻炫酷吧，怎麼實現呢？less由於有如下的2個特色，能夠嘗試使用它來實現咱們的場景

1.遞歸調用

實際上less並無自帶相似javascript的for循環的功能，但less能夠用過引導when來實現條件判斷，簡單的方法也可讓聰明的程序員簡單實現遞歸調用

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

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

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

}
.snow(60);//執行次數

2.避免編譯JavaScript 表達式

雪花須要生成的隨機數，咱們須要運用javascript表達式嵌入到less代碼，同時也要避免javascript表達式被less錯誤的編譯，咱們須要瞭解兩個點。

1. 一些 LESS不認識的專有語法，能夠在字符串前加上一個 ~，
2. JavaScript 表達式在less 文件中使用，能夠經過反引號的方式使用

因而有了以下隨機位移、隨機時間、隨機大小的代碼

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代碼，具體怎麼實現請留意詳細的代碼註釋

如下less代碼使用構建後可生產一份隨機css固定雪花文件，決定了每個雪花有不一樣的大小、水平位移、垂直位移、出場位置、出場時間，不一樣的雪花大小，不一樣的下落速度，用肉眼看到的雪花就像是隨機的，能夠在項目上線前嘗試多構建幾回，獲得一份均勻分佈在窗口的隨機雪花。

* {
    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濾鏡來畫雪花
    }
}
//隨機雪花函數
.snow(@n) when (@n > 0) {
    .snow_@{n}{
        //水平方向上的位移
        left: ~"`Math.round(Math.random() * @{windowWidth})`px";
        //動畫運行時間8~12秒，保證雪花有不一樣的移動速度
        animation: ~"snowani_@{n} `(-Math.random() * 4 + 8).toFixed(2)`s linear infinite";
        //動畫提早出場時間，也就是垂直方向上位移
        animation-delay: ~"`(-Math.random() * 8 + 0.2).toFixed(2)`s";
        &:after{
            //雪花大小隨機，0.5~1.2
           transform: ~"scale(`(Math.random() * 0.7 + 0.5).toFixed(2)`)";
        }
    }
    @keyframes ~"snowani_@{n}" {
        0%{
            transform: translateY(0);
        }
        100%{
            //垂直方向上高度，保證雪花有不一樣的移動速度
            transform: ~"translateY(`Math.round(Math.random() * 200 + 1600)`px)";
        }
    }
    .snow((@n - 1));
}
.snow(60);//生成雪花的數量

把上面的雪花的代碼構建後以下：

還有HTML，一行代碼的事情

在編輯器中安裝好emmet或webstorm開啓emmet後，輸入下面代碼按下ctrl+e快捷鍵便可生成60個不一樣命名的雪花標籤。

.snow_wrap>.snow.snow_$*60

 

軟件開發沒有銀彈，不要讓經驗固化了咱們的思惟，相信還有更多更好的實現方式，來提高咱們的開發效率。

新年第一彈，新的開始，豬你們元旦快樂，抽中搖搖樂免單，身體健康，大吉大利。