From b594fe3e05d1fdb0f58c79b72336a436724b292e Mon Sep 17 00:00:00 2001 From: Sven Slootweg Date: Sat, 17 May 2014 11:47:02 +0200 Subject: [PATCH] Allow for stacked easings through recalculation of the change on each easing value update --- compiled/radium.js | 4 +++- easing/core.coffee | 4 ++-- easing/easing.js | 4 ++-- radium/engine.ease.coffee | 10 ++++++++-- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/compiled/radium.js b/compiled/radium.js index 3dfe807..a0f1112 100644 --- a/compiled/radium.js +++ b/compiled/radium.js @@ -872,6 +872,7 @@ this.type = type; this.infinite = infinite; this.start = start; + this.end = end; this.start_frame = start_frame; this.duration = duration; this.invert_repeat = invert_repeat; @@ -903,7 +904,7 @@ this.updateValue = __bind(this.updateValue, this); this.goToNext = __bind(this.goToNext, this); this.func = this[this.type]; - this.change = end - this.start; + this.change = this.end - this.start; this.value = this.start; this.last_updated = this.start_frame; this.finished = false; @@ -925,6 +926,7 @@ }; Ease.prototype.updateValue = function(current_frame) { + this.change = this.end - this.start; if (current_frame >= this.start_frame + this.duration) { if (this.infinite) { this.start_frame = current_frame; diff --git a/easing/core.coffee b/easing/core.coffee index c5d9611..08e7e00 100644 --- a/easing/core.coffee +++ b/easing/core.coffee @@ -20,8 +20,8 @@ $(-> cursor.sprite = engine.getSprite("cursor") cursor.onClickGlobal = (event) -> - @x = @engine.ease.quadInOut(@x, event.x - 41, 15) - @y = @engine.ease.quadInOut(@y, event.y - 41, 15) + @x = @engine.ease.quadInOut(@x, event.x - 41, 35) + @y = @engine.ease.quadInOut(@y, event.y - 41, 35) cursor.onStep = -> return true diff --git a/easing/easing.js b/easing/easing.js index b5cb90d..3782f4a 100644 --- a/easing/easing.js +++ b/easing/easing.js @@ -15,8 +15,8 @@ cursor = engine.createObject("cursor"); cursor.sprite = engine.getSprite("cursor"); cursor.onClickGlobal = function(event) { - this.x = this.engine.ease.quadInOut(this.x, event.x - 41, 15); - return this.y = this.engine.ease.quadInOut(this.y, event.y - 41, 15); + this.x = this.engine.ease.quadInOut(this.x, event.x - 41, 35); + return this.y = this.engine.ease.quadInOut(this.y, event.y - 41, 35); }; cursor.onStep = function() { return true; diff --git a/radium/engine.ease.coffee b/radium/engine.ease.coffee index 1e00866..8d4b3c3 100644 --- a/radium/engine.ease.coffee +++ b/radium/engine.ease.coffee @@ -86,9 +86,9 @@ Engine::ease = class Ease # Port based on https://github.com/jimjeffers/Easie. I don't think this qualifies as a "bad thing" :) - constructor: (@engine, @type, @infinite, @start, end, @start_frame, @duration, @invert_repeat, @next, @params...) -> + constructor: (@engine, @type, @infinite, @start, @end, @start_frame, @duration, @invert_repeat, @next, @params...) -> @func = this[@type] - @change = end - @start + @change = @end - @start @value = @start @last_updated = @start_frame @finished = false @@ -113,6 +113,12 @@ class Ease @next = @next.next updateValue: (current_frame) => + # We recalculate here, to deal with 'stacked' easings. If we don't do this, letting multiple + # easings operate on each other will result in the final value being different from 'end', + # because the change was calculated once based on the value of the previous easing *at that + # moment*, rather than the actual value. + @change = @end - @start + if current_frame >= @start_frame + @duration if @infinite @start_frame = current_frame