前端菜鸟请教一个插件问题～

[xuqiccr]

前端菜鸟想做个类似这样的图，但是不知道从何入手，请问这个动画（我猜两个建筑之间的光点会随着时间慢慢往后移动）是用什么插件生成的呢，感谢大佬们🤣

[xiaoxiaoming01]

啊这

要优雅就用 canvas 画

粗暴点直接 div 糊就可以了

[Rrrrrr]

直接做成动画不香吗？ lottie

[CHTuring]

其实不用想那么多，直接做 GIF

[polarbearn]

animejs
animejs.com
或者
gsap
github.com/greensock/GSAP

[CHTuring]

分解一下：
1. 左右两张图片可以共用一张
2. 用 css border 画一个圆，中间的光点相对定位，用 div overflow 遮照掉只保留上面的可是区域
3. 光点使用 css 动画配合 rotate 实现移动

用到的元素：
两个 div

用到的 css 属性：
transform-origin: cernter
transform: rotate(360deg)

[shuxhan]

问 ui 要个 gif

[rain0002009]

让 UI 把曲线搞个 svg
然后 找个支持 svg 路径动画的插件
animejs
https://animejs.com/documentation/#motionPath
或者 gsap
https://svg-animation-booklet.vercel.app/chapter6.html#%E5%8A%A8%E8%B5%B7%E6%9D%A5

[tyrone2333]

只做线条 gif 也就几十 k

[xuqiccr]

@shuxhan #6
@rain0002009 #7 哈哈哈内部平台，没有 UI 参与呜呜呜

[xiaoxiaoming01]

这里给个方向

https://codesandbox.io/s/priceless-bohr-gj0wvx?file=/src/App.js

[xuqiccr]

@xiaoxiaoming01 #10 太强了！

[lizy0329]

AE 能够直接导出的，别自己做