javascript - D3中的平滑递归转换
问题描述
我创建了一个简单的过渡,它在最后会回忆起自己。为什么它是生涩的,如何使它变得光滑?(这里是jsfiddle )
var circle = svg.append('circle')
.attr("r",10)
.attr("cx",10)
.attr("cy",10)
.style("fill","red");
go()
function go() {
var c=svg.select("circle");
c
.transition()
.duration(1000)
.attr("cx",1*c.attr("cx")+10)
.on("end",go);
}
解决方案
这是因为默认情况下,过渡缓动函数不是线性的,而是easeCubic。将缓动函数设置为线性可以解决问题:
function go() {
var c=svg.select("circle");
c
.transition()
.ease(d3.easeLinear) // <-- THIS WAS ADDED
.duration(1000)
.attr("cx",1*c.attr("cx")+100)
.on("end",go);
}
如果未指定缓动函数,则默认为 d3.easeCubic。
为什么会卡顿是因为在使用easeCubic时,对象开始缓慢移动并缓慢停止。您可以在此处可视化缓动效果:https ://easings.net/#easeInOutCubic
推荐阅读
- python - 如何使用日志记录模块将 Python 的单元测试模块错误回溯重定向到日志文件?
- curl - 如何通过使用 curl 脚本解析 AQL 来下载工件?
- visual-c++ - concurrency::parallel_for 似乎跳过了一些并行循环迭代
- c# - Powershell 无法加载其依赖项之一的文件或程序集。如果 dll 已构建并加载
- cognos - 由于复杂的 IS NULL OR 条件,Cognos 多事实拼接查询永远运行
- seo - 具有多个域站点地图条目的 Robots.txt
- python - Python ImportError:文件太短(NAOqi 框架)
- java - 从接口继承的 Delphi Android Java 类
- git - SmartGit 相当于 TortoiseHg 'Browse at Revision'
- json - 将 var 动态分配给 json