I am currently utilizing Vis.js to create network diagrams. I am interested in adding a notification feature where when an AJAX update is received for a specific node, the canvas will move that node to the center (which Vis.js can already do). Following this, I would like to have a bullseye animation over the node to attract the user's attention until they click on it. An example of the kind of animation effect I am seeking can be found at 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();
Would this method be the most effective way to achieve this type of effect? When running it on my machine, there seems to be a spike in CPU usage, indicating that it may not be very efficient.
Additionally, how could I integrate something like this with Vis.js so that it appears over an image node and stops once the node is clicked? The example provided draws circles outward, but I would prefer them to be drawn inwards, although I was unable to determine how to change their direction.
JavaScript is not my strong point, so a detailed explanation would be much appreciated. Also, while I am currently using Vis.js, if there is another library that offers similar functionality (along with comparable features to Vis.js), I am open to switching to it.