V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xuqiccr
V2EX  ›  程序员

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

  •  
  •   xuqiccr · 2023-03-14 15:57:20 +08:00 · 1159 次点击
    这是一个创建于 442 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    11 条回复    2023-03-15 08:50:37 +08:00
    xiaoxiaoming01
        1
    xiaoxiaoming01  
       2023-03-14 16:07:16 +08:00   ❤️ 2
    啊这

    要优雅就用 canvas 画

    粗暴点直接 div 糊就可以了
    Rrrrrr
        2
    Rrrrrr  
       2023-03-14 16:22:37 +08:00   ❤️ 1
    直接做成动画不香吗? lottie
    CHTuring
        3
    CHTuring  
       2023-03-14 16:27:51 +08:00   ❤️ 1
    其实不用想那么多,直接做 GIF
    polarbearn
        4
    polarbearn  
       2023-03-14 16:31:33 +08:00   ❤️ 1
    CHTuring
        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)
    shuxhan
        6
    shuxhan  
       2023-03-14 16:45:18 +08:00
    问 ui 要个 gif
    rain0002009
        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
    tyrone2333
        8
    tyrone2333  
       2023-03-14 16:51:07 +08:00   ❤️ 1
    只做线条 gif 也就几十 k
    xuqiccr
        9
    xuqiccr  
    OP
       2023-03-14 16:59:57 +08:00
    @shuxhan #6
    @rain0002009 #7 哈哈哈内部平台,没有 UI 参与呜呜呜
    xiaoxiaoming01
        10
    xiaoxiaoming01  
       2023-03-14 20:58:18 +08:00   ❤️ 1
    xuqiccr
        11
    xuqiccr  
    OP
       2023-03-15 08:50:37 +08:00
    @xiaoxiaoming01 #10 太强了!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4951 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 03:47 · PVG 11:47 · LAX 20:47 · JFK 23:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.