Permalink
Browse files

Separate the css from keyframe generation

  • Loading branch information...
Koen Bok
Koen Bok committed May 3, 2013
1 parent 9b9dadd commit 3e2c5799c2e1673d9cb21930f1f8c3be729c7454
Showing with 49 additions and 40 deletions.
  1. +49 −40 src/animation.coffee
View
@@ -29,8 +29,8 @@ class Animation extends EventEmitter
AnimationProperties: [
"view", "properties", "curve", "time",
"origin", "tolerance", "precision", "modifiers", "limits"
"debug", "profile", "callback"
"origin", "tolerance", "precision", "modifiers",
"limits", "debug", "profile", "callback"
]
AnimatableCSSProperties: {
opacity: "",
@@ -186,11 +186,12 @@ class Animation extends EventEmitter
########################################################
# Finalize
if @debug
endTime = new Date().getTime() - startTime
console.log "Animation[#{@animationId}].setupTime = #{endTime}ms"
console.log "Animation[#{@animationId}].totalTime = #{utils.round @totalTime, 0}ms"
@view.once "webkitAnimationStart", =>
if @debug
endTime = new Date().getTime() - startTime
console.log "Animation[#{@animationId}].setupTime = #{endTime}ms"
console.log "Animation[#{@animationId}].totalTime = #{utils.round @totalTime, 0}ms"
console.profileEnd @animationName if @profile
@@ -273,58 +274,66 @@ class Animation extends EventEmitter
@callback? @
@emit "end"
_css: ->
_keyFrames: ->
# Build the css for the keyframe animation. I wish there was a nicer
# way to do this, but this will work for now.
# Build keyframes based on our values
stepIncrement = 0
stepDelta = 100 / (@curveValues.length - 1)
cssString = []
cssString.push "@-webkit-keyframes #{@animationName} {\n"
deltas = @_deltas()
keyFrames = {}
# We define this object outside of the loop to re-use it.
# In theory this should help a bit with perfomance, in practise
# I'm too lazy to prove it.
m = new Matrix()
for springValue in @curveValues
for curveValue in @curveValues
position = stepIncrement * stepDelta
position = utils.round position, config.roundingDecimals
currentKeyFrame = {}
for propertyName of @propertiesA
currentKeyFrame[propertyName] = curveValue * deltas[propertyName] + @propertiesA[propertyName]
keyFrames[position] = currentKeyFrame
stepIncrement++
keyFrames
cssString.push "\t#{utils.round position, config.roundingDecimals}%\t{ -webkit-transform: "
_css: ->
# Create the css from a set of keyframes
keyFrames = @_keyFrames()
cssString = []
cssString.push "@-webkit-keyframes #{@animationName} {\n"
matrix = new Matrix()
for position, values of keyFrames
cssString.push "\t#{position}%\t{ -webkit-transform: "
# Add the matrix based values
for propertyName in @AnimatableMatrixProperties
# Calculate the clean spring value for this point
value = springValue * deltas[propertyName] + @propertiesA[propertyName]
# Modify the value if we have a modifier set up. This let's us do
# special stuff like drop the friction once we run into the scroll
# bounds for a scrollview.
if @modifiers?[propertyName]?
value = @modifiers[propertyName](value)
m[propertyName] = value
cssString.push m.matrix().cssValues() + "; "
if values.hasOwnProperty propertyName
matrix[propertyName] = values[propertyName]
else
matrix[propertyName] = @view[propertyName]
cssString.push matrix.matrix().cssValues() + "; "
# Add the css based values
for propertyName, unit of @AnimatableCSSProperties
continue if not @propertiesA.hasOwnProperty propertyName
value = springValue * deltas[propertyName] + @propertiesA[propertyName]
cssString.push "#{propertyName}:#{ utils.round value, config.roundingDecimals}#{unit}; "
continue if not values.hasOwnProperty propertyName
cssString.push "#{propertyName}:#{ utils.round values[propertyName], config.roundingDecimals}#{unit}; "
cssString.push "}\n"
stepIncrement++
cssString.push "}\n"
cssString.join ""
_deltas: ->
deltas = {}

0 comments on commit 3e2c579

Please sign in to comment.