lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-09-19 02:37:59 +08:00
Code Issues Actions 2 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

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() {