From 7cf000ce2158a265c8999a34a0287c763f36ce28 Mon Sep 17 00:00:00 2001 From: Sven Slootweg Date: Fri, 9 May 2014 02:07:03 +0200 Subject: [PATCH] Elastic easing functions --- compiled/radium.js | 54 +++++++++++++++++++++++++++++++-------- radium/engine.ease.coffee | 41 ++++++++++++++++++++++++----- 2 files changed, 78 insertions(+), 17 deletions(-) diff --git a/compiled/radium.js b/compiled/radium.js index 8e98a37..ebf502b 100644 --- a/compiled/radium.js +++ b/compiled/radium.js @@ -265,7 +265,7 @@ } else { overshoot = period / (2 * Math.PI) * Math.asin(change / amplitude); } - return [amplitude, period, change]; + return [amplitude, period, change, overshoot]; }, backIn: function(start, end, duration, next, infinite, invert_repeat, overshoot) { if (next == null) { @@ -422,7 +422,7 @@ return new Ease(this.engine, "cubicInOut", infinite, start, end, this.engine.current_frame, duration, invert_repeat, next); }, elasticOut: function(start, end, duration, next, infinite, invert_repeat, amplitude, period) { - var change, _ref; + var change, overshoot, _ref; if (next == null) { next = null; } @@ -438,12 +438,12 @@ if (period == null) { period = null; } - _ref = this._calculateElasticValues(amplitude, period, end - start), amplitude = _ref[0], period = _ref[1], change = _ref[2]; + _ref = this._calculateElasticValues(amplitude, period, end - start), amplitude = _ref[0], period = _ref[1], change = _ref[2], overshoot = _ref[3]; end = start + change; - return new Ease(this.engine, "elasticOut", infinite, start, end, this.engine.current_frame, duration, invert_repeat, next); + return new Ease(this.engine, "elasticOut", infinite, start, end, this.engine.current_frame, duration, invert_repeat, next, amplitude, period, overshoot); }, elasticIn: function(start, end, duration, next, infinite, invert_repeat, amplitude, period) { - var change, _ref; + var change, overshoot, _ref; if (next == null) { next = null; } @@ -459,12 +459,12 @@ if (period == null) { period = null; } - _ref = this._calculateElasticValues(amplitude, period, end - start), amplitude = _ref[0], period = _ref[1], change = _ref[2]; + _ref = this._calculateElasticValues(amplitude, period, end - start), amplitude = _ref[0], period = _ref[1], change = _ref[2], overshoot = _ref[3]; end = start + change; - return new Ease(this.engine, "elasticIn", infinite, start, end, this.engine.current_frame, duration, invert_repeat, next); + return new Ease(this.engine, "elasticIn", infinite, start, end, this.engine.current_frame, duration, invert_repeat, next, amplitude, period, overshoot); }, elasticInOut: function(start, end, duration, next, infinite, invert_repeat, amplitude, period) { - var change, _ref; + var change, overshoot, _ref; if (next == null) { next = null; } @@ -480,9 +480,9 @@ if (period == null) { period = null; } - _ref = this._calculateElasticValues(amplitude, period, end - start, true), amplitude = _ref[0], period = _ref[1], change = _ref[2]; + _ref = this._calculateElasticValues(amplitude, period, end - start, true), amplitude = _ref[0], period = _ref[1], change = _ref[2], overshoot = _ref[3]; end = start + change; - return new Ease(this.engine, "elasticInOut", infinite, start, end, this.engine.current_frame, duration, invert_repeat, next); + return new Ease(this.engine, "elasticInOut", infinite, start, end, this.engine.current_frame, duration, invert_repeat, next, amplitude, period, overshoot); }, expoOut: function(start, end, duration, next, infinite, invert_repeat) { if (next == null) { @@ -691,6 +691,9 @@ this.invert_repeat = invert_repeat; this.next = next; this.params = params; + this.elasticInOut = __bind(this.elasticInOut, this); + this.elasticIn = __bind(this.elasticIn, this); + this.elasticOut = __bind(this.elasticOut, this); this.cubicInOut = __bind(this.cubicInOut, this); this.cubicOut = __bind(this.cubicOut, this); this.cubicIn = __bind(this.cubicIn, this); @@ -858,6 +861,37 @@ } }; + Ease.prototype.elasticOut = function(time) { + var amplitude, overshoot, period; + time = time / duration; + amplitude = this.params[0]; + period = this.params[1]; + overshoot = this.params[2]; + return (amplitude * Math.pow(2, -10 * time)) * Math.sin((time * this.duration - overshoot) * (2 * Math.PI) / period) + this.change + this.start; + }; + + Ease.prototype.elasticIn = function(time) { + var amplitude, overshoot, period; + time = time / duration; + amplitude = this.params[0]; + period = this.params[1]; + overshoot = this.params[2]; + return -(amplitude * Math.pow(2, -10 * time)) * Math.sin((time * this.duration - overshoot) * (2 * Math.PI) / period) + this.start; + }; + + Ease.prototype.elasticInOut = function(time) { + var amplitude, overshoot, period; + time = time / (duration / 2) - 1; + amplitude = this.params[0]; + period = this.params[1]; + overshoot = this.params[2]; + if (time < 1) { + return -0.5 * (amplitude * Math.pow(2, -10 * time)) * Math.sin((time * this.duration - overshoot) * ((2 * Math.PI) / period)) + this.start; + } else { + return amplitude * Math.pow(2, -10 * time) * Math.sin((time * this.duration - overshoot) * (2 * Math.PI) / period) + this.change + this.start; + } + }; + return Ease; })(); diff --git a/radium/engine.ease.coffee b/radium/engine.ease.coffee index 63a0f4e..5e13807 100644 --- a/radium/engine.ease.coffee +++ b/radium/engine.ease.coffee @@ -12,7 +12,7 @@ Engine::ease = else overshoot = period / (2 * Math.PI) * Math.asin(change / amplitude) - return [amplitude, period, change] + return [amplitude, period, change, overshoot] backIn: (start, end, duration, next = null, infinite = false , invert_repeat = false, overshoot = 1.70158) -> return new Ease(this.engine, "backIn", infinite, start, end, @engine.current_frame, duration, invert_repeat, next, overshoot) @@ -40,17 +40,17 @@ Engine::ease = cubicInOut: (start, end, duration, next = null, infinite = false , invert_repeat = false) -> return new Ease(this.engine, "cubicInOut", infinite, start, end, @engine.current_frame, duration, invert_repeat, next) elasticOut: (start, end, duration, next = null, infinite = false , invert_repeat = false, amplitude = null, period = null) -> - [amplitude, period, change] = @_calculateElasticValues(amplitude, period, end - start) + [amplitude, period, change, overshoot] = @_calculateElasticValues(amplitude, period, end - start) end = start + change - return new Ease(this.engine, "elasticOut", infinite, start, end, @engine.current_frame, duration, invert_repeat, next) + return new Ease(this.engine, "elasticOut", infinite, start, end, @engine.current_frame, duration, invert_repeat, next, amplitude, period, overshoot) elasticIn: (start, end, duration, next = null, infinite = false , invert_repeat = false, amplitude = null, period = null) -> - [amplitude, period, change] = @_calculateElasticValues(amplitude, period, end - start) + [amplitude, period, change, overshoot] = @_calculateElasticValues(amplitude, period, end - start) end = start + change - return new Ease(this.engine, "elasticIn", infinite, start, end, @engine.current_frame, duration, invert_repeat, next) + return new Ease(this.engine, "elasticIn", infinite, start, end, @engine.current_frame, duration, invert_repeat, next, amplitude, period, overshoot) elasticInOut: (start, end, duration, next = null, infinite = false , invert_repeat = false, amplitude = null, period = null) -> - [amplitude, period, change] = @_calculateElasticValues(amplitude, period, end - start, true) + [amplitude, period, change, overshoot] = @_calculateElasticValues(amplitude, period, end - start, true) end = start + change - return new Ease(this.engine, "elasticInOut", infinite, start, end, @engine.current_frame, duration, invert_repeat, next) + return new Ease(this.engine, "elasticInOut", infinite, start, end, @engine.current_frame, duration, invert_repeat, next, amplitude, period, overshoot) expoOut: (start, end, duration, next = null, infinite = false , invert_repeat = false) -> return new Ease(this.engine, "expoOut", infinite, start, end, @engine.current_frame, duration, invert_repeat, next) expoIn: (start, end, duration, next = null, infinite = false , invert_repeat = false) -> @@ -213,3 +213,30 @@ class Ease else time = time - 2 return change / 2 * (time * time * time + 2) + begin + + elasticOut: (time) => + time = time / duration + amplitude = @params[0] + period = @params[1] + overshoot = @params[2] + + return (amplitude * Math.pow(2, -10 * time)) * Math.sin((time * @duration - overshoot) * (2 * Math.PI) / period) + @change + @start + + elasticIn: (time) => + time = time / duration + amplitude = @params[0] + period = @params[1] + overshoot = @params[2] + + return -(amplitude * Math.pow(2, -10 * time)) * Math.sin((time * @duration - overshoot) * (2 * Math.PI) / period) + @start + + elasticInOut: (time) => + time = time / (duration / 2) - 1 + amplitude = @params[0] + period = @params[1] + overshoot = @params[2] + + if time < 1 + return -0.5 * (amplitude * Math.pow(2, -10 * time)) * Math.sin((time * @duration - overshoot) * ((2 * Math.PI) / period)) + @start + else + return amplitude * Math.pow(2, -10 * time) * Math.sin((time * @duration - overshoot) * (2 * Math.PI) / period) + @change + @start