Skip to content
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
@@ -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.
You can’t perform that action at this time.