open.source/springy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Smoother animation using requestAnimFrame

Browse Source
This commit is contained in:
Dennis Hotson 2011-08-11 02:27:28 +10:00
parent 3662393702
commit 0aea9582ff
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
springy.js
View File

@ -418,7 +418,17 @@ Layout.ForceDirected.prototype.start = function(interval, render, done)
return; // already running
}
this.intervalId = setInterval(function() {
var requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, interval);
};
requestAnimFrame(function step() {
t.applyCoulombsLaw();
t.applyHookesLaw();
t.attractToCentre();
@ -428,13 +438,15 @@ Layout.ForceDirected.prototype.start = function(interval, render, done)
if (typeof(render) !== 'undefined') { render(); }
// stop simulation when energy of the system goes below a threshold
if (t.totalEnergy() < 0.1)
if (t.totalEnergy() < 0.01)
{
clearInterval(t.intervalId);
t.intervalId = null;
if (typeof(done) !== 'undefined') { done(); }
}
}, interval);
else
{
requestAnimFrame(step);
}
});
};
// Find the nearest point to a particular position

16
springyui.js
View File

@ -39,12 +39,22 @@ jQuery.fn.springy = function(params) {
var ctx = canvas.getContext("2d");
var layout = new Layout.ForceDirected(graph, stiffness, repulsion, damping);
var requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 10);
};
// calculate bounding box of graph layout.. with ease-in
var currentBB = layout.getBoundingBox();
var targetBB = {bottomleft: new Vector(-2, -2), topright: new Vector(2, 2)};
// auto adjusting bounding box
setInterval(function(){
requestAnimFrame(function adjust(){
targetBB = layout.getBoundingBox();
// current gets 20% closer to target every iteration
currentBB = {
@ -53,7 +63,9 @@ jQuery.fn.springy = function(params) {
topright: currentBB.topright.add( targetBB.topright.subtract(currentBB.topright)
.divide(10))
};
}, 50);
requestAnimFrame(adjust);
});
// convert to/from screen coordinates
toScreen = function(p) {