mirror of
https://github.com/konvajs/konva.git
synced 2025-06-27 16:56:38 +08:00
round 1 of animation + transition rewrite, while combing Xaric's Tween port
This commit is contained in:
Eric Rowell
parent
6ce9d5489c
commit
77aea95e7a
2
Thorfile
2
Thorfile
@ -6,7 +6,7 @@ class Build < Thor
|
||||
"license.js", "src/GlobalObject.js", "src/Node.js", "src/Container.js", "src/Stage.js",
|
||||
"src/Layer.js", "src/Group.js", "src/Shape.js", "src/shapes/Rect.js", "src/shapes/Circle.js", "src/shapes/Image.js",
|
||||
"src/shapes/Polygon.js", "src/shapes/RegularPolygon.js", "src/shapes/Star.js", "src/shapes/Text.js",
|
||||
"src/Transform.js"
|
||||
"src/Transform.js", "src/Transitions.js"
|
||||
]
|
||||
|
||||
desc "dev", "Concatenate all the js files into /dist/kinetic-VERSION.js."
|
||||
|
||||
654
dist/kinetic-core.js
vendored
654
dist/kinetic-core.js
vendored
@ -3,7 +3,7 @@
|
||||
* http://www.kineticjs.com/
|
||||
* Copyright 2012, Eric Rowell
|
||||
* Licensed under the MIT or GPL Version 2 licenses.
|
||||
* Date: Apr 01 2012
|
||||
* Date: Apr 02 2012
|
||||
*
|
||||
* Copyright (C) 2011 - 2012 by Eric Rowell
|
||||
*
|
||||
@ -41,6 +41,8 @@ var Kinetic = {};
|
||||
Kinetic.GlobalObject = {
|
||||
stages: [],
|
||||
idCounter: 0,
|
||||
animations: [],
|
||||
animIdCounter: 0,
|
||||
frame: {
|
||||
time: 0,
|
||||
timeDiff: 0,
|
||||
@ -61,152 +63,141 @@ Kinetic.GlobalObject = {
|
||||
}
|
||||
}
|
||||
},
|
||||
_isaCanvasAnimating: function() {
|
||||
for(var n = 0; n < this.stages.length; n++) {
|
||||
var stage = this.stages[n];
|
||||
if(stage.isAnimating) {
|
||||
return true;
|
||||
}
|
||||
/*
|
||||
_endTransition: function() {
|
||||
var config = this.config;
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key)) {
|
||||
if(config[key].x !== undefined || config[key].y !== undefined) {
|
||||
var propArray = ['x', 'y'];
|
||||
for(var n = 0; n < propArray.length; n++) {
|
||||
var prop = propArray[n];
|
||||
if(config[key][prop] !== undefined) {
|
||||
this.node[key][prop] = config[key][prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.node[key] = config[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_transitionPow: function(transition, key, prop, powFunc) {
|
||||
var pow = powFunc();
|
||||
|
||||
for(var i = 0; i < stage.children.length; i++) {
|
||||
var layer = stage.children[i];
|
||||
if(layer.transitions.length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.frame.lastTime = 0;
|
||||
return false;
|
||||
},
|
||||
_endTransition: function() {
|
||||
var config = this.config;
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key)) {
|
||||
if(config[key].x !== undefined || config[key].y !== undefined) {
|
||||
var propArray = ['x', 'y'];
|
||||
for(var n = 0; n < propArray.length; n++) {
|
||||
var prop = propArray[n];
|
||||
if(config[key][prop] !== undefined) {
|
||||
this.node[key][prop] = config[key][prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.node[key] = config[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_transitionPow: function(transition, key, prop, powFunc) {
|
||||
var pow = powFunc();
|
||||
|
||||
var config = transition.config;
|
||||
var timeDiff = this.frame.timeDiff;
|
||||
if(prop !== undefined) {
|
||||
var start = transition.starts[key][prop];
|
||||
var change = config[key][prop] - start;
|
||||
var b = change / (Math.pow(config.duration * 1000, pow));
|
||||
transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
|
||||
}
|
||||
else {
|
||||
var start = transition.starts[key];
|
||||
var change = config[key] - start;
|
||||
var b = change / (Math.pow(config.duration * 1000, pow));
|
||||
transition.node[key] = b * Math.pow(transition.time, pow) + start;
|
||||
}
|
||||
},
|
||||
_chooseTransition: function(transition, key, prop) {
|
||||
var config = transition.config;
|
||||
var that = this;
|
||||
switch(config.easing) {
|
||||
case 'ease-in':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 2.5;
|
||||
});
|
||||
break;
|
||||
case 'ease-out':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 0.4;
|
||||
});
|
||||
break;
|
||||
case 'ease-in-out':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
var change = -2.1;
|
||||
var b = change / (config.duration * 1000);
|
||||
return 2.5 + b * transition.time;
|
||||
});
|
||||
break;
|
||||
// linear is default
|
||||
default:
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 1;
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
_runTransition: function(transition) {
|
||||
var config = transition.config;
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
|
||||
if(config[key].x !== undefined || config[key].y !== undefined) {
|
||||
var propArray = ['x', 'y'];
|
||||
for(var n = 0; n < propArray.length; n++) {
|
||||
var prop = propArray[n];
|
||||
if(config[key][prop] !== undefined) {
|
||||
this._chooseTransition(transition, key, prop);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._chooseTransition(transition, key);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_clearTransition: function(node) {
|
||||
var layer = node.getLayer();
|
||||
for(var n = 0; n < layer.transitions.length; n++) {
|
||||
if(layer.transitions[n].node.id === node.id) {
|
||||
layer.transitions.splice(n, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
var config = transition.config;
|
||||
var timeDiff = this.frame.timeDiff;
|
||||
if(prop !== undefined) {
|
||||
var start = transition.starts[key][prop];
|
||||
var change = config[key][prop] - start;
|
||||
var b = change / (Math.pow(config.duration * 1000, pow));
|
||||
transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
|
||||
}
|
||||
else {
|
||||
var start = transition.starts[key];
|
||||
var change = config[key] - start;
|
||||
var b = change / (Math.pow(config.duration * 1000, pow));
|
||||
transition.node[key] = b * Math.pow(transition.time, pow) + start;
|
||||
}
|
||||
},
|
||||
_chooseTransition: function(transition, key, prop) {
|
||||
var config = transition.config;
|
||||
var that = this;
|
||||
switch(config.easing) {
|
||||
case 'ease-in':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 2.5;
|
||||
});
|
||||
break;
|
||||
case 'ease-out':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 0.4;
|
||||
});
|
||||
break;
|
||||
case 'ease-in-out':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
var change = -2.1;
|
||||
var b = change / (config.duration * 1000);
|
||||
return 2.5 + b * transition.time;
|
||||
});
|
||||
break;
|
||||
// linear is default
|
||||
default:
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 1;
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
_runTransition: function(transition) {
|
||||
var config = transition.config;
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
|
||||
if(config[key].x !== undefined || config[key].y !== undefined) {
|
||||
var propArray = ['x', 'y'];
|
||||
for(var n = 0; n < propArray.length; n++) {
|
||||
var prop = propArray[n];
|
||||
if(config[key][prop] !== undefined) {
|
||||
this._chooseTransition(transition, key, prop);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._chooseTransition(transition, key);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_clearTransition: function(node) {
|
||||
var layer = node.getLayer();
|
||||
for(var n = 0; n < layer.transitions.length; n++) {
|
||||
if(layer.transitions[n].node.id === node.id) {
|
||||
layer.transitions.splice(n, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
*/
|
||||
_runFrames: function() {
|
||||
for(var n = 0; n < this.stages.length; n++) {
|
||||
var stage = this.stages[n];
|
||||
// run animation if available
|
||||
if(stage.isAnimating && stage.onFrameFunc !== undefined) {
|
||||
stage.onFrameFunc(this.frame);
|
||||
}
|
||||
|
||||
// loop through layers
|
||||
var layers = stage.getChildren();
|
||||
for(var k = 0; k < layers.length; k++) {
|
||||
var layer = layers[k];
|
||||
var didTransition = false;
|
||||
// loop through transitions
|
||||
for(var i = 0; i < layer.transitions.length; i++) {
|
||||
didTransition = true;
|
||||
var transition = layer.transitions[i];
|
||||
transition.time += this.frame.timeDiff;
|
||||
if(transition.time >= transition.config.duration * 1000) {
|
||||
this._endTransition.apply(transition);
|
||||
this._clearTransition(transition.node);
|
||||
if(transition.config.callback !== undefined) {
|
||||
transition.config.callback();
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._runTransition(transition);
|
||||
}
|
||||
}
|
||||
|
||||
if(didTransition) {
|
||||
layer.draw();
|
||||
}
|
||||
}
|
||||
for(var n = 0; n < this.animations.length; n++) {
|
||||
this.animations[n].func(this.frame);
|
||||
}
|
||||
/*
|
||||
for(var n = 0; n < this.stages.length; n++) {
|
||||
var stage = this.stages[n];
|
||||
// run animation if available
|
||||
if(stage.isAnimating && stage.onFrameFunc !== undefined) {
|
||||
stage.onFrameFunc(this.frame);
|
||||
}
|
||||
|
||||
// loop through layers
|
||||
var layers = stage.getChildren();
|
||||
for(var k = 0; k < layers.length; k++) {
|
||||
var layer = layers[k];
|
||||
var didTransition = false;
|
||||
// loop through transitions
|
||||
for(var i = 0; i < layer.transitions.length; i++) {
|
||||
didTransition = true;
|
||||
var transition = layer.transitions[i];
|
||||
transition.time += this.frame.timeDiff;
|
||||
if(transition.time >= transition.config.duration * 1000) {
|
||||
this._endTransition.apply(transition);
|
||||
this._clearTransition(transition.node);
|
||||
if(transition.config.callback !== undefined) {
|
||||
transition.config.callback();
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._runTransition(transition);
|
||||
}
|
||||
}
|
||||
|
||||
if(didTransition) {
|
||||
layer.draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
},
|
||||
_updateFrameObject: function() {
|
||||
var date = new Date();
|
||||
@ -221,7 +212,7 @@ Kinetic.GlobalObject = {
|
||||
}
|
||||
},
|
||||
_animationLoop: function() {
|
||||
if(this._isaCanvasAnimating()) {
|
||||
if(this.animations.length > 0) {
|
||||
this._updateFrameObject();
|
||||
this._runFrames();
|
||||
var that = this;
|
||||
@ -229,12 +220,18 @@ Kinetic.GlobalObject = {
|
||||
that._animationLoop();
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.frame.lastTime = 0;
|
||||
}
|
||||
},
|
||||
_handleAnimation: function() {
|
||||
var that = this;
|
||||
if(this._isaCanvasAnimating()) {
|
||||
if(this.animations.length > 0) {
|
||||
that._animationLoop();
|
||||
}
|
||||
else {
|
||||
this.frame.lastTime = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -729,15 +726,19 @@ Kinetic.Node.prototype = {
|
||||
transitionTo: function(config) {
|
||||
var layer = this.getLayer();
|
||||
var that = this;
|
||||
var duration = config.duration * 1000;
|
||||
var starts = {};
|
||||
|
||||
|
||||
//var duration = config.duration * 1000;
|
||||
//var starts = {};
|
||||
//var go = Kinetic.GlobalObject;
|
||||
|
||||
/*
|
||||
* clear transition if one is currenlty running.
|
||||
* This make it easy to start new transitions without
|
||||
* having to explicitly cancel old ones
|
||||
*/
|
||||
Kinetic.GlobalObject._clearTransition(this);
|
||||
/*
|
||||
go._clearTransition(this);
|
||||
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
|
||||
@ -757,15 +758,16 @@ Kinetic.Node.prototype = {
|
||||
}
|
||||
}
|
||||
|
||||
layer.transitions.push({
|
||||
go.transitions.push({
|
||||
id: layer.transitionIdCounter++,
|
||||
time: 0,
|
||||
config: config,
|
||||
node: this,
|
||||
starts: starts
|
||||
});
|
||||
*/
|
||||
|
||||
Kinetic.GlobalObject._handleAnimation();
|
||||
go._handleAnimation();
|
||||
},
|
||||
/**
|
||||
* set drag constraint
|
||||
@ -1080,10 +1082,6 @@ Kinetic.Stage = function(config) {
|
||||
// set stage id
|
||||
this.id = Kinetic.GlobalObject.idCounter++;
|
||||
|
||||
// animation support
|
||||
this.isAnimating = false;
|
||||
this.onFrameFunc = undefined;
|
||||
|
||||
this._buildDOM();
|
||||
this._listen();
|
||||
this._prepareDrag();
|
||||
@ -1104,20 +1102,22 @@ Kinetic.Stage.prototype = {
|
||||
* @param {function} func
|
||||
*/
|
||||
onFrame: function(func) {
|
||||
this.onFrameFunc = func;
|
||||
var go = Kinetic.GlobalObject;
|
||||
go.animations.push({
|
||||
id: go.animIdCounter++,
|
||||
func: func
|
||||
});
|
||||
},
|
||||
/**
|
||||
* start animation
|
||||
*/
|
||||
start: function() {
|
||||
this.isAnimating = true;
|
||||
Kinetic.GlobalObject._handleAnimation();
|
||||
},
|
||||
/**
|
||||
* stop animation
|
||||
*/
|
||||
stop: function() {
|
||||
this.isAnimating = false;
|
||||
Kinetic.GlobalObject._handleAnimation();
|
||||
},
|
||||
/**
|
||||
@ -1796,8 +1796,6 @@ Kinetic.Layer = function(config) {
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.context = this.canvas.getContext('2d');
|
||||
this.canvas.style.position = 'absolute';
|
||||
this.transitions = [];
|
||||
this.transitionIdCounter = 0;
|
||||
|
||||
// call super constructors
|
||||
Kinetic.Container.apply(this, []);
|
||||
@ -2923,3 +2921,339 @@ Kinetic.Transform.prototype = {
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Transition = function(obj, propFunc, func, begin, finish, duration) {
|
||||
this._listeners = [];
|
||||
this.addListener(this);
|
||||
this.obj = obj;
|
||||
this.propFunc = propFunc;
|
||||
this.begin = begin;
|
||||
this._pos = begin;
|
||||
this.setDuration(duration);
|
||||
|
||||
this.isPlaying = false;
|
||||
|
||||
this._change = 0;
|
||||
|
||||
this.prevTime = 0;
|
||||
this.prevPos = 0;
|
||||
this.looping = false;
|
||||
|
||||
this._time = 0;
|
||||
this._position = 0;
|
||||
this._startTime = 0;
|
||||
this._finish = 0;
|
||||
|
||||
this.name = '';
|
||||
|
||||
//set the tweening function
|
||||
if(func !== null && func !== '') {
|
||||
this.func = func;
|
||||
}
|
||||
else {
|
||||
this.func = function(t, b, c, d) {
|
||||
return c * t / d + b;
|
||||
};
|
||||
}
|
||||
|
||||
this.setFinish(finish);
|
||||
};
|
||||
|
||||
Kinetic.Transition.prototype = {
|
||||
setTime: function(t) {
|
||||
this.prevTime = this._time;
|
||||
if(t > this.getDuration()) {
|
||||
if(this.looping) {
|
||||
this.rewind(t - this._duration);
|
||||
this.update();
|
||||
this.broadcastMessage('onTweenLooped', {
|
||||
target: this,
|
||||
type: 'onTweenLooped'
|
||||
});
|
||||
}
|
||||
else {
|
||||
this._time = this._duration;
|
||||
this.update();
|
||||
this.stop();
|
||||
this.broadcastMessage('onTweenFinished', {
|
||||
target: this,
|
||||
type: 'onTweenFinished'
|
||||
});
|
||||
}
|
||||
}
|
||||
else if(t < 0) {
|
||||
this.rewind();
|
||||
this.update();
|
||||
}
|
||||
else {
|
||||
this._time = t;
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
getTime: function() {
|
||||
return this._time;
|
||||
},
|
||||
setDuration: function(d) {
|
||||
this._duration = (d == null || d <= 0) ? 100000 : d;
|
||||
},
|
||||
getDuration: function() {
|
||||
return this._duration;
|
||||
},
|
||||
setPosition: function(p) {
|
||||
this.prevPos = this._pos;
|
||||
//var a = this.suffixe != '' ? this.suffixe : '';
|
||||
this.propFunc(p);
|
||||
//+ a;
|
||||
//this.obj(Math.round(p));
|
||||
this._pos = p;
|
||||
this.broadcastMessage('onTweenChanged', {
|
||||
target: this,
|
||||
type: 'onTweenChanged'
|
||||
});
|
||||
},
|
||||
getPosition: function(t) {
|
||||
if(t == undefined)
|
||||
t = this._time;
|
||||
return this.func(t, this.begin, this._change, this._duration);
|
||||
},
|
||||
setFinish: function(f) {
|
||||
this._change = f - this.begin;
|
||||
},
|
||||
getFinish: function() {
|
||||
return this.begin + this._change;
|
||||
},
|
||||
start: function() {
|
||||
this.rewind();
|
||||
this.startEnterFrame();
|
||||
this.broadcastMessage('onTweenStarted', {
|
||||
target: this,
|
||||
type: 'onTweenStarted'
|
||||
});
|
||||
},
|
||||
rewind: function(t) {
|
||||
this.stop();
|
||||
this._time = (t == undefined) ? 0 : t;
|
||||
this.fixTime();
|
||||
this.update();
|
||||
},
|
||||
fforward: function() {
|
||||
this._time = this._duration;
|
||||
this.fixTime();
|
||||
this.update();
|
||||
},
|
||||
update: function() {
|
||||
this.setPosition(this.getPosition(this._time));
|
||||
},
|
||||
startEnterFrame: function() {
|
||||
this.stopEnterFrame();
|
||||
this.isPlaying = true;
|
||||
this.onEnterFrame();
|
||||
},
|
||||
onEnterFrame: function() {
|
||||
if(this.isPlaying)
|
||||
this.nextFrame();
|
||||
},
|
||||
nextFrame: function() {
|
||||
this.setTime((this.getTimer() - this._startTime) / 1000);
|
||||
},
|
||||
stop: function() {
|
||||
this.stopEnterFrame();
|
||||
this.broadcastMessage('onTweenStopped', {
|
||||
target: this,
|
||||
type: 'onTweenStopped'
|
||||
});
|
||||
},
|
||||
stopEnterFrame: function() {
|
||||
this.isPlaying = false;
|
||||
},
|
||||
continueTo: function(finish, duration) {
|
||||
this.begin = this._pos;
|
||||
this.setFinish(finish);
|
||||
if(this._duration != undefined)
|
||||
this.setDuration(duration);
|
||||
this.start();
|
||||
},
|
||||
resume: function() {
|
||||
this.fixTime();
|
||||
this.startEnterFrame();
|
||||
this.broadcastMessage('onTweenResumed', {
|
||||
target: this,
|
||||
type: 'onTweenResumed'
|
||||
});
|
||||
},
|
||||
yoyo: function() {
|
||||
this.continueTo(this.begin, this._time);
|
||||
},
|
||||
addListener: function(o) {
|
||||
this.removeListener(o);
|
||||
return this._listeners.push(o);
|
||||
},
|
||||
removeListener: function(o) {
|
||||
var a = this._listeners;
|
||||
var i = a.length;
|
||||
while(i--) {
|
||||
if(a[i] == o) {
|
||||
a.splice(i, 1);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
broadcastMessage: function() {
|
||||
var arr = new Array();
|
||||
for(var i = 0; i < arguments.length; i++) {
|
||||
arr.push(arguments[i])
|
||||
}
|
||||
var e = arr.shift();
|
||||
var a = this._listeners;
|
||||
var l = a.length;
|
||||
for(var i = 0; i < l; i++) {
|
||||
if(a[i][e])
|
||||
a[i][e].apply(a[i], arr);
|
||||
}
|
||||
},
|
||||
fixTime: function() {
|
||||
this._startTime = this.getTimer() - this._time * 1000;
|
||||
},
|
||||
getTimer: function() {
|
||||
return new Date().getTime() - this._time;
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Transitions = {
|
||||
backEaseIn: function(t, b, c, d, a, p) {
|
||||
var s = 1.70158;
|
||||
return c * (t /= d) * t * ((s + 1) * t - s) + b;
|
||||
},
|
||||
backEaseOut: function(t, b, c, d, a, p) {
|
||||
var s = 1.70158;
|
||||
return c * (( t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
|
||||
},
|
||||
backEaseInOut: function(t, b, c, d, a, p) {
|
||||
var s = 1.70158;
|
||||
if((t /= d / 2) < 1) {
|
||||
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
|
||||
}
|
||||
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
|
||||
},
|
||||
elasticEaseIn: function(t, b, c, d, a, p) {
|
||||
// added s = 0
|
||||
var s = 0;
|
||||
if(t === 0) {
|
||||
return b;
|
||||
}
|
||||
if((t /= d) == 1) {
|
||||
return b + c;
|
||||
}
|
||||
if(!p) {
|
||||
p = d * 0.3;
|
||||
}
|
||||
if(!a || a < Math.abs(c)) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
}
|
||||
else {
|
||||
s = p / (2 * Math.PI) * Math.asin(c / a);
|
||||
}
|
||||
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
|
||||
},
|
||||
elasticEaseOut: function(t, b, c, d, a, p) {
|
||||
// added s = 0
|
||||
var s = 0;
|
||||
if(t === 0) {
|
||||
return b;
|
||||
}
|
||||
if((t /= d) == 1) {
|
||||
return b + c;
|
||||
}
|
||||
if(!p) {
|
||||
p = d * 0.3;
|
||||
}
|
||||
if(!a || a < Math.abs(c)) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
}
|
||||
else {
|
||||
s = p / (2 * Math.PI) * Math.asin(c / a);
|
||||
}
|
||||
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
|
||||
},
|
||||
elasticEaseInOut: function(t, b, c, d, a, p) {
|
||||
var s = 0;
|
||||
if(t === 0) {
|
||||
return b;
|
||||
}
|
||||
if((t /= d / 2) == 2) {
|
||||
return b + c;
|
||||
}
|
||||
if(!p) {
|
||||
p = d * (0.3 * 1.5);
|
||||
}
|
||||
if(!a || a < Math.abs(c)) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
}
|
||||
else {
|
||||
s = p / (2 * Math.PI) * Math.asin(c / a);
|
||||
}
|
||||
if(t < 1) {
|
||||
return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
|
||||
}
|
||||
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
|
||||
},
|
||||
bounceEaseOut: function(t, b, c, d) {
|
||||
if((t /= d) < (1 / 2.75)) {
|
||||
return c * (7.5625 * t * t) + b;
|
||||
}
|
||||
else if(t < (2 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
|
||||
}
|
||||
else if(t < (2.5 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
|
||||
}
|
||||
else {
|
||||
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
|
||||
}
|
||||
},
|
||||
bounceEaseIn: function(t, b, c, d) {
|
||||
return c - Kinetic.Transitions.bounceEaseOut(d - t, 0, c, d) + b;
|
||||
},
|
||||
bounceEaseInOut: function(t, b, c, d) {
|
||||
if(t < d / 2) {
|
||||
return Kinetic.Transitions.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
|
||||
}
|
||||
else {
|
||||
return Kinetic.Transitions.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
|
||||
}
|
||||
},
|
||||
// duplicate
|
||||
/*
|
||||
strongEaseInOut: function(t, b, c, d) {
|
||||
return c * (t /= d) * t * t * t * t + b;
|
||||
},
|
||||
*/
|
||||
regularEaseIn: function(t, b, c, d) {
|
||||
return c * (t /= d) * t + b;
|
||||
},
|
||||
regularEaseOut: function(t, b, c, d) {
|
||||
return -c * (t /= d) * (t - 2) + b;
|
||||
},
|
||||
regularEaseInOut: function(t, b, c, d) {
|
||||
if((t /= d / 2) < 1) {
|
||||
return c / 2 * t * t + b;
|
||||
}
|
||||
return -c / 2 * ((--t) * (t - 2) - 1) + b;
|
||||
},
|
||||
strongEaseIn: function(t, b, c, d) {
|
||||
return c * (t /= d) * t * t * t * t + b;
|
||||
},
|
||||
strongEaseOut: function(t, b, c, d) {
|
||||
return c * (( t = t / d - 1) * t * t * t * t + 1) + b;
|
||||
},
|
||||
strongEaseInOut: function(t, b, c, d) {
|
||||
if((t /= d / 2) < 1) {
|
||||
return c / 2 * t * t * t * t * t + b;
|
||||
}
|
||||
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
5
dist/kinetic-core.min.js
vendored
5
dist/kinetic-core.min.js
vendored
File diff suppressed because one or more lines are too long
@ -13,6 +13,8 @@ var Kinetic = {};
|
||||
Kinetic.GlobalObject = {
|
||||
stages: [],
|
||||
idCounter: 0,
|
||||
animations: [],
|
||||
animIdCounter: 0,
|
||||
frame: {
|
||||
time: 0,
|
||||
timeDiff: 0,
|
||||
@ -33,152 +35,141 @@ Kinetic.GlobalObject = {
|
||||
}
|
||||
}
|
||||
},
|
||||
_isaCanvasAnimating: function() {
|
||||
for(var n = 0; n < this.stages.length; n++) {
|
||||
var stage = this.stages[n];
|
||||
if(stage.isAnimating) {
|
||||
return true;
|
||||
}
|
||||
/*
|
||||
_endTransition: function() {
|
||||
var config = this.config;
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key)) {
|
||||
if(config[key].x !== undefined || config[key].y !== undefined) {
|
||||
var propArray = ['x', 'y'];
|
||||
for(var n = 0; n < propArray.length; n++) {
|
||||
var prop = propArray[n];
|
||||
if(config[key][prop] !== undefined) {
|
||||
this.node[key][prop] = config[key][prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.node[key] = config[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_transitionPow: function(transition, key, prop, powFunc) {
|
||||
var pow = powFunc();
|
||||
|
||||
for(var i = 0; i < stage.children.length; i++) {
|
||||
var layer = stage.children[i];
|
||||
if(layer.transitions.length > 0) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.frame.lastTime = 0;
|
||||
return false;
|
||||
},
|
||||
_endTransition: function() {
|
||||
var config = this.config;
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key)) {
|
||||
if(config[key].x !== undefined || config[key].y !== undefined) {
|
||||
var propArray = ['x', 'y'];
|
||||
for(var n = 0; n < propArray.length; n++) {
|
||||
var prop = propArray[n];
|
||||
if(config[key][prop] !== undefined) {
|
||||
this.node[key][prop] = config[key][prop];
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.node[key] = config[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_transitionPow: function(transition, key, prop, powFunc) {
|
||||
var pow = powFunc();
|
||||
|
||||
var config = transition.config;
|
||||
var timeDiff = this.frame.timeDiff;
|
||||
if(prop !== undefined) {
|
||||
var start = transition.starts[key][prop];
|
||||
var change = config[key][prop] - start;
|
||||
var b = change / (Math.pow(config.duration * 1000, pow));
|
||||
transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
|
||||
}
|
||||
else {
|
||||
var start = transition.starts[key];
|
||||
var change = config[key] - start;
|
||||
var b = change / (Math.pow(config.duration * 1000, pow));
|
||||
transition.node[key] = b * Math.pow(transition.time, pow) + start;
|
||||
}
|
||||
},
|
||||
_chooseTransition: function(transition, key, prop) {
|
||||
var config = transition.config;
|
||||
var that = this;
|
||||
switch(config.easing) {
|
||||
case 'ease-in':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 2.5;
|
||||
});
|
||||
break;
|
||||
case 'ease-out':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 0.4;
|
||||
});
|
||||
break;
|
||||
case 'ease-in-out':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
var change = -2.1;
|
||||
var b = change / (config.duration * 1000);
|
||||
return 2.5 + b * transition.time;
|
||||
});
|
||||
break;
|
||||
// linear is default
|
||||
default:
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 1;
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
_runTransition: function(transition) {
|
||||
var config = transition.config;
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
|
||||
if(config[key].x !== undefined || config[key].y !== undefined) {
|
||||
var propArray = ['x', 'y'];
|
||||
for(var n = 0; n < propArray.length; n++) {
|
||||
var prop = propArray[n];
|
||||
if(config[key][prop] !== undefined) {
|
||||
this._chooseTransition(transition, key, prop);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._chooseTransition(transition, key);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_clearTransition: function(node) {
|
||||
var layer = node.getLayer();
|
||||
for(var n = 0; n < layer.transitions.length; n++) {
|
||||
if(layer.transitions[n].node.id === node.id) {
|
||||
layer.transitions.splice(n, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
var config = transition.config;
|
||||
var timeDiff = this.frame.timeDiff;
|
||||
if(prop !== undefined) {
|
||||
var start = transition.starts[key][prop];
|
||||
var change = config[key][prop] - start;
|
||||
var b = change / (Math.pow(config.duration * 1000, pow));
|
||||
transition.node[key][prop] = b * Math.pow(transition.time, pow) + start;
|
||||
}
|
||||
else {
|
||||
var start = transition.starts[key];
|
||||
var change = config[key] - start;
|
||||
var b = change / (Math.pow(config.duration * 1000, pow));
|
||||
transition.node[key] = b * Math.pow(transition.time, pow) + start;
|
||||
}
|
||||
},
|
||||
_chooseTransition: function(transition, key, prop) {
|
||||
var config = transition.config;
|
||||
var that = this;
|
||||
switch(config.easing) {
|
||||
case 'ease-in':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 2.5;
|
||||
});
|
||||
break;
|
||||
case 'ease-out':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 0.4;
|
||||
});
|
||||
break;
|
||||
case 'ease-in-out':
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
var change = -2.1;
|
||||
var b = change / (config.duration * 1000);
|
||||
return 2.5 + b * transition.time;
|
||||
});
|
||||
break;
|
||||
// linear is default
|
||||
default:
|
||||
this._transitionPow(transition, key, prop, function() {
|
||||
return 1;
|
||||
});
|
||||
break;
|
||||
}
|
||||
},
|
||||
_runTransition: function(transition) {
|
||||
var config = transition.config;
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
|
||||
if(config[key].x !== undefined || config[key].y !== undefined) {
|
||||
var propArray = ['x', 'y'];
|
||||
for(var n = 0; n < propArray.length; n++) {
|
||||
var prop = propArray[n];
|
||||
if(config[key][prop] !== undefined) {
|
||||
this._chooseTransition(transition, key, prop);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._chooseTransition(transition, key);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_clearTransition: function(node) {
|
||||
var layer = node.getLayer();
|
||||
for(var n = 0; n < layer.transitions.length; n++) {
|
||||
if(layer.transitions[n].node.id === node.id) {
|
||||
layer.transitions.splice(n, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
*/
|
||||
_runFrames: function() {
|
||||
for(var n = 0; n < this.stages.length; n++) {
|
||||
var stage = this.stages[n];
|
||||
// run animation if available
|
||||
if(stage.isAnimating && stage.onFrameFunc !== undefined) {
|
||||
stage.onFrameFunc(this.frame);
|
||||
}
|
||||
|
||||
// loop through layers
|
||||
var layers = stage.getChildren();
|
||||
for(var k = 0; k < layers.length; k++) {
|
||||
var layer = layers[k];
|
||||
var didTransition = false;
|
||||
// loop through transitions
|
||||
for(var i = 0; i < layer.transitions.length; i++) {
|
||||
didTransition = true;
|
||||
var transition = layer.transitions[i];
|
||||
transition.time += this.frame.timeDiff;
|
||||
if(transition.time >= transition.config.duration * 1000) {
|
||||
this._endTransition.apply(transition);
|
||||
this._clearTransition(transition.node);
|
||||
if(transition.config.callback !== undefined) {
|
||||
transition.config.callback();
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._runTransition(transition);
|
||||
}
|
||||
}
|
||||
|
||||
if(didTransition) {
|
||||
layer.draw();
|
||||
}
|
||||
}
|
||||
for(var n = 0; n < this.animations.length; n++) {
|
||||
this.animations[n].func(this.frame);
|
||||
}
|
||||
/*
|
||||
for(var n = 0; n < this.stages.length; n++) {
|
||||
var stage = this.stages[n];
|
||||
// run animation if available
|
||||
if(stage.isAnimating && stage.onFrameFunc !== undefined) {
|
||||
stage.onFrameFunc(this.frame);
|
||||
}
|
||||
|
||||
// loop through layers
|
||||
var layers = stage.getChildren();
|
||||
for(var k = 0; k < layers.length; k++) {
|
||||
var layer = layers[k];
|
||||
var didTransition = false;
|
||||
// loop through transitions
|
||||
for(var i = 0; i < layer.transitions.length; i++) {
|
||||
didTransition = true;
|
||||
var transition = layer.transitions[i];
|
||||
transition.time += this.frame.timeDiff;
|
||||
if(transition.time >= transition.config.duration * 1000) {
|
||||
this._endTransition.apply(transition);
|
||||
this._clearTransition(transition.node);
|
||||
if(transition.config.callback !== undefined) {
|
||||
transition.config.callback();
|
||||
}
|
||||
}
|
||||
else {
|
||||
this._runTransition(transition);
|
||||
}
|
||||
}
|
||||
|
||||
if(didTransition) {
|
||||
layer.draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
},
|
||||
_updateFrameObject: function() {
|
||||
var date = new Date();
|
||||
@ -193,7 +184,7 @@ Kinetic.GlobalObject = {
|
||||
}
|
||||
},
|
||||
_animationLoop: function() {
|
||||
if(this._isaCanvasAnimating()) {
|
||||
if(this.animations.length > 0) {
|
||||
this._updateFrameObject();
|
||||
this._runFrames();
|
||||
var that = this;
|
||||
@ -201,12 +192,18 @@ Kinetic.GlobalObject = {
|
||||
that._animationLoop();
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.frame.lastTime = 0;
|
||||
}
|
||||
},
|
||||
_handleAnimation: function() {
|
||||
var that = this;
|
||||
if(this._isaCanvasAnimating()) {
|
||||
if(this.animations.length > 0) {
|
||||
that._animationLoop();
|
||||
}
|
||||
else {
|
||||
this.frame.lastTime = 0;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -14,8 +14,6 @@ Kinetic.Layer = function(config) {
|
||||
this.canvas = document.createElement('canvas');
|
||||
this.context = this.canvas.getContext('2d');
|
||||
this.canvas.style.position = 'absolute';
|
||||
this.transitions = [];
|
||||
this.transitionIdCounter = 0;
|
||||
|
||||
// call super constructors
|
||||
Kinetic.Container.apply(this, []);
|
||||
|
||||
15
src/Node.js
15
src/Node.js
@ -482,15 +482,19 @@ Kinetic.Node.prototype = {
|
||||
transitionTo: function(config) {
|
||||
var layer = this.getLayer();
|
||||
var that = this;
|
||||
var duration = config.duration * 1000;
|
||||
var starts = {};
|
||||
|
||||
|
||||
//var duration = config.duration * 1000;
|
||||
//var starts = {};
|
||||
//var go = Kinetic.GlobalObject;
|
||||
|
||||
/*
|
||||
* clear transition if one is currenlty running.
|
||||
* This make it easy to start new transitions without
|
||||
* having to explicitly cancel old ones
|
||||
*/
|
||||
Kinetic.GlobalObject._clearTransition(this);
|
||||
/*
|
||||
go._clearTransition(this);
|
||||
|
||||
for(var key in config) {
|
||||
if(config.hasOwnProperty(key) && key !== 'duration' && key !== 'easing' && key !== 'callback') {
|
||||
@ -510,15 +514,16 @@ Kinetic.Node.prototype = {
|
||||
}
|
||||
}
|
||||
|
||||
layer.transitions.push({
|
||||
go.transitions.push({
|
||||
id: layer.transitionIdCounter++,
|
||||
time: 0,
|
||||
config: config,
|
||||
node: this,
|
||||
starts: starts
|
||||
});
|
||||
*/
|
||||
|
||||
Kinetic.GlobalObject._handleAnimation();
|
||||
go._handleAnimation();
|
||||
},
|
||||
/**
|
||||
* set drag constraint
|
||||
|
||||
12
src/Stage.js
12
src/Stage.js
@ -50,10 +50,6 @@ Kinetic.Stage = function(config) {
|
||||
// set stage id
|
||||
this.id = Kinetic.GlobalObject.idCounter++;
|
||||
|
||||
// animation support
|
||||
this.isAnimating = false;
|
||||
this.onFrameFunc = undefined;
|
||||
|
||||
this._buildDOM();
|
||||
this._listen();
|
||||
this._prepareDrag();
|
||||
@ -74,20 +70,22 @@ Kinetic.Stage.prototype = {
|
||||
* @param {function} func
|
||||
*/
|
||||
onFrame: function(func) {
|
||||
this.onFrameFunc = func;
|
||||
var go = Kinetic.GlobalObject;
|
||||
go.animations.push({
|
||||
id: go.animIdCounter++,
|
||||
func: func
|
||||
});
|
||||
},
|
||||
/**
|
||||
* start animation
|
||||
*/
|
||||
start: function() {
|
||||
this.isAnimating = true;
|
||||
Kinetic.GlobalObject._handleAnimation();
|
||||
},
|
||||
/**
|
||||
* stop animation
|
||||
*/
|
||||
stop: function() {
|
||||
this.isAnimating = false;
|
||||
Kinetic.GlobalObject._handleAnimation();
|
||||
},
|
||||
/**
|
||||
|
||||
335
src/Transitions.js
Normal file
335
src/Transitions.js
Normal file
@ -0,0 +1,335 @@
|
||||
Kinetic.Transition = function(obj, propFunc, func, begin, finish, duration) {
|
||||
this._listeners = [];
|
||||
this.addListener(this);
|
||||
this.obj = obj;
|
||||
this.propFunc = propFunc;
|
||||
this.begin = begin;
|
||||
this._pos = begin;
|
||||
this.setDuration(duration);
|
||||
|
||||
this.isPlaying = false;
|
||||
|
||||
this._change = 0;
|
||||
|
||||
this.prevTime = 0;
|
||||
this.prevPos = 0;
|
||||
this.looping = false;
|
||||
|
||||
this._time = 0;
|
||||
this._position = 0;
|
||||
this._startTime = 0;
|
||||
this._finish = 0;
|
||||
|
||||
this.name = '';
|
||||
|
||||
//set the tweening function
|
||||
if(func !== null && func !== '') {
|
||||
this.func = func;
|
||||
}
|
||||
else {
|
||||
this.func = function(t, b, c, d) {
|
||||
return c * t / d + b;
|
||||
};
|
||||
}
|
||||
|
||||
this.setFinish(finish);
|
||||
};
|
||||
|
||||
Kinetic.Transition.prototype = {
|
||||
setTime: function(t) {
|
||||
this.prevTime = this._time;
|
||||
if(t > this.getDuration()) {
|
||||
if(this.looping) {
|
||||
this.rewind(t - this._duration);
|
||||
this.update();
|
||||
this.broadcastMessage('onTweenLooped', {
|
||||
target: this,
|
||||
type: 'onTweenLooped'
|
||||
});
|
||||
}
|
||||
else {
|
||||
this._time = this._duration;
|
||||
this.update();
|
||||
this.stop();
|
||||
this.broadcastMessage('onTweenFinished', {
|
||||
target: this,
|
||||
type: 'onTweenFinished'
|
||||
});
|
||||
}
|
||||
}
|
||||
else if(t < 0) {
|
||||
this.rewind();
|
||||
this.update();
|
||||
}
|
||||
else {
|
||||
this._time = t;
|
||||
this.update();
|
||||
}
|
||||
},
|
||||
getTime: function() {
|
||||
return this._time;
|
||||
},
|
||||
setDuration: function(d) {
|
||||
this._duration = (d == null || d <= 0) ? 100000 : d;
|
||||
},
|
||||
getDuration: function() {
|
||||
return this._duration;
|
||||
},
|
||||
setPosition: function(p) {
|
||||
this.prevPos = this._pos;
|
||||
//var a = this.suffixe != '' ? this.suffixe : '';
|
||||
this.propFunc(p);
|
||||
//+ a;
|
||||
//this.obj(Math.round(p));
|
||||
this._pos = p;
|
||||
this.broadcastMessage('onTweenChanged', {
|
||||
target: this,
|
||||
type: 'onTweenChanged'
|
||||
});
|
||||
},
|
||||
getPosition: function(t) {
|
||||
if(t == undefined)
|
||||
t = this._time;
|
||||
return this.func(t, this.begin, this._change, this._duration);
|
||||
},
|
||||
setFinish: function(f) {
|
||||
this._change = f - this.begin;
|
||||
},
|
||||
getFinish: function() {
|
||||
return this.begin + this._change;
|
||||
},
|
||||
start: function() {
|
||||
this.rewind();
|
||||
this.startEnterFrame();
|
||||
this.broadcastMessage('onTweenStarted', {
|
||||
target: this,
|
||||
type: 'onTweenStarted'
|
||||
});
|
||||
},
|
||||
rewind: function(t) {
|
||||
this.stop();
|
||||
this._time = (t == undefined) ? 0 : t;
|
||||
this.fixTime();
|
||||
this.update();
|
||||
},
|
||||
fforward: function() {
|
||||
this._time = this._duration;
|
||||
this.fixTime();
|
||||
this.update();
|
||||
},
|
||||
update: function() {
|
||||
this.setPosition(this.getPosition(this._time));
|
||||
},
|
||||
startEnterFrame: function() {
|
||||
this.stopEnterFrame();
|
||||
this.isPlaying = true;
|
||||
this.onEnterFrame();
|
||||
},
|
||||
onEnterFrame: function() {
|
||||
if(this.isPlaying)
|
||||
this.nextFrame();
|
||||
},
|
||||
nextFrame: function() {
|
||||
this.setTime((this.getTimer() - this._startTime) / 1000);
|
||||
},
|
||||
stop: function() {
|
||||
this.stopEnterFrame();
|
||||
this.broadcastMessage('onTweenStopped', {
|
||||
target: this,
|
||||
type: 'onTweenStopped'
|
||||
});
|
||||
},
|
||||
stopEnterFrame: function() {
|
||||
this.isPlaying = false;
|
||||
},
|
||||
continueTo: function(finish, duration) {
|
||||
this.begin = this._pos;
|
||||
this.setFinish(finish);
|
||||
if(this._duration != undefined)
|
||||
this.setDuration(duration);
|
||||
this.start();
|
||||
},
|
||||
resume: function() {
|
||||
this.fixTime();
|
||||
this.startEnterFrame();
|
||||
this.broadcastMessage('onTweenResumed', {
|
||||
target: this,
|
||||
type: 'onTweenResumed'
|
||||
});
|
||||
},
|
||||
yoyo: function() {
|
||||
this.continueTo(this.begin, this._time);
|
||||
},
|
||||
addListener: function(o) {
|
||||
this.removeListener(o);
|
||||
return this._listeners.push(o);
|
||||
},
|
||||
removeListener: function(o) {
|
||||
var a = this._listeners;
|
||||
var i = a.length;
|
||||
while(i--) {
|
||||
if(a[i] == o) {
|
||||
a.splice(i, 1);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
broadcastMessage: function() {
|
||||
var arr = new Array();
|
||||
for(var i = 0; i < arguments.length; i++) {
|
||||
arr.push(arguments[i])
|
||||
}
|
||||
var e = arr.shift();
|
||||
var a = this._listeners;
|
||||
var l = a.length;
|
||||
for(var i = 0; i < l; i++) {
|
||||
if(a[i][e])
|
||||
a[i][e].apply(a[i], arr);
|
||||
}
|
||||
},
|
||||
fixTime: function() {
|
||||
this._startTime = this.getTimer() - this._time * 1000;
|
||||
},
|
||||
getTimer: function() {
|
||||
return new Date().getTime() - this._time;
|
||||
}
|
||||
};
|
||||
|
||||
Kinetic.Transitions = {
|
||||
backEaseIn: function(t, b, c, d, a, p) {
|
||||
var s = 1.70158;
|
||||
return c * (t /= d) * t * ((s + 1) * t - s) + b;
|
||||
},
|
||||
backEaseOut: function(t, b, c, d, a, p) {
|
||||
var s = 1.70158;
|
||||
return c * (( t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
|
||||
},
|
||||
backEaseInOut: function(t, b, c, d, a, p) {
|
||||
var s = 1.70158;
|
||||
if((t /= d / 2) < 1) {
|
||||
return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
|
||||
}
|
||||
return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
|
||||
},
|
||||
elasticEaseIn: function(t, b, c, d, a, p) {
|
||||
// added s = 0
|
||||
var s = 0;
|
||||
if(t === 0) {
|
||||
return b;
|
||||
}
|
||||
if((t /= d) == 1) {
|
||||
return b + c;
|
||||
}
|
||||
if(!p) {
|
||||
p = d * 0.3;
|
||||
}
|
||||
if(!a || a < Math.abs(c)) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
}
|
||||
else {
|
||||
s = p / (2 * Math.PI) * Math.asin(c / a);
|
||||
}
|
||||
return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
|
||||
},
|
||||
elasticEaseOut: function(t, b, c, d, a, p) {
|
||||
// added s = 0
|
||||
var s = 0;
|
||||
if(t === 0) {
|
||||
return b;
|
||||
}
|
||||
if((t /= d) == 1) {
|
||||
return b + c;
|
||||
}
|
||||
if(!p) {
|
||||
p = d * 0.3;
|
||||
}
|
||||
if(!a || a < Math.abs(c)) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
}
|
||||
else {
|
||||
s = p / (2 * Math.PI) * Math.asin(c / a);
|
||||
}
|
||||
return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
|
||||
},
|
||||
elasticEaseInOut: function(t, b, c, d, a, p) {
|
||||
var s = 0;
|
||||
if(t === 0) {
|
||||
return b;
|
||||
}
|
||||
if((t /= d / 2) == 2) {
|
||||
return b + c;
|
||||
}
|
||||
if(!p) {
|
||||
p = d * (0.3 * 1.5);
|
||||
}
|
||||
if(!a || a < Math.abs(c)) {
|
||||
a = c;
|
||||
s = p / 4;
|
||||
}
|
||||
else {
|
||||
s = p / (2 * Math.PI) * Math.asin(c / a);
|
||||
}
|
||||
if(t < 1) {
|
||||
return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
|
||||
}
|
||||
return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
|
||||
},
|
||||
bounceEaseOut: function(t, b, c, d) {
|
||||
if((t /= d) < (1 / 2.75)) {
|
||||
return c * (7.5625 * t * t) + b;
|
||||
}
|
||||
else if(t < (2 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
|
||||
}
|
||||
else if(t < (2.5 / 2.75)) {
|
||||
return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
|
||||
}
|
||||
else {
|
||||
return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
|
||||
}
|
||||
},
|
||||
bounceEaseIn: function(t, b, c, d) {
|
||||
return c - Kinetic.Transitions.bounceEaseOut(d - t, 0, c, d) + b;
|
||||
},
|
||||
bounceEaseInOut: function(t, b, c, d) {
|
||||
if(t < d / 2) {
|
||||
return Kinetic.Transitions.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
|
||||
}
|
||||
else {
|
||||
return Kinetic.Transitions.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
|
||||
}
|
||||
},
|
||||
// duplicate
|
||||
/*
|
||||
strongEaseInOut: function(t, b, c, d) {
|
||||
return c * (t /= d) * t * t * t * t + b;
|
||||
},
|
||||
*/
|
||||
regularEaseIn: function(t, b, c, d) {
|
||||
return c * (t /= d) * t + b;
|
||||
},
|
||||
regularEaseOut: function(t, b, c, d) {
|
||||
return -c * (t /= d) * (t - 2) + b;
|
||||
},
|
||||
regularEaseInOut: function(t, b, c, d) {
|
||||
if((t /= d / 2) < 1) {
|
||||
return c / 2 * t * t + b;
|
||||
}
|
||||
return -c / 2 * ((--t) * (t - 2) - 1) + b;
|
||||
},
|
||||
strongEaseIn: function(t, b, c, d) {
|
||||
return c * (t /= d) * t * t * t * t + b;
|
||||
},
|
||||
strongEaseOut: function(t, b, c, d) {
|
||||
return c * (( t = t / d - 1) * t * t * t * t + 1) + b;
|
||||
},
|
||||
strongEaseInOut: function(t, b, c, d) {
|
||||
if((t /= d / 2) < 1) {
|
||||
return c / 2 * t * t * t * t * t + b;
|
||||
}
|
||||
return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
|
||||
}
|
||||
};
|
||||
@ -10,7 +10,7 @@ function log(message) {
|
||||
* Test constructor
|
||||
*/
|
||||
function Test() {
|
||||
this.testOnly = '';
|
||||
this.testOnly = 'TRANSITION - transition position and rotation';
|
||||
this.counter = 0;
|
||||
}
|
||||
/**
|
||||
|
||||
@ -19,12 +19,26 @@ Test.prototype.tests = {
|
||||
layer.add(rect);
|
||||
stage.add(layer);
|
||||
|
||||
rect.transitionTo({
|
||||
x: 400,
|
||||
y: 30,
|
||||
rotation: Math.PI * 2,
|
||||
duration: 1
|
||||
var tween = new Kinetic.Transition(rect, function(i) {
|
||||
rect.setScale(i);
|
||||
}, Kinetic.Transitions.bounceEaseOut, 10, 1, 2);
|
||||
|
||||
stage.onFrame(function(frame) {
|
||||
tween.onEnterFrame();
|
||||
layer.draw();
|
||||
});
|
||||
|
||||
tween.start();
|
||||
stage.start();
|
||||
|
||||
/*
|
||||
rect.transitionTo({
|
||||
x: 400,
|
||||
y: 30,
|
||||
rotation: Math.PI * 2,
|
||||
duration: 1
|
||||
});
|
||||
*/
|
||||
},
|
||||
'TRANSITION - transition position and rotation with two transitions': function(containerId) {
|
||||
var stage = new Kinetic.Stage({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user