lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-11-18 17:21:36 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

each animation now has its own frame object. This fixes issues that were seen when using multiple animations simultaneously

Browse Source
This commit is contained in:
Eric Rowell
2012-12-11 22:34:58 -08:00
parent 16f81f6204
commit 3fb9576672
2 changed files with 79 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/Animation.js
View File

@@ -12,6 +12,11 @@
this.func = func;
this.node = node;
this.id = Kinetic.Animation.animIdCounter++;
this.frame = {
time: 0,
timeDiff: 0,
lastTime: new Date().getTime()
};
};
/*
* Animation methods
@@ -24,6 +29,8 @@
*/
start: function() {
this.stop();
this.frame.timeDiff = 0;
this.frame.lastTime = new Date().getTime();
Kinetic.Animation._addAnimation(this);
Kinetic.Animation._handleAnimation();
},
@@ -34,17 +41,18 @@
*/
stop: function() {
Kinetic.Animation._removeAnimation(this);
},
_updateFrameObject: function() {
var time = new Date().getTime();
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
this.frame.frameRate = 1000 / this.frame.timeDiff;
}
};
Kinetic.Animation.animations = [];
Kinetic.Animation.animIdCounter = 0;
Kinetic.Animation.animRunning = false;
Kinetic.Animation.frame = {
time: 0,
timeDiff: 0,
lastTime: new Date().getTime(),
frameRate: 0
};
Kinetic.Animation.fixedRequestAnimFrame = function(callback) {
window.setTimeout(callback, 1000 / 60);
@@ -63,15 +71,8 @@
}
}
};
Kinetic.Animation._updateFrameObject = function() {
var time = new Date().getTime();
this.frame.timeDiff = time - this.frame.lastTime;
this.frame.lastTime = time;
this.frame.time += this.frame.timeDiff;
this.frame.frameRate = 1000 / this.frame.timeDiff;
};
Kinetic.Animation._runFrames = function() {
this._updateFrameObject();
var nodes = {};
/*
* loop through all animations and execute animation
@@ -82,12 +83,13 @@
*/
for(var n = 0; n < this.animations.length; n++) {
var anim = this.animations[n];
anim._updateFrameObject();
if(anim.node && anim.node._id !== undefined) {
nodes[anim.node._id] = anim.node;
}
// if animation object has a function, execute it
if(anim.func) {
anim.func(this.frame);
anim.func(anim.frame);
}
}

62
tests/js/manualTests.js
View File

@@ -177,6 +177,68 @@ Test.Modules.MANUAL = {
anim.stop();
}, 3000);
},
'*ANIMATION - test multiple animations': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var greenRect = new Kinetic.Rect({
x: 200,
y: 20,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4
});
var blueRect = new Kinetic.Rect({
x: 200,
y: 100,
width: 100,
height: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
layer.add(greenRect);
layer.add(blueRect);
stage.add(layer);
var amplitude = 150;
var period = 1000;
// in ms
var centerX = stage.getWidth() / 2 - 100 / 2;
var greenAnim = new Kinetic.Animation(function(frame) {
greenRect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
}, layer);
var blueAnim = new Kinetic.Animation(function(frame) {
blueRect.setX(amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX);
}, layer);
greenAnim.start();
setTimeout(function() {
blueAnim.start();
}, 1000);
setTimeout(function() {
greenAnim.stop();
}, 2000);
setTimeout(function() {
blueAnim.stop();
}, 3000);
setTimeout(function() {
greenAnim.start();
}, 4000);
setTimeout(function() {
greenAnim.stop();
}, 5000);
},
'TRANSITION - ease-in, ease-out, ease-in-out hovers': function(containerId) {
function addHovers(shape, easing) {
shape.on("mouseover", function() {