Permalink
Browse files

Fixed animation.reverse with tests

  • Loading branch information...
Koen Bok
Koen Bok committed Apr 27, 2013
1 parent a258ebf commit 2870f60adbfcb2090c04b51c9e989c9e20573b49
Showing with 159 additions and 26 deletions.
  1. +29 −8 build/framer.js
  2. +35 −9 src/animation.coffee
  3. +29 −8 template/framer.js
  4. +66 −1 test/tests/animation.coffee
View
@@ -1,7 +1,7 @@
// Framer v2.0.0b1-6-g0acf5ea (c) 2013 Koen Bok
// Framer v2.0.0b1-14-g9873269 (c) 2013 Koen Bok
// https://github.com/koenbok/Framer
window.FramerVersion = "v2.0.0b1-6-g0acf5ea";
window.FramerVersion = "v2.0.0b1-14-g9873269";
(function(){var require = function (file, cwd) {
@@ -3355,10 +3355,26 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.animationId = AnimationCounter;
}
Animation.define("view", {
get: function() {
return this._view;
},
set: function(view) {
if (view === null || view === this._view) {
return;
}
this._originalProperties = view.properties;
return this._view = view;
}
});
Animation.prototype.start = function(callback) {
var endTime, k, propertiesA, propertiesB, startTime, v, _i, _len, _ref, _ref1;
var animatedProperties, endTime, k, propertiesA, propertiesB, startTime, v, _i, _len, _ref, _ref1;
AnimationList.push(this);
if (this.view === null) {
throw new Error("Animation does not have a view to animate");
}
startTime = new Date().getTime();
this.count++;
this.animationName = "framer-animation-" + this.animationId + "-" + this.count;
@@ -3404,13 +3420,18 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.propertiesB[k] = propertiesB[k];
}
}
if (this.debug) {
for (k in this.propertiesA) {
if (this.propertiesA[k] !== this.propertiesB[k]) {
animatedProperties = [];
for (k in this.propertiesA) {
if (this.propertiesA[k] !== this.propertiesB[k]) {
if (this.debug) {
console.log(" ." + k + " " + this.propertiesA[k] + " -> " + this.propertiesB[k]);
}
animatedProperties.push(k);
}
}
if (animatedProperties.length === 0) {
console.error("Animation[" + this.animationId + "] Warning: nothing to animate");
}
this.keyFrameAnimationCSS = this._css();
this.view.once("webkitAnimationEnd", this._finalize);
css.addStyle(" " + this.keyFrameAnimationCSS + " ." + this.animationName + " { -webkit-animation-duration: " + (this.totalTime / 1000) + "s; -webkit-animation-name: " + this.animationName + "; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-tranform-origin: " + this.origin + "; }");
@@ -3435,10 +3456,10 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
options[p] = this[p];
}
options.properties = {};
_ref1 = this.properties;
_ref1 = this._originalProperties;
for (k in _ref1) {
v = _ref1[k];
options.properties[k] = this.view[k];
options.properties[k] = this._originalProperties[k];
}
return new Animation(options);
};
View
@@ -64,11 +64,26 @@ class Animation extends EventEmitter
AnimationCounter += 1
@animationId = AnimationCounter
@define "view",
get: ->
@_view
set: (view) ->
return if view in [null, @_view]
@_originalProperties = view.properties
@_view = view
start: (callback) =>
AnimationList.push @
########################################################
# Check if we have a view to animate
if @view is null
throw new Error "Animation does not have a view to animate"
########################################################
# Set up some variables to start with
@@ -80,7 +95,7 @@ class Animation extends EventEmitter
console.log "Animation[#{@animationId}].start" if @debug
console.log "Animation[#{@animationId}].view = #{@view.name}" if @debug
console.profile @animationName if @profile
########################################################
# Deal with other animations on this view
@@ -133,11 +148,20 @@ class Animation extends EventEmitter
if propertiesB.hasOwnProperty k
@propertiesA[k] = propertiesA[k]
@propertiesB[k] = propertiesB[k]
if @debug
for k of @propertiesA
if @propertiesA[k] isnt @propertiesB[k]
console.log " .#{k} #{@propertiesA[k]} -> #{@propertiesB[k]}"
# Check which properties actually will animate
animatedProperties = []
for k of @propertiesA
if @propertiesA[k] isnt @propertiesB[k]
console.log " .#{k} #{@propertiesA[k]} -> #{@propertiesB[k]}" if @debug
animatedProperties.push k
# Throw a warning if we have nothing to animate
if animatedProperties.length is 0
console.error "Animation[#{@animationId}] Warning: nothing to animate"
########################################################
@@ -176,13 +200,15 @@ class Animation extends EventEmitter
options = {}
# Copy the animation settings
for p in @AnimationProperties
options[p] = @[p]
options.properties = {}
for k, v of @properties
options.properties[k] = @view[k]
# Add the original view properties to animate to
for k, v of @_originalProperties
options.properties[k] = @_originalProperties[k]
return new Animation options
View
@@ -1,7 +1,7 @@
// Framer v2.0.0b1-6-g0acf5ea (c) 2013 Koen Bok
// Framer v2.0.0b1-14-g9873269 (c) 2013 Koen Bok
// https://github.com/koenbok/Framer
window.FramerVersion = "v2.0.0b1-6-g0acf5ea";
window.FramerVersion = "v2.0.0b1-14-g9873269";
(function(){var require = function (file, cwd) {
@@ -3355,10 +3355,26 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.animationId = AnimationCounter;
}
Animation.define("view", {
get: function() {
return this._view;
},
set: function(view) {
if (view === null || view === this._view) {
return;
}
this._originalProperties = view.properties;
return this._view = view;
}
});
Animation.prototype.start = function(callback) {
var endTime, k, propertiesA, propertiesB, startTime, v, _i, _len, _ref, _ref1;
var animatedProperties, endTime, k, propertiesA, propertiesB, startTime, v, _i, _len, _ref, _ref1;
AnimationList.push(this);
if (this.view === null) {
throw new Error("Animation does not have a view to animate");
}
startTime = new Date().getTime();
this.count++;
this.animationName = "framer-animation-" + this.animationId + "-" + this.count;
@@ -3404,13 +3420,18 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.propertiesB[k] = propertiesB[k];
}
}
if (this.debug) {
for (k in this.propertiesA) {
if (this.propertiesA[k] !== this.propertiesB[k]) {
animatedProperties = [];
for (k in this.propertiesA) {
if (this.propertiesA[k] !== this.propertiesB[k]) {
if (this.debug) {
console.log(" ." + k + " " + this.propertiesA[k] + " -> " + this.propertiesB[k]);
}
animatedProperties.push(k);
}
}
if (animatedProperties.length === 0) {
console.error("Animation[" + this.animationId + "] Warning: nothing to animate");
}
this.keyFrameAnimationCSS = this._css();
this.view.once("webkitAnimationEnd", this._finalize);
css.addStyle(" " + this.keyFrameAnimationCSS + " ." + this.animationName + " { -webkit-animation-duration: " + (this.totalTime / 1000) + "s; -webkit-animation-name: " + this.animationName + "; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; -webkit-tranform-origin: " + this.origin + "; }");
@@ -3435,10 +3456,10 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
options[p] = this[p];
}
options.properties = {};
_ref1 = this.properties;
_ref1 = this._originalProperties;
for (k in _ref1) {
v = _ref1[k];
options.properties[k] = this.view[k];
options.properties[k] = this._originalProperties[k];
}
return new Animation(options);
};
@@ -3,6 +3,9 @@ describe "Animation", ->
AnimatableMatrixProperties = (new Animation view:null).AnimatableMatrixProperties
AnimationTime = 200
halfway = (a, b) ->
a + ((b - a) / 2)
createView = ->
view = new View
@@ -86,4 +89,66 @@ describe "Animation", ->
view[p].should.be.within(5, 15)
callback()
animation.start()
animation.start()
describe "Reverse", ->
it "should reverse upfront", (callback) ->
view = createView()
view.frame = {width:100, height:100, x:100, y:100}
animationA = new Animation
view: view
properties: {x:200}
time: 500
curve: "linear"
animationB = animationA.reverse()
animationA.start()
utils.delay animationA.totalTime / 2.0, ->
view.animateStop()
view.x.should.be.within(140, 160)
animationB.start()
animationB.on "end", ->
view.x.should.equal 100
callback()
it "should reverse afterwards", (callback) ->
view = createView()
view.frame = {width:100, height:100, x:100, y:100}
animationA = new Animation
view: view
properties: {x:200}
time: 250
curve: "linear"
animationA.start()
utils.delay animationA.totalTime / 2.0, ->
view.animateStop()
halfwayX = halfway 100, 200
view.x.should.be.within(halfwayX * 0.8, halfwayX * 1.2)
animationB = animationA.reverse()
animationB.start()
animationB.on "end", ->
view.x.should.equal 100
callback()

0 comments on commit 2870f60

Please sign in to comment.