随便写的JS片段分析 CSS粒子（伪）（一）
开了两天专栏一直没想好写点码。在沫沫莉1K竹子贿赂之下，直播了两小时写代码。想了想，干脆就写着玩玩吧。
由于不能直播公司代码，所以基本是我想到什么写什么的。比较简单的小东西。而且没有半毛钱卵用。
定期传gayhub: https://github.com/yqjiang/wtfanimates （嗯。手动黏贴吧。这里不可以站外地址呀）
代码遵从 DWTFYW (你特么爱干嘛干嘛协议) V2 协议 （反正没什么卵用）
文章更新顺序 ：
这里 -> 个人博客 （darktan.top）换链接站内信！引用源直接写这里，服务器要钱租，我不想我博客访问量过大。
由于我代码太烂，我的一个房管忍不住辞职了。。。所以以后直播这事儿待定了。。。
----------
这期是上周写的一个（伪）粒子系统。然而并没有写完。
先来说说 Motion （Windows下可以用AE生成 ）的粒子：
选一个粒子发生器 （然而只写了大约一种？？）
选个原图（然而并没做）
选择范围（然而并没做）
选择源点（这里只写了基于底边线的）
选择方向 （然而hardcode)
衰减度（然而hardcode)
生成
所以说，这只是个简单例子，效果看封面（此处应该是一张动图）。
先说步骤吧。
首先，准备好单个粒子，硬性写个衰减度（这里是 0.7-0）写一段CSS试一试 代码是这样的
HTML：
<div class="point point0"></div> <!-- 希望B站做了HTML encode -->
注：如果 这里没有做HTML encode 上面那句话你们应该看不到了 哈哈哈~
CSS：
.point1 {
width: 10px; /** 此处应产生一定范围内随机数 **/
height: 10px; /** 此处随机数应与楼上保持一致 **/
background: #fff; /** 额。懒，留着下周修成图片**/
border-radius: 5px; /** 此处随机数应是楼主 的一般，图片情况下不馋合**/
position: absolute;
animation: particle 5s both 0s infinite; /** 两个随机的时间 一直循环，于是不用过多生成节点 此处没做兼容，请自行添加 **/
left: 10%;/** 随机数 **/
}
/** 动画部分：**/
@keyframes particle {
0% { /** 先隐藏一下。。要么突然掉下来丑~ **/
bottom: 0%;
opacity: 0;
}
1% {
bottom: 0%;
opacity: 0.7;
}
100% {
bottom: 100%;
opacity: 0;
}
}
下一步：
产生随机：
写了个js
function particle(num) {
var domstr = '';
var cssstr = '';
for (var i=0; i < num; i++) {
var redius = parseInt(Math.random() * 15 + 5); // 随机数生成 起名有问题，应该是直径！5-20之间的一个数字
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;' // 此处的随机数是我乱写的。。后面的延迟时间还需要改。
+ '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 用的默认 ease 为毛？？？
ease = 贝塞尔曲线(0.25, 0.1, 0.25, 1.0);
大致上说就是先慢 中间快 后面慢。配合变淡。看起来会有一些变化。好看些
（以上是我胡扯的，只不过懒而已）
生成后，可以直接黏贴代码进某个页面。。。效果相同→_→
然后还是说一下粒子系统的正确姿势吧。这个是伪的！并不是有点的玩意都能叫粒子系统！
粒子系统应当遵循物理特征，我写那玩意，牛顿棺材板都压不住。
比如从一个点发出的粒子，首先是有个随机横向速度 和一个随机纵向速度的。
横向速度随时间衰减（空气阻力 忽略不计） 纵向速度也随时间衰减 先衰减到0 然后变成负的（下落）形成一条完美而光滑的抛物线 （❓❓❓我为毛要用形容词）
然后就是由于粒子较小。（比如火焰，水滴）一定是越来越小 越来越暗的。包括燃烧原因，和蒸发原因。
以上说的是一个正常的粒子系统。
然后说说视频特效里的
常用的几种情况
现在写的 由下往上。。
由一个边角，向屏幕中散发 （这个其实纯CSS也能伪出来）
由文字、图形边缘向外散发。（计算法向量最准确，然而基本也是在边缘随机生成，然后从物体中心点向外散发）
基本特征是，跟牛顿他老人家没有半毛钱关系，随机生成，变暗 完成。。（Motion里默认不变暗，需要特殊调试）
所以先写到这。高中物理，自己回去复习，不贴公式装逼。
