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

more Tween polishing

Browse Source
This commit is contained in:
Eric Rowell
2013-05-11 23:57:14 -07:00
parent 09c2a461c7
commit f9277b8fec
2 changed files with 18 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/Tween.js
View File

@@ -2,7 +2,7 @@
var blacklist = { var blacklist = {
node: 1, node: 1,
duration: 1, duration: 1,
ease: 1, easing: 1,
onFinish: 1, onFinish: 1,
yoyo: 1 yoyo: 1
}, },
@@ -11,11 +11,11 @@
PLAYING = 2, PLAYING = 2,
REVERSING = 3; REVERSING = 3;
function createTween(node, key, ease, end, duration, yoyo) { function createTween(node, key, easing, end, duration, yoyo) {
var method = 'set' + Kinetic.Util._capitalize(key); var method = 'set' + Kinetic.Util._capitalize(key);
return new Tween(key, function(i) { return new Tween(key, function(i) {
node[method](i); node[method](i);
}, ease, node['get' + Kinetic.Util._capitalize(key)](), end, duration * 1000, yoyo); }, easing, node['get' + Kinetic.Util._capitalize(key)](), end, duration * 1000, yoyo);
} }
Kinetic.Tween = function(config) { Kinetic.Tween = function(config) {
@@ -23,7 +23,7 @@
node = config.node, node = config.node,
nodeId = node._id, nodeId = node._id,
duration = config.duration || 1, duration = config.duration || 1,
ease = config.ease || Kinetic.Ease.Linear, easing = config.easing || Kinetic.Easings.Linear,
yoyo = !!config.yoyo, yoyo = !!config.yoyo,
key, tween; key, tween;
@@ -38,7 +38,7 @@
for (key in config) { for (key in config) {
if (blacklist[key] === undefined) { if (blacklist[key] === undefined) {
tween = createTween(node, key, ease, config[key], duration, yoyo); tween = createTween(node, key, easing, config[key], duration, yoyo);
this.tweens.push(tween); this.tweens.push(tween);
this._addListeners(tween); this._addListeners(tween);
Kinetic.Tween.add(nodeId, key, this); Kinetic.Tween.add(nodeId, key, this);
@@ -108,11 +108,13 @@
this._iterate(function(tween) { this._iterate(function(tween) {
tween.reset(); tween.reset();
}); });
this.node.getLayer().draw();
}, },
seek: function(t) { seek: function(t) {
this._iterate(function(tween) { this._iterate(function(tween) {
tween.seek(t * 1000); tween.seek(t * 1000);
}); });
this.node.getLayer().draw();
}, },
pause: function() { pause: function() {
this._iterate(function(tween) { this._iterate(function(tween) {
@@ -123,6 +125,7 @@
this._iterate(function(tween) { this._iterate(function(tween) {
tween.finish(); tween.finish();
}); });
this.node.getLayer().draw();
}, },
onEnterFrame: function() { onEnterFrame: function() {
this._iterate(function(tween) { this._iterate(function(tween) {
@@ -133,11 +136,9 @@
}, },
_removeTween: function(prop) { _removeTween: function(prop) {
console.log('remove ' + prop)
var that = this; var that = this;
this._iterate(function(tween, n) { this._iterate(function(tween, n) {
if (tween.prop === prop) { if (tween.prop === prop) {
console.log('removed')
that.tweens.splice(n, 1); that.tweens.splice(n, 1);
} }
}); });
@@ -265,7 +266,7 @@
* These eases were ported from an Adobe Flash tweening library to JavaScript * These eases were ported from an Adobe Flash tweening library to JavaScript
* by Xaric * by Xaric
*/ */
Kinetic.Eases = { Kinetic.Easings = {
'BackEaseIn': function(t, b, c, d, a, p) { 'BackEaseIn': function(t, b, c, d, a, p) {
var s = 1.70158; var s = 1.70158;
return c * (t /= d) * t * ((s + 1) * t - s) + b; return c * (t /= d) * t * ((s + 1) * t - s) + b;
@@ -362,14 +363,14 @@
} }
}, },
'BounceEaseIn': function(t, b, c, d) { 'BounceEaseIn': function(t, b, c, d) {
return c - Kinetic.Ease['bounce-ease-out'](d - t, 0, c, d) + b; return c - Kinetic.Easings.BounceEaseOut(d - t, 0, c, d) + b;
}, },
'BounceEaseInOut': function(t, b, c, d) { 'BounceEaseInOut': function(t, b, c, d) {
if(t < d / 2) { if(t < d / 2) {
return Kinetic.Ease['bounce-ease-in'](t * 2, 0, c, d) * 0.5 + b; return Kinetic.Easings.BounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
} }
else { else {
return Kinetic.Ease['bounce-ease-out'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; return Kinetic.Easings.BounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
} }
}, },
'EaseIn': function(t, b, c, d) { 'EaseIn': function(t, b, c, d) {
@@ -390,7 +391,7 @@
'StrongEaseOut': function(t, b, c, d) { 'StrongEaseOut': function(t, b, c, d) {
return c * (( t = t / d - 1) * t * t * t * t + 1) + b; return c * (( t = t / d - 1) * t * t * t * t + 1) + b;
}, },
'StrongEaseIn': function(t, b, c, d) { 'StrongEaseInOut': function(t, b, c, d) {
if((t /= d / 2) < 1) { if((t /= d / 2) < 1) {
return c / 2 * t * t * t * t * t + b; return c / 2 * t * t * t * t * t + b;
} }

10
tests/js/manualTests.js
View File

@@ -148,7 +148,7 @@ Test.Modules.TRANSITION = {
scaleX: 1.5, scaleX: 1.5,
scaleY: 1.5, scaleY: 1.5,
duration: 1, duration: 1,
ease: Kinetic.Eases.EaseIn easing: Kinetic.Easings.EaseIn
}); });
blueBox.tween = new Kinetic.Tween({ blueBox.tween = new Kinetic.Tween({
@@ -156,7 +156,7 @@ Test.Modules.TRANSITION = {
scaleX: 1.5, scaleX: 1.5,
scaleY: 1.5, scaleY: 1.5,
duration: 1, duration: 1,
ease: Kinetic.Eases.EaseOut easing: Kinetic.Easings.EaseOut
}); });
redBox.tween = new Kinetic.Tween({ redBox.tween = new Kinetic.Tween({
@@ -164,7 +164,7 @@ Test.Modules.TRANSITION = {
scaleX: 1.5, scaleX: 1.5,
scaleY: 1.5, scaleY: 1.5,
duration: 1, duration: 1,
ease: Kinetic.Eases.EaseInOut easing: Kinetic.Easings.EaseInOut
}); });
layer.on("mouseover", function(evt) { layer.on("mouseover", function(evt) {
@@ -204,7 +204,7 @@ Test.Modules.TRANSITION = {
x: 400, x: 400,
scaleX: 2, scaleX: 2,
scaleY: 2, scaleY: 2,
ease: Kinetic.Eases.BounceEaseOut, easing: Kinetic.Easings.BounceEaseOut,
yoyo: false, yoyo: false,
onFinish: function() { onFinish: function() {
console.log('finished!') console.log('finished!')
@@ -218,7 +218,7 @@ Test.Modules.TRANSITION = {
node: greenBox, node: greenBox,
duration: 2, duration: 2,
x: 200, x: 200,
ease: Kinetic.Eases.BounceEaseOut, easing: Kinetic.Easings.BounceEaseOut,
}); });
tween2.play(); tween2.play();