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

[super996]

链接： https://dribbble.com/shots/4787532-Autonomous-driving-button-for-HMI
用 WebGL 、three 、canvas 之类的，有了解这块的大佬吗

[learnshare]

/t/1029311

[LancerComet]

拍脑袋说的话就是画一些伪随机变换的圈的路径，叠加的部分按照线性减淡的方式处理，可以在 three 里做，需要会一点 shader ，但这种东西在商业产品里一般都是提前做好的 assets

[xiaocsl]

感觉直接用 AE 又省事又快,素材一大堆,直接导出成视频文件体积也不大.

[super996]

@xiaocsl 要根据条件改变颜色，准备多个视频/gif 文件不好吧

[super996]

@LancerComet 大佬接私活吗

[LancerComet]

@super996 不接私活因为没时间，我写了一个简单的随便玩一下，效果和原图大体类似但不一样，自己想慢慢调的话把生成 path 里的正余弦改掉就行，另外 blend mode 的线性减淡是遍历像素的方式做的，总之能用，动画效果直接打开 html 就能看到了 https://github.com/LancerComet/graphics-related-search/tree/master/holo-effect-implement

[super996]

@LancerComet 万分感谢！！

[ceilingyear]

@LancerComet 大佬牛逼，怎么学习的啊