lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 19:07:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

optimized animation code

Browse Source
This commit is contained in:
Eric Rowell
2013-01-07 19:36:12 -08:00
parent ae103710d3
commit 590889f898
2 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/Animation.js
View File

@@ -40,8 +40,7 @@
stop: function() { stop: function() {
Kinetic.Animation._removeAnimation(this); Kinetic.Animation._removeAnimation(this);
}, },
_updateFrameObject: function() { _updateFrameObject: function(time) {
var time = new Date().getTime();
this.frame.timeDiff = time - this.frame.lastTime; this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time; this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff; this.frame.time += this.frame.timeDiff;
@@ -72,7 +71,7 @@
}; };
Kinetic.Animation._runFrames = function() { Kinetic.Animation._runFrames = function() {
var nodes = {}; var nodes = {}, animations = this.animations, len = animations.length;
/* /*
* loop through all animations and execute animation * loop through all animations and execute animation
* function. if the animation object has specified node, * function. if the animation object has specified node,
@@ -80,15 +79,15 @@
* drawing the same node multiple times. The node property * drawing the same node multiple times. The node property
* can be the stage itself or a layer * can be the stage itself or a layer
*/ */
for(var n = 0; n < this.animations.length; n++) { for(var n = 0; n < len; n++) {
var anim = this.animations[n]; var anim = animations[n], node = anim.node, func = anim.func;
anim._updateFrameObject(); anim._updateFrameObject(new Date().getTime());
if(anim.node && anim.node._id !== undefined) { if(node && node._id !== undefined) {
nodes[anim.node._id] = anim.node; nodes[node._id] = node;
} }
// if animation object has a function, execute it // if animation object has a function, execute it
if(anim.func) { if(func) {
anim.func(anim.frame); func(anim.frame);
} }
} }
@@ -97,9 +96,9 @@
} }
}; };
Kinetic.Animation._animationLoop = function() { Kinetic.Animation._animationLoop = function() {
var that = this;
if(this.animations.length > 0) { if(this.animations.length > 0) {
this._runFrames(); this._runFrames();
var that = this;
Kinetic.Animation.requestAnimFrame(function() { Kinetic.Animation.requestAnimFrame(function() {
that._animationLoop(); that._animationLoop();
}); });
@@ -115,9 +114,11 @@
that._animationLoop(); that._animationLoop();
} }
}; };
Kinetic.Animation.requestAnimFrame = function(callback) { RAF = (function() {
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || Kinetic.Animation.fixedRequestAnimFrame; return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || Kinetic.Animation.fixedRequestAnimFrame;
})();
raf(callback); Kinetic.Animation.requestAnimFrame = function(callback) {
RAF(callback);
}; };
})(); })();

6
tests/js/manualTests.js
View File

@@ -142,7 +142,7 @@ Test.Modules.MANUAL = {
stage.add(layer); stage.add(layer);
}, },
'ANIMATION - start and stop animation': function(containerId) { '*ANIMATION - start and stop animation': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@@ -174,7 +174,7 @@ Test.Modules.MANUAL = {
anim.start(); anim.start();
setTimeout(function() { setTimeout(function() {
anim.stop(); //anim.stop();
}, 3000); }, 3000);
}, },
'ANIMATION - test multiple animations': function(containerId) { 'ANIMATION - test multiple animations': function(containerId) {
@@ -774,7 +774,7 @@ Test.Modules.MANUAL = {
layer.add(redCircle); layer.add(redCircle);
stage.add(layer); stage.add(layer);
}, },
'*DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) { 'DRAG AND DROP - drag and drop elastic star with shadow': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,