added functional test that tests all of the transition easing functions

This commit is contained in:
Eric Rowell 2012-04-03 23:46:59 -07:00
parent 602220bdce
commit 2dff730081
4 changed files with 42 additions and 7 deletions

View File

@ -3164,6 +3164,7 @@ Kinetic.Tweens = {
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
'elastic-ease-in-out': function(t, b, c, d, a, p) {
// added s = 0
var s = 0;
if(t === 0) {
return b;
@ -3201,14 +3202,14 @@ Kinetic.Tweens = {
}
},
'bounce-ease-in': function(t, b, c, d) {
return c - Kinetic.Tweens.bounceEaseOut(d - t, 0, c, d) + b;
return c - Kinetic.Tweens['bounce-ease-out'](d - t, 0, c, d) + b;
},
'bounce-ease-in-out': function(t, b, c, d) {
if(t < d / 2) {
return Kinetic.Tweens.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
return Kinetic.Tweens['bounce-ease-in'](t * 2, 0, c, d) * 0.5 + b;
}
else {
return Kinetic.Tweens.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
return Kinetic.Tweens['bounce-ease-out'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
}
},
// duplicate

File diff suppressed because one or more lines are too long

View File

@ -355,6 +355,7 @@ Kinetic.Tweens = {
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
},
'elastic-ease-in-out': function(t, b, c, d, a, p) {
// added s = 0
var s = 0;
if(t === 0) {
return b;
@ -392,14 +393,14 @@ Kinetic.Tweens = {
}
},
'bounce-ease-in': function(t, b, c, d) {
return c - Kinetic.Tweens.bounceEaseOut(d - t, 0, c, d) + b;
return c - Kinetic.Tweens['bounce-ease-out'](d - t, 0, c, d) + b;
},
'bounce-ease-in-out': function(t, b, c, d) {
if(t < d / 2) {
return Kinetic.Tweens.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
return Kinetic.Tweens['bounce-ease-in'](t * 2, 0, c, d) * 0.5 + b;
}
else {
return Kinetic.Tweens.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
return Kinetic.Tweens['bounce-ease-out'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
}
},
// duplicate

View File

@ -27,6 +27,39 @@ Test.prototype.tests = {
easing: 'bounce-ease-out'
});
},
'TRANSITION - all transition types': function(containerId) {
document.getElementById(containerId).style.height = '300px';
var stage = new Kinetic.Stage({
container: containerId,
width: 578,
height: 300
});
var layer = new Kinetic.Layer();
var easings = ['linear', 'ease-in', 'ease-out', 'ease-in-out', 'back-ease-in', 'back-ease-out', 'back-ease-in-out', 'elastic-ease-in', 'elastic-ease-out', 'elastic-ease-in-out', 'bounce-ease-out', 'bounce-ease-in', 'bounce-ease-in-out', 'strong-ease-in', 'strong-ease-out', 'strong-ease-in-out'];
for(var n = 0; n < easings.length; n++) {
var rect = new Kinetic.Rect({
x: 10,
y: 10 + (n * 200 / easings.length),
width: 100,
height: 10,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
layer.add(rect);
rect.transitionTo({
duration: 2,
width: 500,
easing: easings[n]
});
}
stage.add(layer);
},
'TRANSITION - transition callback': function(containerId) {
var stage = new Kinetic.Stage({
container: containerId,