V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
super996
V2EX  ›  前端开发

前端如何实现这种类似手机充电的动画组件

  •  
  •   super996 · 167 天前 · 1032 次点击
    这是一个创建于 167 天前的主题,其中的信息可能已经有所发展或是发生改变。
    链接: https://dribbble.com/shots/4787532-Autonomous-driving-button-for-HMI
    用 WebGL 、three 、canvas 之类的,有了解这块的大佬吗
    8 条回复    2024-05-27 17:05:36 +08:00
    learnshare
        1
    learnshare  
       167 天前
    LancerComet
        2
    LancerComet  
       167 天前
    拍脑袋说的话就是画一些伪随机变换的圈的路径,叠加的部分按照线性减淡的方式处理,可以在 three 里做,需要会一点 shader ,但这种东西在商业产品里一般都是提前做好的 assets
    xiaocsl
        3
    xiaocsl  
       167 天前
    感觉直接用 AE 又省事又快,素材一大堆,直接导出成视频文件体积也不大.
    super996
        4
    super996  
    OP
       167 天前
    @xiaocsl 要根据条件改变颜色,准备多个视频/gif 文件不好吧
    super996
        5
    super996  
    OP
       167 天前
    @LancerComet 大佬接私活吗
    LancerComet
        6
    LancerComet  
       167 天前
    @super996 不接私活因为没时间,我写了一个简单的随便玩一下,效果和原图大体类似但不一样,自己想慢慢调的话把生成 path 里的正余弦改掉就行,另外 blend mode 的线性减淡是遍历像素的方式做的,总之能用,动画效果直接打开 html 就能看到了 https://github.com/LancerComet/graphics-related-search/tree/master/holo-effect-implement
    super996
        7
    super996  
    OP
       166 天前
    @LancerComet 万分感谢!!
    ceilingyear
        8
    ceilingyear  
       165 天前
    @LancerComet 大佬牛逼,怎么学习的啊
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2825 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 11:22 · PVG 19:22 · LAX 03:22 · JFK 06:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.