前端菜鸟想做个类似这样的图，但是不知道从何入手，请问这个动画（我猜两个建筑之间的光点会随着时间慢慢往后移动）是用什么插件生成的呢，感谢大佬们🤣
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
This topic created in 1342 days ago, the information mentioned may be changed or developed.
 |
1
啊这
要优雅就用 canvas 画 粗暴点直接 div 糊就可以了 |
2 |
2
直接做成动画不香吗？ lottie
|
 |
3
其实不用想那么多，直接做 GIF
|
 |
4
|
|
5
分解一下：
1. 左右两张图片可以共用一张 2. 用 css border 画一个圆，中间的光点相对定位，用 div overflow 遮照掉只保留上面的可是区域 3. 光点使用 css 动画配合 rotate 实现移动 用到的元素： 两个 div 用到的 css 属性： transform-origin: cernter transform: rotate(360deg) |
 |
QUC062IzY3M1Y6dgMar 14, 2023
6
问 ui 要个 gif
|
 |
7
让 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 |
 |
8
只做线条 gif 也就几十 k
|
 |
9
|
|
10
|
|
11
@xiaoxiaoming01 #10 太强了！
|
 |
lizy0329Aug 2, 2024
12
AE 能够直接导出的，别自己做
|
Select Language