Permalink
Browse files

Cleanup, add shift key for slow animations

  • Loading branch information...
Koen Bok
Koen Bok committed Apr 22, 2013
1 parent 88c3ccb commit b1fbf81454ecdab197c875712d89254730c9f628
Showing with 26 additions and 64 deletions.
  1. +26 −64 src/animation.coffee
View
@@ -1,4 +1,5 @@
_ = require "underscore"
{config} = require "./config"
utils = require "./utils"
css = require "./css"
@@ -53,8 +54,11 @@ class Animation extends EventEmitter
# Set all the defaults
@time ?= 1000
@curve ?= "linear"
@precision ?= 30
@count = 0
@precision ?= config.animationPrecision
@debug ?= config.animationDebug
@profile ?= config.animationProfile
AnimationCounter += 1
@animationId = AnimationCounter
@@ -72,7 +76,8 @@ class Animation extends EventEmitter
@count++
@animationName = "framer-animation-#{@animationId}-#{@count}"
console.log "Animation.start #{@animationName}" if @debug
console.log "Animation[#{@animationId}].start" if @debug
console.log "Animation[#{@animationId}].view = #{@view.name}" if @debug
console.profile @animationName if @profile
@@ -158,7 +163,8 @@ class Animation extends EventEmitter
if @debug
endTime = new Date().getTime() - startTime
console.log "Animation.setupTime = #{endTime}ms"
console.log "Animation[#{@animationId}].setupTime = #{endTime}ms"
console.log "Animation[#{@animationId}].totalTime = #{utils.round @totalTime, 2}ms"
console.profileEnd @animationName if @profile
@@ -182,7 +188,7 @@ class Animation extends EventEmitter
stop: =>
console.log "Animation.stop #{@animationName}" if @debug
console.log "Animation[#{@animationId}].stop #{@animationName}" if @debug
@_canceled = true
@@ -198,7 +204,7 @@ class Animation extends EventEmitter
if @_canceled is true
return
console.log "Animation.end #{@animationName}" if @debug
console.log "Animation[#{@animationId}].end #{@animationName}" if @debug
@_cleanup true
@@ -260,7 +266,7 @@ class Animation extends EventEmitter
position = stepIncrement * stepDelta
cssString.push "\t#{position}%\t{ -webkit-transform: "
cssString.push "\t#{utils.round position, config.roundingDecimals}%\t{ -webkit-transform: "
# Add the matrix based values
for propertyName in @AnimatableMatrixProperties
@@ -281,7 +287,7 @@ class Animation extends EventEmitter
for propertyName, unit of @AnimatableCSSProperties
continue if not @propertiesA.hasOwnProperty propertyName
value = springValue * deltas[propertyName] + @propertiesA[propertyName]
cssString.push "#{propertyName}:#{ utils.round value, 5}#{unit}; "
cssString.push "#{propertyName}:#{ utils.round value, config.roundingDecimals}#{unit}; "
cssString.push "}\n"
@@ -305,77 +311,33 @@ class Animation extends EventEmitter
curve ?= ""
curve = curve.toLowerCase()
# If the shift key is pressed, we would like to play the animation slowly.
factor = config.timeSpeedFactor
precision = @precision * factor
time = @time * factor
if curve in ["linear"]
return bezier.defaults.Linear @precision, @time
return bezier.defaults.Linear @precision, time
else if curve in ["ease"]
return bezier.defaults.Ease @precision, @time
return bezier.defaults.Ease @precision, time
else if curve in ["ease-in"]
return bezier.defaults.EaseIn @precision, @time
return bezier.defaults.EaseIn @precision, time
else if curve in ["ease-out"]
return bezier.defaults.EaseOut @precision, @time
return bezier.defaults.EaseOut @precision, time
else if curve in ["ease-in-out"]
return bezier.defaults.EaseInOut @precision, @time
return bezier.defaults.EaseInOut @precision, time
else if curve[.."cubic-bezier".length-1] is "cubic-bezier"
v = parseCurve curve, "cubic-bezier"
return bezier.BezierCurve v[0], v[1], v[2], v[3], @precision, @time
return bezier.BezierCurve v[0], v[1], v[2], v[3], precision, time
else if curve[.."spring".length-1] is "spring"
v = parseCurve curve, "spring"
return spring.SpringCurve v[0], v[1], v[2], @precision
return spring.SpringCurve v[0], v[1], v[2], precision
else
# The default curve is linear
console.log "Animation.parseCurve: could not parse curve '#{curve}'"
return bezier.defaults.Linear @precision, @time
graphView: (animation, x, y, h, time) ->
color = "rgba(50,150,200,.35)"
values = animation.curveValues
width = 300
graph = new View
y: y
x: x
width:100
height:h
# graph.style.backgroundColor = "rgba(0, 0, 0, 1)"
graph.clip = false
background = new View
y: 0 - h
height:h * 2 + 3
superView: graph
background.style.backgroundColor = "rgba(255,255,255,.85)"
for value, i in values
dot = new View
width:3, height:3
x: i * widthFactor, y: (100 - value) * (h / 100)
superView: graph
dot.style.borderRadius = "5px"
dot.style.backgroundColor = color
graph.width = dot.x
background.width = dot.x
if time
player = new View
x:0, y:-h
width: 2, height: h * 2
superView: graph
player.style.backgroundColor = color
player.animate
properties: {x:graph.width}
time: time
return graph
exports.Animation = Animation

0 comments on commit b1fbf81

Please sign in to comment.