mirror of
https://github.com/konvajs/konva.git
synced 2025-09-19 19:07:59 +08:00
more Tween polishing
This commit is contained in:
25
src/Tween.js
25
src/Tween.js
@@ -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;
|
||||||
}
|
}
|
||||||
|
@@ -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();
|
||||||
|
Reference in New Issue
Block a user