Vis.js节点上的动画牛眼



我正在使用Vis.js绘制网络图。我希望能够有一个通知功能,当收到特定节点的AJAX更新时,画布会将该节点移动到中心(Vis.js已经可以做到这一点),然后在该节点上设置某种类型的牛眼动画,以吸引用户的注意,直到他们单击该节点。我想要的最接近动画效果的例子是http://codepen.io/MateiGCopot/pen/ogEKRK

var w = c.width = 400,
h = c.height = 400,
ctx = c.getContext('2d'),
frame = 0;
function anim(){
  window.requestAnimationFrame(anim);
  ++frame;
  for(var i = 0; i < w; ++i){
    ctx.strokeStyle = i%20 === 0 ? 'hsl(hue, 80%, 50%)'.replace('hue',
        (360 / (w/3) * i - frame) % 360
    ) : 'rgba(0, 0, 0, .08)';
    ctx.beginPath();
    ctx.arc(w/2, h/2, (i + frame)%w/2, 0, Math.PI*2);
    ctx.stroke();
    ctx.closePath();
  }
}
anim();

这是达到这种效果的最佳方式吗?在我的机器上运行它会使CPU使用率飙升,所以它似乎没有那么高效
此外,我如何将这样的东西与Vis.js集成,使其绘制在图像节点上,并在单击该节点时停止?这个特殊的例子把圆圈向外画,但我希望它们向内画,但不知道如何改变方向。

JavaScript不是我的强项,所以解释得越详细越好。此外,我并没有特别绑定到Vis.js,所以如果有另一个库已经具有此功能(以及类似的Vis.js功能),我可以切换。

我是visjs网络视图的开发人员。这在公共API中是不可能的。我们正在开发一个4.0版本,它将允许您轻松地在renderloop中注入自己的代码。如果你需要它(我们预计4月左右会有4.0版本),请在我们的GitHub页面上发布一个问题,我可以帮助你自己将其插入源代码中。我们希望将所有问题都保存在GitHub上,这样人们就更容易找到答案。

编辑:此外,您当然可以只更改颜色和/或使用聚焦功能来聚焦节点。但这不是你的问题。一种解决方法是在节点顶部覆盖一个div,文档可以有一个带有动画的gif和一个点击处理程序。您可以使用vis API获取所述节点的位置。

最新更新