V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
selfcreditgiving
V2EX  ›  问与答

这个动效怎么实现的呢?

  •  
  •   selfcreditgiving · 2020-05-31 20:30:06 +08:00 · 1313 次点击
    这是一个创建于 1397 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://www.youtube.com/watch?v=isZhC5YpzDM&feature=youtu.be

    视频可能看不是很清楚,可以去这个网站看看 http://topology.le5le.com/

    看都这个彗星流向效果的动画,自己尝试了一下没有做出来,有谁知道这个用前端的技术( svg 、canvas 、keyframe 等)应该怎么实现呢。

    流动的红线在转弯的时候,不是直接 rotate 90deg, 我猜想是一个个的圆连成的一条,用到了一个渐变色,但是自己没试出来。

    3 条回复    2020-05-31 23:34:48 +08:00
    selfcreditgiving
        1
    selfcreditgiving  
    OP
       2020-05-31 20:33:30 +08:00
    好像不能插入视频啊
    delectate
        2
    delectate  
       2020-05-31 23:19:50 +08:00
    svg 可以。google 一艘就有: https://css-tricks.com/svg-line-animation-works/
    selfcreditgiving
        3
    selfcreditgiving  
    OP
       2020-05-31 23:34:48 +08:00
    @delectate #2 多谢回复。单是画线( path )这个我倒是知道的,这个动效里,会运动的那个东西其实比路径的线要宽一点,可能录屏看的不太清晰,还有一个彗星彗尾的效果(头部颜色深,尾部浅),可能需要叠加两条一粗一细两条线吧,可是类似彗星的效果还没什么思路。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3152 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 12:40 · PVG 20:40 · LAX 05:40 · JFK 08:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.