• 请不要在回答技术问题时复制粘贴 AI 生成的内容
Alander
V2EX  ›  程序员

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

  •  
  •   Alander · Nov 22, 2019 · 5627 views
    This topic created in 2542 days ago, the information mentioned may be changed or developed.

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

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

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

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

    28 replies  •  2019-11-23 03:43:42 +08:00
    meteor957
    meteor957
    Nov 22, 2019
    1
    这动画确实挺秀
    Rhonin
    Rhonin
    Nov 22, 2019
    2
    这就是个 canvas 吧,mousemove 事件?
    mengkun
    mengkun
    Nov 22, 2019❤️5
    3
    用的是这个开源组件: https://github.com/PavelDoGreat/WebGL-Fluid-Simulation

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

    js 被压缩混淆了。。看的头疼
    Jiajin
    Jiajin
    Nov 22, 2019
    19
    这动画效果是挺帅的
    yangheng4922
    yangheng4922
    Nov 22, 2019
    20
    @yejinmo 已经有了 网页的 我之前用过
    wednesdayco
    wednesdayco
    Nov 22, 2019
    21
    我记得是 nvdia 出的源码
    hyy1995
    hyy1995
    Nov 22, 2019
    23
    挺酷
    secondwtq
    secondwtq
    Nov 22, 2019
    24
    推荐 https://www.shadertoy.com/
    显卡不好慎开
    realpg
    realpg
    Nov 22, 2019
    25
    以前还没有前端这个词的时候
    搞博客就喜欢搞这些没用的跟随鼠标特效

    现在这只是浏览器 API 多了 更酷炫一点
    Les1ie
    Les1ie
    Nov 22, 2019
    26
    @yangheng4922 #22 少侠好功夫
    secondwtq
    secondwtq
    Nov 22, 2019
    27
    @realpg 博客上面搞确实没用 ...
    这个用来宣传产品比放博客上稍微强那么一点点吧
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1736 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 62ms · UTC 12:37 · PVG 20:37 · LAX 04:37 · JFK 07:37
    ♥ Do have faith in what you're doing.