前端菜鸟想做个类似这样的图,但是不知道从何入手,请问这个动画(我猜两个建筑之间的光点会随着时间慢慢往后移动)是用什么插件生成的呢,感谢大佬们🤣
1
xiaoxiaoming01 2023-03-14 16:07:16 +08:00 2
啊这
要优雅就用 canvas 画 粗暴点直接 div 糊就可以了 |
2
Rrrrrr 2023-03-14 16:22:37 +08:00 1
直接做成动画不香吗? lottie
|
3
CHTuring 2023-03-14 16:27:51 +08:00 1
其实不用想那么多,直接做 GIF
|
4
polarbearn 2023-03-14 16:31:33 +08:00 1
|
5
CHTuring 2023-03-14 16:33:42 +08:00 1
分解一下:
1. 左右两张图片可以共用一张 2. 用 css border 画一个圆,中间的光点相对定位,用 div overflow 遮照掉只保留上面的可是区域 3. 光点使用 css 动画配合 rotate 实现移动 用到的元素: 两个 div 用到的 css 属性: transform-origin: cernter transform: rotate(360deg) |
6
shuxhan 2023-03-14 16:45:18 +08:00
问 ui 要个 gif
|
7
rain0002009 2023-03-14 16:48:45 +08:00 1
让 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
tyrone2333 2023-03-14 16:51:07 +08:00 1
只做线条 gif 也就几十 k
|
9
xuqiccr OP |
10
xiaoxiaoming01 2023-03-14 20:58:18 +08:00 1
|
11
xuqiccr OP @xiaoxiaoming01 #10 太强了!
|
12
lizy0329 143 天前
AE 能够直接导出的,别自己做
|