V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Colorful
V2EX  ›  前端开发

这种是 SVG 动效还是 canvas 动效?实现的思路是怎么样的?

  •  
  •   Colorful · 2019-12-11 12:12:16 +08:00 · 3888 次点击
    这是一个创建于 1793 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://magi.com/search?q=python

    鼠标经过左侧的时候,会有一个动效

    这种看着简单,但是感觉实现起来有点复杂

    10 条回复    2019-12-14 14:34:55 +08:00
    shenyu1996
        1
    shenyu1996  
       2019-12-11 12:23:25 +08:00
    看了下引入的 js
    是这个 https://anseki.github.io/leader-line/
    Colorful
        2
    Colorful  
    OP
       2019-12-11 14:12:32 +08:00
    @shenyu1996 我先看看,太感谢了
    Idealyouth
        3
    Idealyouth  
       2019-12-11 15:09:02 +08:00
    好像是基于 svg 的
    Colorful
        4
    Colorful  
    OP
       2019-12-11 16:05:21 +08:00
    @Idealyouth 是的
    rioshikelong121
        5
    rioshikelong121  
       2019-12-11 17:33:15 +08:00
    这种东西怎么基于 canvas 啊。 性能肯定比较差吧。乱猜一下, 得把 A,B 连接点之间的矩形全部使用 canvas 绘制?
    Colorful
        6
    Colorful  
    OP
       2019-12-11 17:43:56 +08:00
    @rioshikelong121 我不清楚,看了一些组件,大部分都是用的 SVG
    zoikhemlab
        7
    zoikhemlab  
       2019-12-12 13:29:16 +08:00
    大哥~那是右。
    Colorful
        8
    Colorful  
    OP
       2019-12-12 14:04:13 +08:00
    @zoikhemlab 我靠,居然是右,我一直以为是左了,经常左右,傻傻分不清
    iamgqb
        9
    iamgqb  
       2019-12-14 14:33:06 +08:00
    看上去就两坐标间贝塞尔一下
    iamgqb
        10
    iamgqb  
       2019-12-14 14:34:55 +08:00
    svg 本身就支持贝塞尔曲线,所以还是比较简单的 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3020 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 13:41 · PVG 21:41 · LAX 05:41 · JFK 08:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.