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 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.applyCoulombsLaw();
t.applyHookesLaw(); t.applyHookesLaw();
t.attractToCentre(); t.attractToCentre();
@ -428,13 +438,15 @@ Layout.ForceDirected.prototype.start = function(interval, render, done)
if (typeof(render) !== 'undefined') { render(); } if (typeof(render) !== 'undefined') { render(); }
// stop simulation when energy of the system goes below a threshold // 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(); } if (typeof(done) !== 'undefined') { done(); }
} }
}, interval); else
{
requestAnimFrame(step);
}
});
}; };
// Find the nearest point to a particular position // 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 ctx = canvas.getContext("2d");
var layout = new Layout.ForceDirected(graph, stiffness, repulsion, damping); 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 // calculate bounding box of graph layout.. with ease-in
var currentBB = layout.getBoundingBox(); var currentBB = layout.getBoundingBox();
var targetBB = {bottomleft: new Vector(-2, -2), topright: new Vector(2, 2)}; var targetBB = {bottomleft: new Vector(-2, -2), topright: new Vector(2, 2)};
// auto adjusting bounding box // auto adjusting bounding box
setInterval(function(){ requestAnimFrame(function adjust(){
targetBB = layout.getBoundingBox(); targetBB = layout.getBoundingBox();
// current gets 20% closer to target every iteration // current gets 20% closer to target every iteration
currentBB = { currentBB = {
@ -53,7 +63,9 @@ jQuery.fn.springy = function(params) {
topright: currentBB.topright.add( targetBB.topright.subtract(currentBB.topright) topright: currentBB.topright.add( targetBB.topright.subtract(currentBB.topright)
.divide(10)) .divide(10))
}; };
}, 50);
requestAnimFrame(adjust);
});
// convert to/from screen coordinates // convert to/from screen coordinates
toScreen = function(p) { toScreen = function(p) {