我正在使用 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 功能),我可以切换。