隨便寫的JS片段分析 CSS粒子（偽）（一）
開了兩天專欄一直沒想好寫點(diǎn)碼。在沫沫莉1K竹子賄賂之下，直播了兩小時寫代碼。想了想，干脆就寫著玩玩吧。
由于不能直播公司代碼，所以基本是我想到什么寫什么的。比較簡單的小東西。而且沒有半毛錢卵用。
定期傳gayhub: https://github.com/yqjiang/wtfanimates （嗯。手動黏貼吧。這里不可以站外地址呀）
代碼遵從 DWTFYW (你特么愛干嘛干嘛協(xié)議) V2 協(xié)議 （反正沒什么卵用）
文章更新順序 ：
這里 -> 個人博客 （darktan.top）換鏈接站內(nèi)信！引用源直接寫這里，服務(wù)器要錢租，我不想我博客訪問量過大。
由于我代碼太爛，我的一個房管忍不住辭職了。。。所以以后直播這事兒待定了。。。
----------
這期是上周寫的一個（偽）粒子系統(tǒng)。然而并沒有寫完。
先來說說 Motion （Windows下可以用AE生成 ）的粒子：
選一個粒子發(fā)生器 （然而只寫了大約一種？？）
選個原圖（然而并沒做）
選擇范圍（然而并沒做）
選擇源點(diǎn)（這里只寫了基于底邊線的）
選擇方向 （然而hardcode)
衰減度（然而hardcode)
生成
所以說，這只是個簡單例子，效果看封面（此處應(yīng)該是一張動圖）。
先說步驟吧。
首先，準(zhǔn)備好單個粒子，硬性寫個衰減度（這里是 0.7-0）寫一段CSS試一試 代碼是這樣的
HTML：
<div class="point point0"></div> <!-- 希望B站做了HTML encode -->
注：如果 這里沒有做HTML encode 上面那句話你們應(yīng)該看不到了 哈哈哈~
CSS：
.point1 {
width: 10px; /** 此處應(yīng)產(chǎn)生一定范圍內(nèi)隨機(jī)數(shù) **/
height: 10px; /** 此處隨機(jī)數(shù)應(yīng)與樓上保持一致 **/
background: #fff; /** 額。懶，留著下周修成圖片**/
border-radius: 5px; /** 此處隨機(jī)數(shù)應(yīng)是樓主 的一般，圖片情況下不饞合**/
position: absolute;
animation: particle 5s both 0s infinite; /** 兩個隨機(jī)的時間 一直循環(huán)，于是不用過多生成節(jié)點(diǎn) 此處沒做兼容，請自行添加 **/
left: 10%;/** 隨機(jī)數(shù) **/
}
/** 動畫部分：**/
@keyframes particle {
0% { /** 先隱藏一下。。要么突然掉下來丑~ **/
bottom: 0%;
opacity: 0;
}
1% {
bottom: 0%;
opacity: 0.7;
}
100% {
bottom: 100%;
opacity: 0;
}
}
下一步：
產(chǎn)生隨機(jī)：
寫了個js
function particle(num) {
var domstr = '';
var cssstr = '';
for (var i=0; i < num; i++) {
var redius = parseInt(Math.random() * 15 + 5); // 隨機(jī)數(shù)生成 起名有問題，應(yīng)該是直徑！5-20之間的一個數(shù)字
domstr += '<div class="point point' + i +'"></div>'
cssstr += '.point' + i +' {'
+ 'width: ' + redius + 'px;'
+ 'height: ' + redius + 'px;'
+ 'background: #fff;'
+ 'border-radius: ' + (redius / 2) +'px;'
+ 'position: absolute;'
+ 'animation: particle ' + ((parseInt(Math.random() * 50) / 10) + 5) + 's both ' + ((parseInt(Math.random() * 10 + 1) / 10)) +'s infinite;' // 此處的隨機(jī)數(shù)是我亂寫的。。后面的延遲時間還需要改。
+ 'left: ' + (Math.random() * 100) + '%'
+ '}';
}
cssstr += '@keyframes particle {'
+ '0% {'
+ 'bottom: 0%;'
+ 'opacity: 0;'
+ '} '
+ '1% {'
+ 'bottom: 0%;'
+ 'opacity: 0.7;'
+ '} '
+ '100% {'
+ 'bottom: 100%;'
+ 'opacity: 0;'
+ '}}';
var cssdom = document.querySelector('.gen');
cssdom.innerHTML = cssstr;
var previewdom = document.querySelector('.prefview');
previewdom.innerHTML = domstr;
}
一些說明。這里的動畫function 用的默認(rèn) ease 為毛？？？
ease = 貝塞爾曲線(0.25, 0.1, 0.25, 1.0);
大致上說就是先慢 中間快 后面慢。配合變淡?？雌饋頃幸恍┳兓?。好看些
（以上是我胡扯的，只不過懶而已）
生成后，可以直接黏貼代碼進(jìn)某個頁面。。。效果相同→_→
然后還是說一下粒子系統(tǒng)的正確姿勢吧。這個是偽的！并不是有點(diǎn)的玩意都能叫粒子系統(tǒng)！
粒子系統(tǒng)應(yīng)當(dāng)遵循物理特征，我寫那玩意，牛頓棺材板都壓不住。
比如從一個點(diǎn)發(fā)出的粒子，首先是有個隨機(jī)橫向速度 和一個隨機(jī)縱向速度的。
橫向速度隨時間衰減（空氣阻力 忽略不計(jì)） 縱向速度也隨時間衰減 先衰減到0 然后變成負(fù)的（下落）形成一條完美而光滑的拋物線 （???我為毛要用形容詞）
然后就是由于粒子較小。（比如火焰，水滴）一定是越來越小 越來越暗的。包括燃燒原因，和蒸發(fā)原因。
以上說的是一個正常的粒子系統(tǒng)。
然后說說視頻特效里的
常用的幾種情況
現(xiàn)在寫的 由下往上。。
由一個邊角，向屏幕中散發(fā) （這個其實(shí)純CSS也能偽出來）
由文字、圖形邊緣向外散發(fā)。（計(jì)算法向量最準(zhǔn)確，然而基本也是在邊緣隨機(jī)生成，然后從物體中心點(diǎn)向外散發(fā)）
基本特征是，跟牛頓他老人家沒有半毛錢關(guān)系，隨機(jī)生成，變暗 完成。。（Motion里默認(rèn)不變暗，需要特殊調(diào)試）
所以先寫到這。高中物理，自己回去復(fù)習(xí)，不貼公式裝逼。
