Permalink
Browse files

Merge pull request #385 from koenbok/feature/animation-refactor

add `animateTo` with different argument behaviour
  • Loading branch information...
nvh committed Jul 22, 2016
2 parents 67ae9bd + 83e8623 commit 5c3994f4c99d57dc1be227bfaaf90cfcd3dd3d79
Showing with 126 additions and 57 deletions.
  1. +18 −5 framer/Layer.coffee
  2. +3 −4 framer/LayerStates.coffee
  3. +10 −11 test/tests/ContextTest.coffee
  4. +92 −34 test/tests/LayerAnimationTest.coffee
  5. +3 −3 test/tests/LayerTest.coffee
@@ -879,12 +879,25 @@ class exports.Layer extends BaseClass
## ANIMATION
animate: (options) ->
# console.warn "Layer.animate is deprecated: please use Layer.animateTo instead"
properties = options.properties
delete options.properties
@animateTo(properties, options)
animateTo: (properties,options={}) ->
_.defaults(options,properties.options)
delete properties.options
options.properties = Animation.filterAnimatableProperties(properties)
options.layer = @
start = options.start
start ?= true
delete options.start
options.layer = @
if options.instant
options.animate = false
delete options.instant
animation = new Animation options
animation.start() if start
animation
@@ -1007,20 +1020,20 @@ class exports.Layer extends BaseClass
# would break nested ScrollComponents.
if @_cancelClickEventInDragSession and not @_draggable
if eventName in [
Events.Click, Events.Tap, Events.TapStart, Events.TapEnd,
Events.LongPress, Events.LongPressStart, Events.LongPressEnd]
parentDraggableLayer = @_parentDraggableLayer()
if parentDraggableLayer
# If we had a reasonable scrolling offset we cancel the click
offset = parentDraggableLayer.draggable.offset
return if Math.abs(offset.x) > @_cancelClickEventInDragSessionOffset
return if Math.abs(offset.y) > @_cancelClickEventInDragSessionOffset
# If there is still some velocity (scroll is moving) we cancel the click
velocity = parentDraggableLayer.draggable.velocity
return if Math.abs(velocity.x) > @_cancelClickEventInDragSessionVelocity
@@ -80,7 +80,7 @@ class exports.LayerStates extends BaseClass
# Allow dynamic properties as functions
if _.isFunction(value)
value = value.call(@layer, @layer, propertyName, stateName)
# Set the new value
properties[propertyName] = value
@@ -93,7 +93,7 @@ class exports.LayerStates extends BaseClass
# We can animate numbers
if _.isNumber(v)
animatablePropertyKeys.push(k)
# We can animate colors
else if Color.isColorObject(v)
animatablePropertyKeys.push(k)
@@ -109,10 +109,9 @@ class exports.LayerStates extends BaseClass
# If there are, we start the animation here
animationOptions ?= @animationOptions
animationOptions.properties = properties
@_animation?.stop()
@_animation = @layer.animate(animationOptions)
@_animation = @layer.animateTo(properties,animationOptions)
# Once the animation is done, we set all the keys that we could not animate
@_animation.once "stop", =>
@@ -132,9 +132,8 @@ describe "Context", ->
context.run ->
layer = new Layer
animation = layer.animate
properties:
x: 100
animation = layer.animateTo
x: 100
# We should have a click listener
context.animations.should.eql [animation]
@@ -163,11 +162,11 @@ describe "Context", ->
describe "Layers", ->
it "should add and remove layers", ->
context = new Framer.Context(name:"Test")
context.run ->
layerA = new Layer
layerB = new Layer
layerC = new Layer
@@ -178,11 +177,11 @@ describe "Context", ->
context.layers.should.eql []
it "should list root layers", ->
context = new Framer.Context(name:"Test")
context.run ->
layerA = new Layer
layerB = new Layer parent:layerA
@@ -193,15 +192,15 @@ describe "Context", ->
it "should get layers by id", ->
context = new Framer.Context(name:"Test")
context.run ->
layerA = new Layer
context.layerForId(layerA.id).should.equal layerA
it "should get layers by element", ->
context = new Framer.Context(name:"Test")
context.run ->
layerA = new Layer
context.layerForElement(layerA._element).should.equal layerA
@@ -33,7 +33,7 @@ describe "LayerAnimation", ->
AnimationProperties.map (p) ->
it "should animate property #{p}", (done) ->
it "should still support the deprecated API for property #{p}", (done) ->
layer = new Layer()
@@ -49,6 +49,38 @@ describe "LayerAnimation", ->
layer[p].should.equal 100
done()
it "should animate property #{p}", (done) ->
layer = new Layer()
properties = {}
properties[p] = 100
options =
curve: "linear"
time: AnimationTime
animation = layer.animateTo properties, options
animation.options.curve.should.equal "linear"
layer.on "end", ->
layer[p].should.equal 100
done()
it "should support options key for property #{p}", (done) ->
layer = new Layer()
properties = {}
properties[p] = 100
properties.options =
curve: "linear"
time: AnimationTime
animation = layer.animateTo properties
animation.options.curve.should.equal "linear"
layer.on "end", ->
layer[p].should.equal 100
done()
it "should animate property #{p} with positive offset from current value", (done) ->
layer = new Layer()
@@ -57,11 +89,11 @@ describe "LayerAnimation", ->
properties = {}
properties[p] = '+=50'
layer.animate
properties: properties
layer.animateTo properties,
curve: "linear"
time: AnimationTime
layer.on "end", ->
layer[p].should.equal 100
done()
@@ -74,24 +106,25 @@ describe "LayerAnimation", ->
properties = {}
properties[p] = '+=50'
layer.animate
properties: properties
layer.animateTo properties,
curve: "linear"
time: AnimationTime
layer.on "end", ->
layer[p].should.equal 100
done()
it "should animate dynamic properties", (done) ->
layer = new Layer()
layer.animate
properties:
scale: -> layer.scale + 1
curve: "linear"
time: AnimationTime
layer.animateTo
scale: -> layer.scale + 1
options:
curve: "linear"
time: AnimationTime
layer.on "end", ->
layer.scale.should.equal 2
@@ -102,11 +135,11 @@ describe "LayerAnimation", ->
color = "red"
layer = new Layer()
layer.animate
properties:
backgroundColor: color
curve: "linear"
time: AnimationTime
layer.animateTo
backgroundColor: color
options:
curve: "linear"
time: AnimationTime
layer.on "end", ->
layer.backgroundColor.toName().should.eql color
@@ -160,9 +193,10 @@ describe "LayerAnimation", ->
it "should list running animations", ->
layer = new Layer()
animation = layer.animate
properties: {x: 100}
time: 0.5
animation = layer.animateTo
x: 100
options:
time: 0.5
(animation in layer.animations()).should.be.true
layer.animateStop()
@@ -172,9 +206,10 @@ describe "LayerAnimation", ->
layer = new Layer()
animation = layer.animate
properties: {x: 100}
time: 0.5
animation = layer.animateTo
x: 100
options:
time: 0.5
count = 0
@@ -191,9 +226,10 @@ describe "LayerAnimation", ->
it "should tell you if animations are running", ->
layer = new Layer()
animation = layer.animate
properties: {x: 100}
time: 0.5
animation = layer.animateTo
x: 100
options:
time: 0.5
layer.isAnimating.should.equal(true)
layer.animateStop()
@@ -313,22 +349,25 @@ describe "LayerAnimation", ->
layerA = new Layer width:80, height:80
layerA.name = "layerA"
layerA.animate
properties: {y:300}
time: 2 * AnimationTime
layerA.animateTo
y:300
options:
time: 2 * AnimationTime
layerB = new Layer width:80, height:80, x:100, backgroundColor:"red"
layerB.name = "layerB"
layerB.animate
properties: {y:300}
time: 5 * AnimationTime
layerB.animateTo
y:300
options:
time: 5 * AnimationTime
layerC = new Layer width:80, height:80, x:200, backgroundColor:"orange"
layerC.name = "layerC"
layerC.animate
properties: {y:300}
time: 2 * AnimationTime
curve: "cubic-bezier"
layerC.animateTo
y:300
options:
time: 2 * AnimationTime
curve: "cubic-bezier"
readyLayers = []
@@ -474,3 +513,22 @@ describe "LayerAnimation", ->
@layer.x.should.equal 100
calledEvents.should.eql(["start", "end", "stop"])
it "should listen to instant: true to disable animation", ->
animation = @layer.animateTo
x: 100
options:
curve: "spring"
time: 2
instant: true
calledEvents = []
["start", "stop", "end"].map (eventName) ->
animation.on eventName, ->
calledEvents.push(eventName)
animation.start()
@layer.x.should.equal 100
calledEvents.should.eql(["start", "end", "stop"])
@@ -1131,9 +1131,9 @@ describe "Layer", ->
layer = new Layer
layer.draggable.enabled = true
a1 = layer.animate properties: {x:100}
a2 = layer.animate properties: {y:100}
a3 = layer.animate properties: {blur:1}
a1 = layer.animateTo x:100
a2 = layer.animateTo y:100
a3 = layer.animateTo blur:1
a1.isAnimating.should.equal true
a2.isAnimating.should.equal true

0 comments on commit 5c3994f

Please sign in to comment.