Animation Paths

framer/Animation.coffee

@@ -10,6 +10,7 @@ Utils = require "./Utils"
 {BezierCurveAnimator} = require "./Animators/BezierCurveAnimator"
 {SpringRK4Animator} = require "./Animators/SpringRK4Animator"
 {SpringDHOAnimator} = require "./Animators/SpringDHOAnimator"
+{SVGPathProxy} = require "./SVGPathProxy"
 
 AnimatorClasses =
 	"linear": LinearAnimator
@@ -60,6 +61,18 @@ class exports.Animation extends BaseClass
 		if properties.origin
 			console.warn "Animation.origin: please use layer.originX and layer.originY"
 
+		if @properties.path?
+			if @properties.x? or @properties.y?
+				console.warn "Animation.path: the x and y animation properties are ignored when animating on a path"
+
+			@_path = new SVGPathProxy(@properties.path)
+			@properties.x = @layer.x + @_path.end.x - @_path.start.x
+			@properties.y = @layer.y + @_path.end.y - @_path.start.x
+			delete @properties.path
+
+			if @options.debug
+				@_debugLayer = new SVGPathDebugLayer(path: @_path, alignedToLayer: @layer)
+
 		@_parseAnimatorOptions()
 		@_originalState = @_currentState()
 		@_repeatCounter = @options.repeat
@@ -156,6 +169,14 @@ class exports.Animation extends BaseClass
 		@emit("stop") if emit
 		Framer.Loop.off("update", @_update)
 
+		if @options.debug
+			animation = @_debugLayer.animate
+				properties: { opacity: 0 }
+				curve: 'linear'
+				time: 0.25
+			animation.on 'end', =>
+				@_debugLayer.destroy()
+
 	reverse: ->
 		# TODO: Add some tests
 		properties = _.clone(@_originalState)
@@ -223,16 +244,39 @@ class exports.Animation extends BaseClass
 		for k, v of @_stateB
 			if Color.isColorObject(v) or Color.isColorObject(@_stateA[k])
 				@_valueUpdaters[k] = @_updateColorValue
+			else if @_path? and k in ['x', 'y']
+				@_valueUpdaters[k] = @_updatePositionAlongPath
 			else
 				@_valueUpdaters[k] = @_updateNumberValue
 
 	_updateValues: (value) =>
-		@_valueUpdaters[k](k, value) for k, v of @_stateB
+		for k, v of @_stateB
+			@_valueUpdaters[k](k, value)
 		return null
 
 	_updateNumberValue: (key, value) =>
 		@_target[key] = Utils.mapRange(value, 0, 1, @_stateA[key], @_stateB[key])
 
+		return
+
+	_updatePositionAlongPath: (key, value) =>
+		position = @_path.getPointAtLength(@_path.length * value)
+		position.x += @_stateA.x - @_path.start.x
+		position.y += @_stateA.y - @_path.start.y
+
+		if @options.debug
+			@_debugLayer.updatePositionAlongPath(@_path.length * (1 - value))
+
+		if @options.autoRotate
+			angle = Math.atan2(position.y - @_target.y, position.x - @_target.x) * 180 / Math.PI
+			if position.y != @_target.y && position.x != @_target.x
+				@_target.rotationZ = angle
+
+		@_target.x = position.x
+		@_target.y = position.y
+
+		return
+
 	_updateColorValue: (key, value) =>
 		@_target[key] = Color.mix(@_stateA[key], @_stateB[key], value, false, @options.colorModel)
 
@@ -310,7 +354,7 @@ class exports.Animation extends BaseClass
 
 		# Only animate numeric properties for now
 		for k, v of properties
-			if @isAnimatable(v)
+			if @isAnimatable(v) or k == 'path'
 				animatableProperties[k] = v
 			else if Color.isValidColorProperty(k, v)
 				animatableProperties[k] = new Color(v)

framer/Animators/BezierCurveAnimator.coffee

@@ -10,6 +10,7 @@ BezierCurveDefaults =
 	"ease-out": [0, 0, .58, 1]
 	"ease-in-out": [.42, 0, .58, 1]
 
+
 class exports.BezierCurveAnimator extends Animator
 
 	setup: (options) ->

framer/Framer.coffee

@@ -15,6 +15,9 @@ Framer.Gestures = (require "./Gestures").Gestures
 Framer.Animation = (require "./Animation").Animation
 Framer.AnimationGroup = (require "./AnimationGroup").AnimationGroup
 Framer.Screen = (require "./Screen").Screen
+Framer.SVGPathProxy = (require "./SVGPathProxy").SVGPathProxy
+Framer.SVGPathDebugLayer = (require "./SVGPathDebugLayer").SVGPathDebugLayer
+Framer.Canvas = (require "./Canvas").Canvas
 Framer.Align = (require "./Align").Align
 Framer.print = (require "./Print").print
 
@@ -82,4 +85,4 @@ Framer.Extras.Hints.enable() if not Utils.isFramerStudio()
 # action in the future, so we can't know wether that will happen or not.
 Framer.DefaultContext.visible = true unless Framer.Preloader
 
-Utils.domComplete(Framer.Loop.start)
+Utils.domComplete(Framer.Loop.start)

framer/SVGPathDebugLayer.coffee

@@ -0,0 +1,185 @@
+{_} = require "./Underscore"
+{Layer} = require "./Layer"
+{getSVGContext, createSVGElement} = require "./Utils"
+
+setAttributes = (el, attributes) ->
+  for key, value of attributes
+    el.setAttribute key, value
+
+class exports.SVGPathDebugLayer extends Layer
+
+  constructor: (options={}) ->
+
+  	super _.defaults options,
+    	backgroundColor: "transparent"
+    	name: "debug-path"
+
+    path = options.path
+    alignedToLayer = options.alignedToLayer
+
+    padding = 10
+    debugElementsGroup = @_elementForDebugRepresentationOfPath(path)
+
+    # Add the path the hidden shared context temporarily in order to get its bounding box
+    sharedContext = getSVGContext()
+    sharedContext.appendChild(debugElementsGroup)
+    bbox = debugElementsGroup.getBBox()
+    sharedContext.removeChild(debugElementsGroup)
+
+    # Add the path to this layer and adjust the size to fit the path
+    svg = createSVGElement("svg", width: "100%", height: "100%")
+    @_element.appendChild(svg)
+    svg.appendChild(debugElementsGroup)
+
+    @width = bbox.width + Math.abs(bbox.x) + padding * 2
+    @height = bbox.height + Math.abs(bbox.y) + padding * 2
+
+    pathOffset = { x: bbox.x - padding, y: bbox.y - padding }
+    @_animatedPath = debugElementsGroup.getElementsByClassName("animated-path")?[0]
+
+    debugElementsGroup.setAttribute("transform", "translate(#{-bbox.x + padding}, #{-bbox.y + padding})")
+
+    # Align to layer that is being animated
+    layerScreenFrame = alignedToLayer.screenFrame
+    layerOriginX = layerScreenFrame.x + alignedToLayer.originX * layerScreenFrame.width
+    layerOriginY = layerScreenFrame.y + alignedToLayer.originY * layerScreenFrame.height
+
+    @x = layerOriginX - path.start.x + pathOffset.x
+    @y = layerOriginY - path.start.y + pathOffset.y
+
+  _elementForDebugRepresentationOfPath: (path) ->
+    group = createSVGElement 'g'
+
+    marker = createSVGElement 'circle',
+      r: 2
+      cx: 0
+      cy: 0
+      fill: 'red'
+
+    controlMarker = createSVGElement 'circle',
+      r: 2
+      cx: 0
+      cy: 0
+      fill: 'white'
+      stroke: '#aaa'
+      'stroke-width': '1px'
+
+    connector = createSVGElement 'path',
+      d: 'M0,0'
+      fill: 'transparent'
+      stroke: 'rgba(0, 0, 0, 0.25)'
+      'stroke-width': '1px'
+      'stroke-dasharray': '4 4'
+
+    debugPath = path.node.cloneNode()
+
+    lx = 0
+    ly = 0
+    segments = debugPath.pathSegList
+    relativeSegmentTypes = [
+      SVGPathSeg.PATHSEG_MOVETO_REL,
+      SVGPathSeg.PATHSEG_LINETO_REL,
+      SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL,
+      SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL,
+      SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL,
+      SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL,
+      SVGPathSeg.PATHSEG_ARC_REL,
+      SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL,
+      SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL
+    ]
+
+    elements = []
+    for i in [0...segments.numberOfItems]
+      segment = segments.getItem(i)
+
+      if segment.pathSegType in relativeSegmentTypes
+        addx = lx
+        addy = ly
+      else
+        addx = 0
+        addy = 0
+
+      olx = lx
+      oly = ly
+
+      if segment.x? || segment.y?
+        m = marker.cloneNode()
+        mx = addx + (if typeof segment.x is 'undefined' then lx else segment.x)
+        my = addy + (if typeof segment.y is 'undefined' then ly else segment.y)
+        setAttributes m,
+          cx: mx
+          cy: my
+          class: 'debug-marker'
+
+        lx = mx
+        ly = my
+
+        elements.push m
+
+      if segment.x1?
+        c1 = controlMarker.cloneNode()
+        c1x = addx + segment.x1
+        c1y = addy + segment.y1
+        setAttributes c1,
+          cx: c1x
+          cy: c1y
+          class: 'debug-control-marker'
+
+        conn = connector.cloneNode()
+        setAttributes conn,
+          d: "M#{olx},#{oly} L#{c1x},#{c1y}"
+          class: 'debug-connector'
+
+        elements.push c1
+        elements.push conn
+
+        # quadratic curves have a line from the control point to both anchors
+        if !segment.x2?
+          conn2 = connector.cloneNode()
+          setAttributes conn2,
+            d: "M#{mx},#{my} L#{c1x},#{c1y}"
+            class: 'debug-connector'
+          elements.push conn2
+
+      if segment.x2?
+        c2 = controlMarker.cloneNode()
+        c2x = addx + segment.x2
+        c2y = addy + segment.y2
+        setAttributes c2,
+          cx: c2x
+          cy: c2y
+          class: 'debug-control-marker'
+
+        conn = connector.cloneNode()
+        setAttributes conn,
+          d: "M#{mx},#{my} L#{c2x},#{c2y}"
+          class: 'debug-connector'
+
+        elements.push conn
+        elements.push c2
+
+    group.appendChild(element) for element in elements
+
+    setAttributes debugPath,
+      stroke: 'rgba(0, 0, 0, 0.1)'
+      # stroke: 'rgba(255, 0, 0, 0.75)'
+      'stroke-width': 1
+      fill: 'transparent'
+      class: 'debug-path'
+
+    animatedPath = debugPath.cloneNode()
+    setAttributes animatedPath,
+      class: 'animated-path'
+      stroke: 'rgba(255, 0, 0, 0.75)'
+      # stroke: 'transparent'
+      'stroke-dasharray': path.length
+      'stroke-dashoffset': path.length
+      fill: 'transparent'
+
+    group.appendChild animatedPath
+    group.appendChild debugPath
+
+    group
+
+  updatePositionAlongPath: (position) ->
+    @_animatedPath.setAttribute('stroke-dashoffset', position)

framer/SVGPathProxy.coffee

@@ -0,0 +1,17 @@
+{createSVGElement} = require "./Utils"
+
+class exports.SVGPathProxy
+  constructor: (string) ->
+    @node = createSVGElement "path",
+      d: string
+      fill: "transparent"
+
+    @length = @getTotalLength()
+    @start = @getPointAtLength(0)
+    @end = @getPointAtLength(@length)
+
+  getPointAtLength: (length) ->
+    @node.getPointAtLength(length)
+
+  getTotalLength: ->
+    @node.getTotalLength()