首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Vis.js节点上的动画牛眼

Vis.js节点上的动画牛眼
EN

Stack Overflow用户
提问于 2015-02-22 15:00:52
回答 1查看 1.5K关注 0票数 2

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

代码语言:javascript
复制
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特性),我也可以切换。

EN

回答 1

Stack Overflow用户

发布于 2015-03-03 17:13:05

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

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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/28655385

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档