Skip to content
Permalink
Browse files

rotation and scale

  • Loading branch information...
Koen Bok
Koen Bok committed Mar 10, 2013
1 parent 589a47e commit b1d8b153ce8431d940694e46d2fec48bf2cf2e53
Showing with 82 additions and 138 deletions.
  1. +29 −50 build/framer.js
  2. +20 −37 src/animation.coffee
  3. +2 −0 src/init.coffee
  4. +2 −1 src/views/view.coffee
  5. +29 −50 template/framer.js
@@ -1309,6 +1309,8 @@ require.define("/src/views/view.coffee",function(require,module,exports,__dirnam
rotateX: 0,
rotateY: 0,
rotateZ: 0,
rotate: 0,
scale: 1.0,
scaleX: 1.0,
scaleY: 1.0,
scaleZ: 1.0,
@@ -2791,8 +2793,11 @@ require.define("/src/primitives/matrix.coffee",function(require,module,exports,_
_ = require("underscore");

WebKitCSSMatrix.prototype.cssValues = function() {
var values;
return values = " matrix3d( " + this.m11 + ", " + this.m12 + ", " + this.m13 + ", " + this.m14 + ", " + this.m21 + ", " + this.m22 + ", " + this.m23 + ", " + this.m24 + ", " + this.m31 + ", " + this.m32 + ", " + this.m33 + ", " + this.m34 + ", " + this.m41 + ", " + this.m42 + ", " + this.m43 + ", " + this.m44 + ")";
var r, values;
r = function(v) {
return v.toFixed(3);
};
return values = " matrix3d( " + (r(this.m11)) + ", " + (r(this.m12)) + ", " + (r(this.m13)) + ", " + (r(this.m14)) + ", " + (r(this.m21)) + ", " + (r(this.m22)) + ", " + (r(this.m23)) + ", " + (r(this.m24)) + ", " + (r(this.m31)) + ", " + (r(this.m32)) + ", " + (r(this.m33)) + ", " + (r(this.m34)) + ", " + (r(this.m41)) + ", " + (r(this.m42)) + ", " + (r(this.m43)) + ", " + (r(this.m44)) + ")";
};

Matrix = (function() {
@@ -2832,7 +2837,7 @@ require.define("/src/primitives/matrix.coffee",function(require,module,exports,_

Matrix.define("scaleX", {
get: function() {
return this._scaleX || 0;
return this._scaleX || 1;
},
set: function(value) {
return this._scaleX = value;
@@ -2841,7 +2846,7 @@ require.define("/src/primitives/matrix.coffee",function(require,module,exports,_

Matrix.define("scaleY", {
get: function() {
return this._scaleY || 0;
return this._scaleY || 1;
},
set: function(value) {
return this._scaleY = value;
@@ -2850,7 +2855,7 @@ require.define("/src/primitives/matrix.coffee",function(require,module,exports,_

Matrix.define("scaleZ", {
get: function() {
return this._scaleZ || 0;
return this._scaleZ || 1;
},
set: function(value) {
return this._scaleZ = value;
@@ -2896,10 +2901,10 @@ require.define("/src/primitives/matrix.coffee",function(require,module,exports,_

Matrix.define("rotate", {
get: function() {
return this._rotateZ || 0;
return this.rotateZ;
},
set: function(value) {
return this._rotateZ = value;
return this.rotateZ = value;
}
});

@@ -3071,46 +3076,7 @@ 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", "scale", "scaleX", "scaleY", "scaleZ", "rotate", "rotateX", "rotateY", "rotateZ"];

Animation.prototype.TransformPropertyMap = {
x: {
name: "translateX",
unit: "px"
},
y: {
name: "translateY",
unit: "px"
},
z: {
name: "translateZ",
unit: "px"
},
rotateX: {
name: "rotateX",
unit: "deg"
},
rotateY: {
name: "rotateY",
unit: "deg"
},
rotateZ: {
name: "rotateZ",
unit: "deg"
},
scaleX: {
name: "scaleX",
unit: ""
},
scaleY: {
name: "scaleY",
unit: ""
},
scaleZ: {
name: "scaleZ",
unit: ""
}
};
Animation.prototype.AnimatableProperties = ["x", "y", "z", "scaleX", "scaleY", "scaleZ", "rotateX", "rotateY", "rotateZ"];

function Animation(args) {
this.stop = __bind(this.stop, this);
@@ -3136,6 +3102,13 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
this.animationName = "framer-animation-" + (utils.uuid().slice(0, 9));
propertiesA = this.view.properties;
propertiesB = args.properties;
if (propertiesB.scale) {
propertiesB.scaleX = propertiesB.scale;
propertiesB.scaleY = propertiesB.scale;
}
if (propertiesB.rotate) {
propertiesB.rotateZ = propertiesB.rotate;
}
this.propertiesA = {};
this.propertiesB = {};
_ref4 = this.AnimatableProperties;
@@ -3157,14 +3130,16 @@ require.define("/src/animation.coffee",function(require,module,exports,__dirname
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["class"] += " " + this.animationName;
finalize = function() {
var k, v, _ref;
var k, m, v, _ref;
_this.view._element.removeEventListener("webkitAnimationEnd", finalize);
_this.view.removeClass(_this.animationName);
m = new Matrix();
_ref = _this.propertiesB;
for (k in _ref) {
v = _ref[k];
_this.view[k] = _this.propertiesB[k];
m[k] = _this.propertiesB[k];
}
m.set(_this.view);
_this.emit("end");
return typeof callback === "function" ? callback() : void 0;
};
@@ -3646,7 +3621,7 @@ require.define("/src/views/imageview.coffee",function(require,module,exports,__d
});

require.define("/src/init.coffee",function(require,module,exports,__dirname,__filename,process,global){(function() {
var Animation, Frame, Global, ImageView, ScrollView, View, ViewList, css, debug, k, utils, v;
var Animation, Frame, Global, ImageView, Matrix, ScrollView, View, ViewList, css, debug, k, utils, v;

css = require("./css");

@@ -3666,6 +3641,8 @@ require.define("/src/init.coffee",function(require,module,exports,__dirname,__fi

Frame = require("./primitives/frame").Frame;

Matrix = require("./primitives/matrix").Matrix;

Global = {};

Global.View = View;
@@ -3678,6 +3655,8 @@ require.define("/src/init.coffee",function(require,module,exports,__dirname,__fi

Global.Frame = Frame;

Global.Matrix = Matrix;

Global.utils = utils;

Global.ViewList = ViewList;
@@ -23,20 +23,12 @@ parseCurve = (a, prefix) ->
class Animation extends EventEmitter

AnimationProperties: ["view", "curve", "time", "origin", "tolerance", "precision"]
AnimatableProperties: ["x", "y", "z", "scale", "scaleX", "scaleY", "scaleZ", "rotate", "rotateX", "rotateY", "rotateZ"] # z, width, height, opacity

TransformPropertyMap:
x: {name: "translateX", unit: "px"}
y: {name: "translateY", unit: "px"}
z: {name: "translateZ", unit: "px"}
rotateX: {name: "rotateX", unit: "deg"}
rotateY: {name: "rotateY", unit: "deg"}
rotateZ: {name: "rotateZ", unit: "deg"}
scaleX: {name: "scaleX", unit: ""}
scaleY: {name: "scaleY", unit: ""}
scaleZ: {name: "scaleZ", unit: ""}
# scale: {name: "scale", unit: ""}

AnimatableProperties: [
"x", "y", "z",
"scaleX", "scaleY", "scaleZ", #"scale",
"rotateX", "rotateY", "rotateZ", #"rotate"
] # width, height, opacity

constructor: (args) ->

# Set all properties
@@ -49,19 +41,26 @@ class Animation extends EventEmitter
@curve ?= "linear"
@precision ?= 30


@curveValues = @_parseCurve @curve

@animationName = "framer-animation-#{utils.uuid()[..8]}"


# Clean up the animation wishes

# TODO: test if we are trying to animate something that cannot animate

propertiesA = @view.properties
propertiesB = args.properties

# Set the derived properties scale and rotation
if propertiesB.scale
propertiesB.scaleX = propertiesB.scale
propertiesB.scaleY = propertiesB.scale

if propertiesB.rotate
propertiesB.rotateZ = propertiesB.rotate


@propertiesA = {}
@propertiesB = {}

@@ -74,21 +73,16 @@ class Animation extends EventEmitter
else
@propertiesB[k] = propertiesA[k]

#console.log "#{k} #{@propertiesA[k]} -> #{@propertiesB[k]}"
# console.log "#{k} #{@propertiesA[k]} -> #{@propertiesB[k]}"

@keyFrameAnimationCSS = @_css()

start: (callback) =>

# console.log "Animation.start #{@animationName}"

# console.log @keyFrameAnimationCSS


# TODO: see if other animations are running and cancel them



css.addStyle "
#{@keyFrameAnimationCSS}
@@ -103,27 +97,16 @@ class Animation extends EventEmitter
@view.class += " #{@animationName}"

finalize = =>
# console.log "Animation.end #{@animationName}"

@view._element.removeEventListener "webkitAnimationEnd", finalize

@view.removeClass @animationName
#
for k, v of @propertiesB
# console.log "#{k} #{@propertiesB[k]}"
@view[k] = @propertiesB[k]

# @view._matrix.logValues()




# console.log "@propertiesB", @propertiesB

m = new Matrix()

# @view.properties = @propertiesB

for k, v of @propertiesB
m[k] = @propertiesB[k]

m.set @view

@emit "end"
callback?()
@@ -11,6 +11,7 @@ debug = require "./debug"
{Animation} = require "./animation"

{Frame} = require "./primitives/frame"
{Matrix} = require "./primitives/matrix"

Global = {}
Global.View = View
@@ -20,6 +21,7 @@ Global.ImageView = ImageView
# Global.TextView = TextView
Global.Animation = Animation
Global.Frame = Frame
Global.Matrix = Matrix

Global.utils = utils
Global.ViewList = ViewList
@@ -470,11 +470,12 @@ class View extends Frame
View.Properties = utils.extend Frame.Properties,
frame: null
clip: true
# scale: 1.0
opacity: 1.0
rotateX: 0
rotateY: 0
rotateZ: 0
rotate: 0
scale: 1.0
scaleX: 1.0
scaleY: 1.0
scaleZ: 1.0
Oops, something went wrong.

0 comments on commit b1d8b15

Please sign in to comment.
You can’t perform that action at this time.