Skip to content
Permalink
Browse files

Fixed animation.reverse with tests

  • Loading branch information
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
@@ -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);
};
@@ -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

@@ -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.