Last active
August 29, 2015 13:58
-
-
Save ashblue/9984922 to your computer and use it in GitHub Desktop.
ImpactJS Tweening plugin (fast and minimal).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ig.module( | |
'plugins.tween' | |
).requires( | |
'impact.entity' | |
).defines( function() { | |
'use strict'; | |
var _easing = { | |
linear: { | |
easeNone: function (k) { | |
return k; | |
} | |
}, | |
quadratic: { | |
easeIn: function (k) { | |
return k * k; | |
}, | |
easeOut: function (k) { | |
return - k * ( k - 2 ); | |
}, | |
easeInOut: function (k) { | |
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k; | |
return - 0.5 * ( --k * ( k - 2 ) - 1 ); | |
} | |
}, | |
cubic: { | |
easeIn: function (k) { | |
return k * k * k; | |
}, | |
easeOut: function (k) { | |
return --k * k * k + 1; | |
}, | |
easeInOut: function (k) { | |
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k; | |
return 0.5 * ( ( k -= 2 ) * k * k + 2 ); | |
} | |
}, | |
quartic: { | |
easeIn: function (k) { | |
return k * k * k * k; | |
}, | |
easeOut: function (k) { | |
return - ( --k * k * k * k - 1 ); | |
}, | |
easeInOut: function (k) { | |
if ( ( k *= 2 ) < 1) return 0.5 * k * k * k * k; | |
return - 0.5 * ( ( k -= 2 ) * k * k * k - 2 ); | |
} | |
}, | |
quintic: { | |
easeIn: function (k) { | |
return k * k * k * k * k; | |
}, | |
easeOut: function (k) { | |
return ( k = k - 1 ) * k * k * k * k + 1; | |
}, | |
easeInOut: function (k) { | |
if ( ( k *= 2 ) < 1 ) return 0.5 * k * k * k * k * k; | |
return 0.5 * ( ( k -= 2 ) * k * k * k * k + 2 ); | |
} | |
}, | |
sinusoidal: { | |
easeIn: function (k) { | |
return - Math.cos( k * Math.PI / 2 ) + 1; | |
}, | |
easeOut: function (k) { | |
return Math.sin( k * Math.PI / 2 ); | |
}, | |
easeInOut: function (k) { | |
return - 0.5 * ( Math.cos( Math.PI * k ) - 1 ); | |
} | |
}, | |
exponential: { | |
easeIn: function (k) { | |
return k === 0 ? 0 : Math.pow( 2, 10 * ( k - 1 ) ); | |
}, | |
easeOut: function (k) { | |
return k === 1 ? 1 : - Math.pow( 2, - 10 * k ) + 1; | |
}, | |
easeInOut: function (k) { | |
if ( k === 0 ) return 0; | |
if ( k === 1 ) return 1; | |
if ( ( k *= 2 ) < 1 ) return 0.5 * Math.pow( 2, 10 * ( k - 1 ) ); | |
return 0.5 * ( - Math.pow( 2, - 10 * ( k - 1 ) ) + 2 ); | |
} | |
}, | |
circular: { | |
easeIn: function (k) { | |
return - ( Math.sqrt( 1 - k * k ) - 1); | |
}, | |
easeOut: function (k) { | |
return Math.sqrt( 1 - (--k) * k ); | |
}, | |
easeInOut: function (k) { | |
if ( ( k /= 0.5 ) < 1) return - 0.5 * ( Math.sqrt( 1 - k * k) - 1); | |
return 0.5 * ( Math.sqrt( 1 - ( k -= 2) * k) + 1); | |
} | |
}, | |
elastic: { | |
easeIn: function (k) { | |
var s, a = 0.1, p = 0.4; | |
if ( k === 0 ) return 0; if ( k === 1 ) return 1; if ( !p ) p = 0.3; | |
if ( !a || a < 1 ) { a = 1; s = p / 4; } | |
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a ); | |
return - ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) ); | |
}, | |
easeOut: function (k) { | |
var s, a = 0.1, p = 0.4; | |
if ( k === 0 ) return 0; if ( k === 1 ) return 1; if ( !p ) p = 0.3; | |
if ( !a || a < 1 ) { a = 1; s = p / 4; } | |
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a ); | |
return ( a * Math.pow( 2, - 10 * k) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) + 1 ); | |
}, | |
easeInOut: function (k) { | |
var s, a = 0.1, p = 0.4; | |
if ( k === 0 ) return 0; if ( k === 1 ) return 1; if ( !p ) p = 0.3; | |
if ( !a || a < 1 ) { a = 1; s = p / 4; } | |
else s = p / ( 2 * Math.PI ) * Math.asin( 1 / a ); | |
if ( ( k *= 2 ) < 1 ) return - 0.5 * ( a * Math.pow( 2, 10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) ); | |
return a * Math.pow( 2, -10 * ( k -= 1 ) ) * Math.sin( ( k - s ) * ( 2 * Math.PI ) / p ) * 0.5 + 1; | |
} | |
}, | |
back: { | |
easeIn: function (k) { | |
var s = 1.70158; | |
return k * k * ( ( s + 1 ) * k - s ); | |
}, | |
easeOut: function (k) { | |
var s = 1.70158; | |
return ( k = k - 1 ) * k * ( ( s + 1 ) * k + s ) + 1; | |
}, | |
easeInOut: function (k) { | |
var s = 1.70158 * 1.525; | |
if ( ( k *= 2 ) < 1 ) return 0.5 * ( k * k * ( ( s + 1 ) * k - s ) ); | |
return 0.5 * ( ( k -= 2 ) * k * ( ( s + 1 ) * k + s ) + 2 ); | |
} | |
}, | |
bounce: { | |
easeIn: function (k) { | |
return 1 - _easing.bounce.easeOut( 1 - k ); | |
}, | |
easeOut: function (k) { | |
if ( ( k /= 1 ) < ( 1 / 2.75 ) ) { | |
return 7.5625 * k * k; | |
} else if ( k < ( 2 / 2.75 ) ) { | |
return 7.5625 * ( k -= ( 1.5 / 2.75 ) ) * k + 0.75; | |
} else if ( k < ( 2.5 / 2.75 ) ) { | |
return 7.5625 * ( k -= ( 2.25 / 2.75 ) ) * k + 0.9375; | |
} else { | |
return 7.5625 * ( k -= ( 2.625 / 2.75 ) ) * k + 0.984375; | |
} | |
}, | |
easeInOut: function (k) { | |
if ( k < 0.5 ) return _easing.bounce.easeIn( k * 2 ) * 0.5; | |
return _easing.bounce.easeOut( k * 2 - 1 ) * 0.5 + 0.5; | |
} | |
} | |
}; | |
/** | |
* Simple easing plugin that uses ImpactJS | |
* @author Ash Blue (@ashbluewd) http://blueashes.com | |
* @src http://www.pointofimpactjs.com/snippets/view/17/entitytween | |
* @type {void|*} | |
*/ | |
window.EntityTween = ig.Entity.extend({ | |
easing: 'linear', | |
easingType: 'easeNone', | |
loop: 'none', // Valid values, 'none', 'revert', 'reverse' | |
time: 3, | |
start: 1, | |
end: 10, | |
val: null, | |
callback: null, // function(tween, x) { tween.target.pos.x = x; }, | |
target: null, // An entity | |
init:function ( x, y, settings ) { | |
this.parent( x, y, settings ); | |
this.paused = false; | |
this.timer = new ig.Timer(); | |
this.val = this.start; | |
this.state = 'forward'; | |
}, | |
pause:function() { | |
this.paused = true; | |
}, | |
unpause:function() { | |
this.paused = false; | |
}, | |
update:function() { | |
if (this.paused) return; | |
if (this.timer.delta() > this.time) { | |
if( !this.hasOwnProperty('loop') || this.loop === 'none' ) { | |
if (this.callback) this.callback(this, this.end); | |
this.kill(); | |
return; | |
} else if( this.loop === 'revert' ) { | |
this.timer.set( -(this.timer.delta() - this.time) ); | |
} else if( this.loop === 'reverse' ) { | |
this.timer.set( -(this.timer.delta() - this.time) ); | |
this.state = this.state === 'forward' ? 'reverse' : 'forward'; | |
} | |
} | |
var t = this.timer.delta() / this.time; | |
var k = _easing[this.easing][this.easingType](t); | |
var range = this.end - this.start; | |
var val; | |
if( this.state === 'forward' ) { | |
val = this.start + range * k; | |
} | |
else if( this.state === 'reverse' ) { | |
val = this.end - range * k; | |
} | |
if (this.callback) this.callback(this, val); | |
this.val = val; | |
}, | |
draw:function() {} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment