发现个酷炫的动效用 webgl 写的,想知道这个雾化的轨迹计算是啥?

2019-11-22 14:03:27 +08:00
 Alander

今天发现个网站: https://www.coloros.com/topic/coloros7.html

这个网站的“专属艺术名片”页面,随着鼠标移动有雾化的彩色跟随

想知道这个是如何计算轨迹的?

有人能给出个大致方向吗?

4296 次点击
所在节点    程序员
28 条回复
meteor957
2019-11-22 14:28:51 +08:00
这动画确实挺秀
Rhonin
2019-11-22 14:29:11 +08:00
这就是个 canvas 吧,mousemove 事件?
mengkun
2019-11-22 14:43:07 +08:00
用的是这个开源组件: https://github.com/PavelDoGreat/WebGL-Fluid-Simulation

----------
题外话,coloros 这个页面感觉是实习生写的。这一连串的函数……无力吐槽
https://i.loli.net/2019/11/22/Ia41eto5GnZFJCh.png
Alander
2019-11-22 14:48:49 +08:00
@mengkun 哈哈哈哈哈,十分感谢帮我找到这个组件,可是你是如何找到这个组件的呢?
Alander
2019-11-22 14:49:19 +08:00
@Rhonin 是的,确实是监听 mousemove 事件,只是好奇这个雾化的怎么做的
JerryCha
2019-11-22 14:49:39 +08:00
@mengkun j...jQuery ?????
我还以为国内早就已经全面 ARV 化了。
Alander
2019-11-22 14:52:14 +08:00
@JerryCha 哈哈哈哈哈,在做这种小应用的时候,原生 + JQuery 可能更加快速能够出页面
mengkun
2019-11-22 14:54:36 +08:00
@Alander 因为昨天晚上我也在思考和你这同样的问题……然后就研究了一下这个页面的源代码,然后就在 Github 上给找到了……
meteor957
2019-11-22 14:55:47 +08:00
@mengkun 请问老哥 截图中看代码用的啥插件啊,可以格式化混淆后的 js 吗
Alander
2019-11-22 14:56:25 +08:00
@mengkun 哈哈哈哈哈哈,看来大家都比较好奇呀
Alander
2019-11-22 15:01:08 +08:00
@meteor957 格式化的话本身 chrome 的 devtools 就可以啊
mengkun
2019-11-22 15:02:18 +08:00
@meteor957 插件是 iFormatTool,作者 @MaiCong
格式化功能只能简单的排下版
lvA
2019-11-22 15:04:24 +08:00
是我机子垃圾吗有点卡啊
coloz
2019-11-22 15:07:09 +08:00
@lvA 1050ti 的笔记本表示,加载的时候卡
Alander
2019-11-22 15:08:03 +08:00
@coloz
@lvA
我公司辣鸡台式机感觉都很流畅啊,不知道啥情况
yejinmo
2019-11-22 15:18:38 +08:00
有没有有闲心的大佬提取下这个效果做 Wallpaper Engine 的壁纸啊。。
Atukey
2019-11-22 15:52:29 +08:00
@yejinmo 好主意~
yejinmo
2019-11-22 15:57:30 +08:00
@Atukey #17

js 被压缩混淆了。。看的头疼
Jiajin
2019-11-22 16:18:31 +08:00
这动画效果是挺帅的
yangheng4922
2019-11-22 16:20:52 +08:00
@yejinmo 已经有了 网页的 我之前用过

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/622112

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX