JS库中的粒子 射流研究…在某视频剪辑软件上的运用案例分析

知乎的首页后面的粒子动效总觉得很炫酷，搜了一下，发现是用粒子。射流研究…编写的。刚好目前的项目是利用某视频剪辑软件框架的，两个凑在一起学了。

讲道理，这个用得好的话，页面是可以很酷的，譬如我现在写的项目

酷酷的登录页

嘻嘻~

安装粒子。射流研究…

国家预防机制安装-保存粒子

配置粒子。射流研究…

1 .数据

这个数据是用于控制粒子在页面中所呈现的状态。

{ '粒子' : { '数字' : { '值' : 60,'密度' : { '启用： true，' value_area': 800 } }，' color': { '值' : ' # ffffff ' }，' shape': { 'type': 'circle '，' stroke ' : { ' width ' : ' line _ link ' : { ' enable ' : true，' distance': 150，' color': '#ffffff '，'不透明度： 0 0.4，“宽度”: 1 }、“移动”: {“启用”: true、“速度”: 4、“方向”:“无”、“随机”: false、“直接”3: false、“out_mode”不透明度' : 8 ','速度' : 3 },'排斥' : { '距离' : 200,'持续时间' : 0.4 },'推动' : { '粒子_nb': 4 }，移除' : { '粒子_nb': 2 } }，' retina_detect': true}2模板。

这个就是动态粒子要展示的位置。

div id='粒子/div3.script

因为涉及到数字正射影像图树，所以必须在挂载结束后初始化粒子。js。第一个参数编号就是你在模板上取得编号名，像我要写的话就是粒子。第二个参数是你的数据存放的路径，个人建议使用相对路径。

已安装(){ 0颗粒度sJS.load('id '，'您的颗粒的路径。数据')；}4 .风格

#粒子{位置：绝对值；宽度： 100%;高度： 100%;背景色： # b 61924背景-重复：不重复；背景尺寸：封面；背景-位置： 50% 50%;}讲到这里会发现，还有一个最重要的点没讲出来，恩，就是粒子。射流研究…的引入。当你的使用范围比较小时，可以直接在当前某视频剪辑软件文件的脚本中引入，即

//vue文件从"粒子。js "导入粒子又或者你觉得这样不好管理，一定要放在主要的文件中也可以

//主文件从"粒子。js"Vue。使用(粒子)导入粒子最后呈现的效果如下

总结

以上所述是小编给大家介绍的射流研究…库中的粒子。射流研究…在某视频剪辑软件上的运用案例分析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！