gpt4 book ai didi

javascript - 在 D3 库中为曲线制作动画的最少资源方式

转载 作者:行者123 更新时间:2023-11-29 18:23:47 24 4
gpt4 key购买 nike

D3有没有内置动画绘制曲线的方法?
我的项目中需要很多动画曲线。我试过 Jason Davies 的解决方案 link to example , link to js file ,它工作正常,但即使是 Chrome 浏览器也开始在一次 30 多条动画曲线后开始滞后。
在我的例子中,每条曲线都有自己的坐标,所以浏览器应该处理所有它们的路径,我理解这一点,但 Jason 的解决方案在每次迭代时重新计算所有路径,据我所知,这样做是为了能够通过灰色动态改变路径点。
我是 d3 库的新手,所以我无法意识到,是否可以一次计算所有路径,然后简单地绘制从 0% 到 100% 的动画曲线?或者一切都更容易,并且有简单的方法吗?

最佳答案

使用 d3.js 制作贝塞尔曲线动画的一种廉价且简单的方法是转换 stroke-dasharray 属性。这个想法是以整条线作为一个空隙开始,并以一条线作为一个破折号结束。

有关此想法的简单实现,请参阅此 jsfiddle:http://jsfiddle.net/nj37gkgq/

关于javascript - 在 D3 库中为曲线制作动画的最少资源方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15692028/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com