Permalink
Browse files

Stopping simulation if animating the same property

  • Loading branch information...
nvh committed Nov 4, 2016
1 parent a7c60c6 commit cfadfd6c39fe2cf5a3b8e7d5ccf1d2c9ab2b41b8
Showing with 61 additions and 30 deletions.
  1. +8 −7 framer/Simulation.coffee
  2. +1 −0 test/tests.coffee
  3. +51 −0 test/tests/LayerDraggableTest.coffee
  4. +1 −23 test/tests/LayerTest.coffee
View
@@ -35,7 +35,8 @@ class exports.Simulation extends BaseClass
modelOptions: {}
delay: 0
debug: false
@layer = @options.layer
@properties = @options.properties
@_running = false
SimulatorClass = SimulatorClasses[@options.model] or SpringSimulator
@@ -46,18 +47,18 @@ class exports.Simulation extends BaseClass
# necessary to return them so that conflicting animations/simulations can
# detect one another and not run at the same time.
animatingProperties: ->
_.keys(@options.properties)
_.keys(@properties)
start: =>
if @options.layer is null
if @layer is null
console.error "Simulation: missing layer"
if @options.debug
console.log "Simulation.start #{@_simulator.constructor.name}", @options.modelOptions
animatingProperties = @animatingProperties()
for property, animation of @options.layer.animatingProperties()
for property, animation of @layer.animatingProperties()
if property in animatingProperties
animation.stop()
@@ -73,7 +74,7 @@ class exports.Simulation extends BaseClass
@_running = false
@options.layer.context.removeAnimation(@)
@layer.context.removeAnimation(@)
@emit(Events.SimulationStop) if emit
Framer.Loop.off("update", @_update)
@@ -83,14 +84,14 @@ class exports.Simulation extends BaseClass
emit: (event) ->
super
# Also emit this to the layer with self as argument
@options.layer.emit(event, @)
@layer.emit(event, @)
_start: =>
return if @_running
@_running = true
@options.layer.context.addAnimation(@)
@layer.context.addAnimation(@)
@emit(Events.SimulationStart)
Framer.Loop.on("update", @_update)
View
@@ -35,6 +35,7 @@ require "./tests/LayerGesturesTest"
require "./tests/VideoLayerTest"
require "./tests/ImporterTest"
require "./tests/LayerAnimationTest"
require "./tests/LayerDraggableTest"
require "./tests/ContextTest"
require "./tests/ScrollComponentTest"
require "./tests/PageComponentTest"
@@ -0,0 +1,51 @@
describe "Layer", ->
describe "Draggable", ->
it "should stop x and y animations on drag start", ->
layer = new Layer
layer.draggable.enabled = true
a1 = layer.animate x:100
a2 = layer.animate y:100
a3 = layer.animate blur:1
a1.isAnimating.should.equal true
a2.isAnimating.should.equal true
a3.isAnimating.should.equal true
layer.draggable.touchStart(document.createEvent("MouseEvent"))
a1.isAnimating.should.equal false
a2.isAnimating.should.equal false
a3.isAnimating.should.equal true
describe "Simulation", ->
it.only "should be cancelled when animating the same property", (done) ->
layerA = new Layer
time = 0.04
for i in [0..3]
do (i) ->
Utils.delay i*time, ->
move = document.createEvent("MouseEvent")
move.delta =
x: i
y: 0
move.touches = [
{clientX: i, clientY: 0}
]
layerA.draggable._touchMove(move)
Utils.delay i*time, ->
layerA.draggable._touchEnd(document.createEvent("MouseEvent"))
layerA.onDragEnd ->
simulation = layerA.draggable._simulation.x
a = @animate
x: 10
options:
time: 0.1
simulation._running.should.equal false
a.onAnimationStop (animation) ->
Utils.delay 0.1, ->
layerA.x.should.equal 10
done()
@@ -260,7 +260,7 @@ describe "Layer", ->
#layer.computedStyle()["background-size"].should.equal "cover"
#layer.computedStyle()["background-repeat"].should.equal "no-repeat"
it "should not append nocache to a base64 encoded image", ->
fullPath = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEwAAABMBAMAAAA1uUwYAAAAAXNSR0IArs4c6QAAABVQTFRFKK/6LFj/g9n/lNf9lqz/wez/////Ke+vpgAAAK1JREFUSMft1sENhDAMBdFIrmBboAjuaWFrsNN/CRwAgUPsTAH556c5WVFKQyuLLYbZf/MLmDHW5yJmjHW5kBljPhczY8zlEmaMvXMZM8ZeuZQZY08uZzZh5dqen+XNhLFBbsiEsW9uzISxTy5gwlifi5gw1uVCJoz5XMyEMZdLmASs/s5NnkFl7M7NmDJ25aZMGTtzc6aMtcqYMtYqY8pYq4wpY60ypuvnsNizA+E6656TNMZlAAAAAElFTkSuQmCC"
@@ -1195,28 +1195,6 @@ describe "Layer", ->
copy.style["font-size"].should.equal "1.2em"
copy.style["text-align"].should.equal "right"
describe "Draggable", ->
it "should stop x and y animations on drag start", ->
layer = new Layer
layer.draggable.enabled = true
a1 = layer.animate x:100
a2 = layer.animate y:100
a3 = layer.animate blur:1
a1.isAnimating.should.equal true
a2.isAnimating.should.equal true
a3.isAnimating.should.equal true
layer.draggable.touchStart(document.createEvent("MouseEvent"))
a1.isAnimating.should.equal false
a2.isAnimating.should.equal false
a3.isAnimating.should.equal true
describe "Point conversion", ->
it "should correctly convert points from layer to Screen", ->

0 comments on commit cfadfd6

Please sign in to comment.