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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1807 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

10 条回复 • 2019-12-14 14:34:55 +08:00

shenyu1996

2019-12-11 12:23:25 +08:00

Colorful

2019-12-11 14:12:32 +08:00

@shenyu1996 我先看看，太感谢了

Idealyouth

2019-12-11 15:09:02 +08:00

好像是基于 svg 的

Colorful

2019-12-11 16:05:21 +08:00

rioshikelong121

2019-12-11 17:33:15 +08:00

这种东西怎么基于 canvas 啊。性能肯定比较差吧。乱猜一下，得把 A,B 连接点之间的矩形全部使用 canvas 绘制？

Colorful

2019-12-11 17:43:56 +08:00

@rioshikelong121 我不清楚，看了一些组件，大部分都是用的 SVG

zoikhemlab

2019-12-12 13:29:16 +08:00

大哥~那是右。

Colorful

2019-12-12 14:04:13 +08:00

@zoikhemlab 我靠，居然是右，我一直以为是左了，经常左右，傻傻分不清

iamgqb

2019-12-14 14:33:06 +08:00

看上去就两坐标间贝塞尔一下

iamgqb

2019-12-14 14:34:55 +08:00

svg 本身就支持贝塞尔曲线，所以还是比较简单的 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/d