Permalink
Browse files

Animate css properties

  • Loading branch information...
Koen Bok
Koen Bok committed Mar 12, 2013
1 parent 250cb04 commit 2556b6fe2dce0a93f5b7f0dd78ac0f42ce9142f6
Showing with 163 additions and 38 deletions.
  1. +56 −13 build/framer.js
  2. +50 −11 src/animation.coffee
  3. +1 −1 src/views/view.coffee
  4. +56 −13 template/framer.js
@@ -404,7 +404,7 @@ require.define("/src/css.coffee",function(require,module,exports,__dirname,__fil
return _STYLESHEET.innerHTML += css;
};
exports.addStyle(".uilayer { display: block; visibility: visible; position: absolute; top:auto; right:auto; bottom:auto; left:auto; width:auto; height:auto; overflow: visible; z-index:0; opacity:1; box-sizing: border-box; -webkit-box-sizing: border-box;}.uilayer.textureBacked { -webkit-transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); -webkit-transform-origin: 50% 50% 0%; -webkit-backface-visibility: hidden; -webkit-transform-style: flat;}.uilayer.animated { -webkit-transition-duration: 500ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -webkit-transition-property: none;}");
exports.addStyle(".uilayer { display: block; visibility: visible; position: absolute; top:auto; right:auto; bottom:auto; left:auto; width:auto; height:auto; overflow: visible; z-index:0; opacity:1; box-sizing: border-box; -webkit-box-sizing: border-box;}.uilayer.textureBacked { -webkit-transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1); -webkit-transform-origin: 50% 50% 0%; -webkit-backface-visibility: preserve-3d; -webkit-transform-style: flat;}.uilayer.animated { -webkit-transition-duration: 500ms; -webkit-transition-timing-function: linear; -webkit-transition-delay: 0; -webkit-transition-property: none;}");
}).call(this);
@@ -1050,7 +1050,7 @@ require.define("/src/views/view.coffee",function(require,module,exports,__dirnam
View.define("opacity", {
get: function() {
return this.style.opacity || 1;
return parseFloat(this.style.opacity || 1);
},
set: function(value) {
this.style.opacity = value;
@@ -3012,7 +3012,13 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
Animation.prototype.AnimationProperties = ["view", "curve", "time", "origin", "tolerance", "precision"];
Animation.prototype.AnimatableProperties = ["x", "y", "z", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ"];
Animation.prototype.AnimatableCSSProperties = {
opacity: "",
width: "px",
height: "px"
};
Animation.prototype.AnimatableMatrixProperties = ["x", "y", "z", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ"];
function Animation(args) {
this.cleanup = __bind(this.cleanup, this);
@@ -3021,7 +3027,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.start = __bind(this.start, this);
var k, p, propertiesA, propertiesB, _i, _j, _len, _len1, _ref, _ref1, _ref2, _ref3, _ref4;
var k, p, propertiesA, propertiesB, v, _i, _j, _len, _len1, _ref, _ref1, _ref2, _ref3, _ref4, _ref5;
_ref = this.AnimationProperties;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
p = _ref[_i];
@@ -3049,7 +3055,7 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
}
this.propertiesA = {};
this.propertiesB = {};
_ref4 = this.AnimatableProperties;
_ref4 = this.AnimatableMatrixProperties;
for (_j = 0, _len1 = _ref4.length; _j < _len1; _j++) {
k = _ref4[_j];
this.propertiesA[k] = propertiesA[k];
@@ -3059,17 +3065,37 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.propertiesB[k] = propertiesA[k];
}
}
_ref5 = this.AnimatableCSSProperties;
for (k in _ref5) {
v = _ref5[k];
if (propertiesB.hasOwnProperty(k)) {
this.propertiesA[k] = propertiesA[k];
this.propertiesB[k] = propertiesB[k];
}
}
this.keyFrameAnimationCSS = this._css();
}
Animation.prototype.start = function(callback) {
var finalize,
var finalize, k,
_this = this;
console.log("Animation.start " + this.animationName);
for (k in this.propertiesA) {
console.log(" ." + k + " " + this.propertiesA[k] + " -> " + this.propertiesB[k]);
}
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; }");
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() {
var calculatedStyles, v, _ref;
_this.view._matrix = utils.extend(new Matrix(), _this.propertiesB);
calculatedStyles = {};
_ref = _this.AnimatableCSSProperties;
for (k in _ref) {
v = _ref[k];
calculatedStyles[k] = _this.propertiesB[k] + v;
}
_this.view.style = calculatedStyles;
if (typeof callback === "function") {
callback();
}
@@ -3079,8 +3105,17 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
};
Animation.prototype.stop = function() {
var calculatedStyles, computedStyles, k, v, _ref;
this.view.style["-webkit-animation-play-state"] = "paused";
this.view._matrix = this.view._computedMatrix();
calculatedStyles = {};
computedStyles = this.view.computedStyles;
_ref = this.AnimatableCSSProperties;
for (k in _ref) {
v = _ref[k];
calculatedStyles[k] = computedStyles;
}
this.view.style = calculatedStyles;
return this.cleanup();
};
@@ -3104,16 +3139,24 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
deltas[propertyName] = (this.propertiesB[propertyName] - this.propertiesA[propertyName]) / 100.0;
}
this.curveValues.map(function(springValue) {
var m, position, _ref1;
var m, position, unit, _i, _len, _ref1, _ref2;
position = stepIncrement * stepDelta;
cssString.push("\t" + (position.toFixed(2)) + "%\t{ -webkit-transform: ");
m = new Matrix();
_ref1 = _this.propertiesA;
for (propertyName in _ref1) {
value = _ref1[propertyName];
m[propertyName] = springValue * deltas[propertyName] + _this.propertiesA[propertyName];
_ref1 = _this.AnimatableMatrixProperties;
for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
propertyName = _ref1[_i];
value = springValue * deltas[propertyName] + _this.propertiesA[propertyName];
m[propertyName] = value;
}
cssString.push(m.matrix().cssValues() + "; ");
_ref2 = _this.AnimatableCSSProperties;
for (propertyName in _ref2) {
unit = _ref2[propertyName];
value = springValue * deltas[propertyName] + _this.propertiesA[propertyName];
cssString.push("" + propertyName + ":" + (value.toFixed(5)) + unit + "; ");
}
cssString.push(m.matrix().cssValues() + "; }\n");
cssString.push("}\n");
return stepIncrement++;
});
cssString.push("}\n");
@@ -24,10 +24,15 @@ parseCurve = (a, prefix) ->
class Animation extends EventEmitter
AnimationProperties: ["view", "curve", "time", "origin", "tolerance", "precision"]
AnimatableProperties: [
AnimatableCSSProperties: {
opacity: "",
width: "px",
height: "px",
}
AnimatableMatrixProperties: [
"x", "y", "z",
"scaleX", "scaleY", "scaleZ", #"scale",
"rotateX", "rotateY", "rotateZ", #"rotate"
"scaleX", "scaleY", "scaleZ", # "scale",
"rotateX", "rotateY", "rotateZ", # "rotate"
] # width, height, opacity
constructor: (args) ->
@@ -65,7 +70,10 @@ class Animation extends EventEmitter
@propertiesA = {}
@propertiesB = {}
for k in @AnimatableProperties
# Build up the matrix animation properties
for k in @AnimatableMatrixProperties
@propertiesA[k] = propertiesA[k]
@@ -74,15 +82,25 @@ class Animation extends EventEmitter
else
@propertiesB[k] = propertiesA[k]
# console.log "#{k} #{@propertiesA[k]} -> #{@propertiesB[k]}"
# Build up the css animation properties
for k, v of @AnimatableCSSProperties
if propertiesB.hasOwnProperty k
@propertiesA[k] = propertiesA[k]
@propertiesB[k] = propertiesB[k]
@keyFrameAnimationCSS = @_css()
# console.log @keyFrameAnimationCSS
start: (callback) =>
# console.log "Animation.start #{@animationName}"
console.log "Animation.start #{@animationName}"
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)
@@ -101,16 +119,22 @@ class Animation extends EventEmitter
-webkit-animation-name: #{@animationName};
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: both;
}"
@view.addClass @animationName
finalize = =>
# Copy over the end state properties for this animation so we can safely
# remove the animation.
@view._matrix = utils.extend new Matrix(), @propertiesB
# Copy over the end state css properties
calculatedStyles = {}
for k, v of @AnimatableCSSProperties
calculatedStyles[k] = @propertiesB[k] + v
@view.style = calculatedStyles
callback?()
@cleanup()
@@ -124,6 +148,13 @@ class Animation extends EventEmitter
# we can safely remove it without the element jumping around.
@view._matrix = @view._computedMatrix()
# Copy over the end state css properties
calculatedStyles = {}
computedStyles = @view.computedStyles
for k, v of @AnimatableCSSProperties
calculatedStyles[k] = computedStyles
@view.style = calculatedStyles
@cleanup()
cleanup: =>
@@ -155,16 +186,24 @@ class Animation extends EventEmitter
cssString.push "\t#{position.toFixed(2)}%\t{ -webkit-transform: "
# Add the matrix based values
m = new Matrix()
for propertyName, value of @propertiesA
m[propertyName] = springValue * deltas[propertyName] + @propertiesA[propertyName]
for propertyName in @AnimatableMatrixProperties
value = springValue * deltas[propertyName] + @propertiesA[propertyName]
m[propertyName] = value
cssString.push m.matrix().cssValues() + "; "
for propertyName, unit of @AnimatableCSSProperties
value = springValue * deltas[propertyName] + @propertiesA[propertyName]
cssString.push "#{propertyName}:#{value.toFixed 5}#{unit}; "
cssString.push m.matrix().cssValues() + "; }\n"
cssString.push "}\n"
stepIncrement++
cssString.push "}\n"
return cssString.join ""
@@ -247,7 +247,7 @@ class View extends Frame
@define "opacity"
get: ->
@style.opacity or 1
parseFloat @style.opacity or 1
set: (value) ->
@style.opacity = value
@style["opacity"] = value
Oops, something went wrong.

0 comments on commit 2556b6f

Please sign in to comment.