|
@@ -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 = {} |
|
|