Permalink
Browse files

Merge branch 'master' of github.com:koenbok/Framer

  • Loading branch information...
koenbok committed Jun 19, 2014
2 parents 4235f0c + 871eefe commit cef87066f0ff842e10850a1325561e7cd5a8d573
Showing with 65 additions and 6 deletions.
  1. +20 −3 framer/Animation.coffee
  2. +4 −0 framer/Layer.coffee
  3. +4 −1 framer/LayerStyle.coffee
  4. +35 −0 test/tests/LayerAnimationTest.coffee
  5. +2 −2 test/tests/LayerTest.coffee
@@ -21,6 +21,20 @@ AnimatorClasses =
AnimatorClasses["spring"] = AnimatorClasses["spring-rk4"]
AnimatorClasses["cubic-bezier"] = AnimatorClasses["bezier-curve"]
numberRE = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/
relativePropertyRE = new RegExp('^(?:([+-])=|)(' + numberRE.source + ')([a-z%]*)$', 'i')
isRelativeProperty = (v) ->
_.isString(v) and relativePropertyRE.test(v)
evaluateRelativeProperty = (target, k, v) ->
[match, sign, number, unit, rest...] = relativePropertyRE.exec(v)
if sign
return target[k] + (sign + 1) * number
else
return +number
_runningAnimations = []
# Todo: this would normally be BaseClass but the properties keyword
@@ -65,7 +79,7 @@ class exports.Animation extends EventEmitter
# Only animate numeric properties for now
for k, v of properties
animatableProperties[k] = v if _.isNumber v
animatableProperties[k] = v if _.isNumber(v) or isRelativeProperty(v)
animatableProperties
@@ -133,16 +147,19 @@ class exports.Animation extends EventEmitter
stateA = @_currentState()
stateB = {}
# Filter out the properties that are equal
for k, v of @options.properties
# Evaluate relative properties
v = evaluateRelativeProperty(target, k, v) if isRelativeProperty(v)
# Filter out the properties that are equal
stateB[k] = v if stateA[k] != v
if _.isEqual stateA, stateB
console.warn "Nothing to animate"
if @options.debug
console.log "Animation.start"
console.log "\t#{k}: #{stateA[k]} -> #{stateB[k]}" for k, v of stateB
console.log "\t#{k}: #{stateA[k]} -> #{stateB[k]}" for k, v of stateB
@_animator.on "start", => @emit "start"
@_animator.on "stop", => @emit "stop"
@@ -123,6 +123,10 @@ class exports.Layer extends BaseClass
@define "scaleZ", layerProperty "scaleZ", "webkitTransform", 1, _.isNumber
@define "scale", layerProperty "scale", "webkitTransform", 1, _.isNumber
@define "skewX", layerProperty "skewX", "webkitTransform", 0, _.isNumber
@define "skewY", layerProperty "skewY", "webkitTransform", 0, _.isNumber
@define "skew", layerProperty "skew", "webkitTransform", 0, _.isNumber
# @define "scale",
# get: -> (@scaleX + @scaleY + @scaleZ) / 3.0
# set: (value) -> @scaleX = @scaleY = @scaleZ = value
@@ -88,7 +88,10 @@ exports.LayerStyle =
"
translate3d(#{layer.x}px,#{layer.y}px,#{layer.z}px)
scale(#{layer.scale})
scale3d(#{layer.scaleX},#{layer.scaleY},#{layer.scaleZ})
scale3d(#{layer.scaleX},#{layer.scaleY},#{layer.scaleZ})
skew(#{layer.skew}deg,#{layer.skew}deg)
skewX(#{layer.skewX}deg)
skewY(#{layer.skewY}deg)
rotateX(#{layer.rotationX}deg)
rotateY(#{layer.rotationY}deg)
rotateZ(#{layer.rotationZ}deg)
@@ -49,6 +49,41 @@ describe "LayerAnimation", ->
layer[p].should.equal 100
done()
it "should animate property #{p} with positive offset from current value", (done) ->
layer = new Layer()
layer[p] = 50
properties = {}
properties[p] = '+=50'
layer.animate
properties: properties
curve: "linear"
time: AnimationTime
layer.on "end", ->
layer[p].should.equal 100
done()
it "should animate property #{p} with negative offset from current value", (done) ->
layer = new Layer()
layer[p] = 50
properties = {}
properties[p] = '+=50'
layer.animate
properties: properties
curve: "linear"
time: AnimationTime
layer.on "end", ->
layer[p].should.equal 100
done()
describe "Basic", ->
it "should stop", (done) ->
@@ -84,7 +84,7 @@ describe "Layer", ->
layer.y.should.equal 50
# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 0)"
layer.style.webkitTransform.should.equal "translate3d(100px, 50px, 0px) scale(1) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
layer.style.webkitTransform.should.equal "translate3d(100px, 50px, 0px) scale(1) scale3d(1, 1, 1) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
it "should set scale", ->
@@ -95,7 +95,7 @@ describe "Layer", ->
layer.scaleZ = 100
# layer.style.webkitTransform.should.equal "matrix(1, 0, 0, 1, 100, 50)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(100, 100, 100) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
layer.style.webkitTransform.should.equal "translate3d(0px, 0px, 0px) scale(1) scale3d(100, 100, 100) skew(0deg, 0deg) skewX(0deg) skewY(0deg) rotateX(0deg) rotateY(0deg) rotateZ(0deg)"
it "should set origin", ->

0 comments on commit cef8706

Please sign in to comment.