Permalink
Browse files

Pass progress to change callback

  • Loading branch information...
1 parent 756d863 commit d99cb991eae453d73bc7a0a309701d5ecfb48918 @michaelvillar committed May 28, 2016
Showing with 38 additions and 2 deletions.
  1. +3 −1 README.md
  2. +1 −1 src/dynamics.coffee
  3. +34 −0 test/dynamics.coffee
View
@@ -70,7 +70,9 @@ Animates an element to the properties with the animation options.
- `duration` is in milliseconds (default: `1000`)
- `delay` is in milliseconds (default: `0`)
- `complete` (optional) is the completion callback
- - `change` (optional) is called at every change
+ - `change` (optional) is called at every change. Two arguments are passed to the function. `function(el, progress)`
+ - `el` is the element it's animating
+ - `progress` is the progress of the animation between 0 and 1
### dynamics.stop(el)
Stops the animation applied on the element
View
@@ -1097,7 +1097,7 @@ animationTick = (t, animation) ->
applyFrame(animation.el, properties)
- animation.options.change?(animation.el)
+ animation.options.change?(animation.el, Math.min(1, tt))
if tt >= 1
animation.options.complete?(animation.el)
View
@@ -134,6 +134,40 @@ describe 'dynamics.animate', ->
done()
, 150
+ it 'calls change with element being animated', (done) ->
+ el = document.createElement('div')
+ dynamics.animate(el, {
+ left: 100,
+ top: "50px"
+ }, {
+ duration: 100,
+ type: dynamics.easeInOut,
+ change: (element) ->
+ assert(el == element, "Element should be the same")
+ })
+ setTimeout ->
+ done()
+ , 150
+
+ it 'calls change with progress incrementing', (done) ->
+ el = document.createElement('div')
+ savedProgress = -1
+ dynamics.animate(el, {
+ left: 100,
+ top: "50px"
+ }, {
+ duration: 100,
+ type: dynamics.easeInOut,
+ change: (el, progress) ->
+ assert(progress > savedProgress, "Progress should increment")
+ assert(progress >= 0 && progress <= 1, "Progress should be in [0, 1] range")
+ savedProgress = progress
+ })
+ setTimeout ->
+ assert(savedProgress == 1, "Progress should end with 1")
+ done()
+ , 150
+
it 'actually animates properties while the animation is running', (done) ->
el = document.createElement('div')
previous = { left: 0, top: 0, translateX: 0, rotateZ: 0, transform: 'none' }

0 comments on commit d99cb99

Please sign in to comment.