Permalink
Browse files

More animation cleanup and fixed

  • Loading branch information...
Koen Bok
Koen Bok committed Mar 12, 2013
1 parent 08504e6 commit ec69c6d3ede83cd98cf968e4240487ee49ce73d4
Showing with 48 additions and 21 deletions.
  1. +10 −4 build/framer.js
  2. +28 −13 src/animation.coffee
  3. +10 −4 template/framer.js
View
@@ -3037,7 +3037,6 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.start = __bind(this.start, this);
var p, _i, _len, _ref, _ref1, _ref2, _ref3;
console.log("Animation.constructor", args);
_ref = this.AnimationProperties;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
p = _ref[_i];
@@ -3062,7 +3061,14 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
_this = this;
this.count++;
this.animationName = "framer-animation-" + this.animationId + "-" + this.count;
console.log("Animation.start " + this.animationName);
if (this.view._currentAnimations.length > 0) {
console.log("Warning: Animation.start " + this.animationName + " already animations running on view " + this.view.name);
}
this.view._currentAnimations.push(this);
if (this._running === true) {
throw Error("Animation.start " + this.animationName + " already running");
}
this._running = true;
propertiesA = this.view.properties;
propertiesB = this.properties;
if (propertiesB.scale) {
@@ -3093,7 +3099,6 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
}
}
this.keyFrameAnimationCSS = this._css();
this.view._currentAnimations.push(this);
css.addStyle(" " + this.keyFrameAnimationCSS + " ." + this.animationName + " { -webkit-animation-duration: " + (this.time / 1000) + "s; -webkit-animation-name: " + this.animationName + "; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; }");
this.view.addClass(this.animationName);
finalize = function() {
@@ -3116,6 +3121,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
Animation.prototype.stop = function() {
var calculatedStyles, computedStyles, k, v, _ref;
this._running = false;
this.view.style["-webkit-animation-play-state"] = "paused";
this.view._matrix = this.view._computedMatrix();
calculatedStyles = {};
@@ -3147,7 +3153,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
};
Animation.prototype._cleanup = function() {
this.view._currentAnimations = _.without(this.view._currentAnimations, [this]);
this.view._currentAnimations = _.without(this.view._currentAnimations, this);
this.view.removeClass(this.animationName);
return this.emit("end");
};
View
@@ -40,7 +40,7 @@ class Animation extends EventEmitter
constructor: (args) ->
console.log "Animation.constructor", args
# console.log "Animation.constructor", args
# Set all properties
for p in @AnimationProperties
@@ -59,8 +59,26 @@ class Animation extends EventEmitter
@count++
@animationName = "framer-animation-#{@animationId}-#{@count}"
console.log "Animation.start #{@animationName}"
# console.log "Animation.start #{@animationName}"
# See if we have other animations running on this view
if @view._currentAnimations.length > 0
console.log "Warning: Animation.start #{@animationName} already animations running on view #{@view.name}"
# We stop all other animations on this view. Maybe we should revisit
# this or give an option to disable it, but for now it makes sens because 1)
# you almost always want this and 2) we don't support simultaneous animations.
# TODO: This breaks stuff
# @view.animateStop()
@view._currentAnimations.push @
if @_running is true
throw Error "Animation.start #{@animationName} already running"
@_running = true
# TODO: test if we are trying to animate something that cannot animate
propertiesA = @view.properties
@@ -99,16 +117,8 @@ class Animation extends EventEmitter
@keyFrameAnimationCSS = @_css()
# for k of @propertiesA
# console.log " .#{k} #{@propertiesA[k]} -> #{@propertiesB[k]}"
# We stop all other animations on this view. Maybe we should revisit
# this or give an option to disable it, but for now it makes sens because 1)
# you almost always want this and 2) we don't support simultaneous animations.
# TODO: This breaks stuff.
# @view.animateStop()
@view._currentAnimations.push @
# if @propertiesA[k] isnt @propertiesB[k]
# console.log " .#{k} #{@propertiesA[k]} -> #{@propertiesB[k]}"
css.addStyle "
#{@keyFrameAnimationCSS}
@@ -141,6 +151,11 @@ class Animation extends EventEmitter
stop: =>
# console.log "Animation.stop #{@animationName}"
@_running = false
@view.style["-webkit-animation-play-state"] = "paused"
# Copy over the calculated properties at this point in the animation so
@@ -175,7 +190,7 @@ class Animation extends EventEmitter
_cleanup: =>
# Remove this animation from the current ones for this view
@view._currentAnimations = _.without @view._currentAnimations, [@]
@view._currentAnimations = _.without @view._currentAnimations, @
@view.removeClass @animationName
@emit "end"
View
@@ -3037,7 +3037,6 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.start = __bind(this.start, this);
var p, _i, _len, _ref, _ref1, _ref2, _ref3;
console.log("Animation.constructor", args);
_ref = this.AnimationProperties;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
p = _ref[_i];
@@ -3062,7 +3061,14 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
_this = this;
this.count++;
this.animationName = "framer-animation-" + this.animationId + "-" + this.count;
console.log("Animation.start " + this.animationName);
if (this.view._currentAnimations.length > 0) {
console.log("Warning: Animation.start " + this.animationName + " already animations running on view " + this.view.name);
}
this.view._currentAnimations.push(this);
if (this._running === true) {
throw Error("Animation.start " + this.animationName + " already running");
}
this._running = true;
propertiesA = this.view.properties;
propertiesB = this.properties;
if (propertiesB.scale) {
@@ -3093,7 +3099,6 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
}
}
this.keyFrameAnimationCSS = this._css();
this.view._currentAnimations.push(this);
css.addStyle(" " + this.keyFrameAnimationCSS + " ." + this.animationName + " { -webkit-animation-duration: " + (this.time / 1000) + "s; -webkit-animation-name: " + this.animationName + "; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; }");
this.view.addClass(this.animationName);
finalize = function() {
@@ -3116,6 +3121,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
Animation.prototype.stop = function() {
var calculatedStyles, computedStyles, k, v, _ref;
this._running = false;
this.view.style["-webkit-animation-play-state"] = "paused";
this.view._matrix = this.view._computedMatrix();
calculatedStyles = {};
@@ -3147,7 +3153,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
};
Animation.prototype._cleanup = function() {
this.view._currentAnimations = _.without(this.view._currentAnimations, [this]);
this.view._currentAnimations = _.without(this.view._currentAnimations, this);
this.view.removeClass(this.animationName);
return this.emit("end");
};

0 comments on commit ec69c6d

Please sign in to comment.