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

2019-12-11 12:12:16 +08:00
 Colorful

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

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

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

3933 次点击
所在节点    前端开发
10 条回复
shenyu1996
2019-12-11 12:23:25 +08:00
看了下引入的 js
是这个 https://anseki.github.io/leader-line/
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
@Idealyouth 是的
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

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/627938

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX