Some more fixes to shadow animation

koenbok · Sep 28, 2017 · f057af6 · f057af6
1 parent 6e1d21b
commit f057af6
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 20 deletions.
diff --git a/framer/Animation.coffee b/framer/Animation.coffee
@@ -349,18 +349,24 @@ class exports.Animation extends BaseClass
 		)
 
 	_updateShadows: (key, value) =>
+		if value is 1
+			@_target[key] = @_stateB[key]
+			return
+
 		result = []
-		for toShadow, index in @_stateB[key]
+		numShadows = Math.max(@_stateA[key]?.length ? 0, @_stateB[key]?.length ? 0)
+		for index in [0...numShadows]
 			fromShadow = @_stateA[key]?[index]
+			toShadow = @_stateB[key]?[index]
 			if not toShadow? and not fromShadow?
 				continue
-			fromShadow ?= _.defaults {color: null, type: toShadow.type}, Framer.Defaults.Shadow
+			type = toShadow?.type ? fromShadow?.type ? Framer.Defaults.Shadow.type
-			if toShadow? and fromShadow?
+			fromShadow ?= _.defaults {color: null, type: type}, Framer.Defaults.Shadow
-				result[index] = @_interpolateNumericObjectValues(["x", "y", "blur", "spread"], fromShadow, toShadow, value, false)
+			toShadow ?= _.defaults {color: null, type: type}, Framer.Defaults.Shadow
-				result[index].color = Color.mix(fromShadow.color, toShadow.color, value, false, @options.colorModel)
+			result[index] = @_interpolateNumericObjectValues(["x", "y", "blur", "spread"], fromShadow, toShadow, value, false)
-				result[index].type = toShadow.type ? fromShadow.type
+			result[index].color = Color.mix(fromShadow.color, toShadow.color, value, false, @options.colorModel)
-			else
+			result[index].type = type
-				result[index] = toShadow
+
 		@_target[key] = result
 
 
@@ -428,7 +434,7 @@ class exports.Animation extends BaseClass
 				shadowIndex = parseInt(matches[1]) - 1
 				if animatableProperties.shadows[shadowIndex]?
 					_.defaults v, animatableProperties.shadows[shadowIndex]
-				animatableProperties.shadows[shadowIndex] = _.defaults v, {color: null, type: null}, Framer.Defaults.Shadow
+				animatableProperties.shadows[shadowIndex] = v
 		return animatableProperties
 
 	toInspect: ->

diff --git a/framer/Layer.coffee b/framer/Layer.coffee
@@ -141,7 +141,8 @@ parentOrContext = (layerOrContext) ->
 
 proxiedShadowValue = (layer, value, index = 0) ->
 	v = _.defaults _.clone(value), Framer.Defaults.Shadow
-	v?.color = new Color(v.color)
+	if v.color isnt null
+		v?.color = new Color(v.color)
 	layerProxiedValue(v, layer, "shadow#{index+1}")
 
 class exports.Layer extends BaseClass
@@ -354,6 +355,7 @@ class exports.Layer extends BaseClass
 	for i in [0..8]
 		do (i) =>
 			@define "shadow#{i+1}",
+				exportable: false
 				depends: ["shadowX", "shadowY", "shadowBlur", "shadowSpread", "shadowColor", "shadowType"]
 				get: ->
 					@shadows ?= []
@@ -379,7 +381,7 @@ class exports.Layer extends BaseClass
 				exportable: false
 				get: ->
 					return null if not @shadows? or @shadows.length is 0
-					@shadow1[shadowProp.toLowerCase()]
+					@shadows[0][shadowProp.toLowerCase()]
 				set: (value) ->
 					@updateShadowsProperty(shadowProp.toLowerCase(), value)
 
@@ -388,9 +390,13 @@ class exports.Layer extends BaseClass
 		get: ->
 			@_getPropertyValue("shadows")
 		set: (value) ->
+			value ?= []
 			shadows = []
 			for shadow, index in value
-				shadows.push proxiedShadowValue(@, shadow, index)
+				if shadow is null
+					shadows.push null
+				else
+					shadows.push proxiedShadowValue(@, shadow, index)
 			@_setPropertyValue("shadows", shadows)
 			@updateShadowStyle()
 

diff --git a/framer/LayerStates.coffee b/framer/LayerStates.coffee
@@ -80,7 +80,7 @@ class LayerStates
 		return true if Gradient.isGradient(v)
 		return true if v is null
 		return true if v?.constructor?.name is "Layer"
-		return true if k is "template"
+		return true if k in ["template", "shadows"]
 		return false
 
 	#################################################################

diff --git a/framer/LayerStyle.coffee b/framer/LayerStyle.coffee
@@ -59,6 +59,8 @@ getShadowStrings = (layer, types, createString) ->
 					shadow.type = "box"
 			if not (shadow.type in types) or (shadow.x is 0 and shadow.y is 0 and shadow.blur is 0 and shadow.spread is 0)
 				continue
+			if shadow.color is null
+				shadow.color = new Color(null)
 			shadowString = createString(shadow, layer.context.pixelMultiplier)
 			result.push(shadowString)
 	return result
@@ -226,7 +228,6 @@ exports.LayerStyle =
 			"#{insetString}#{shadow.x * pixelMultiplier}px #{shadow.y * pixelMultiplier}px #{shadow.blur * pixelMultiplier}px #{shadow.spread * pixelMultiplier}px #{shadow.color}"
 		)
 
-
 		return shadowStrings.join(", ")
 
 	textShadow: (layer) ->

diff --git a/test/tests/LayerAnimationTest.coffee b/test/tests/LayerAnimationTest.coffee
@@ -280,12 +280,7 @@ describe "LayerAnimation", ->
 				a = layerA.animate
 					shadow1: null
 				a.onAnimationEnd ->
-					layerA.shadow1.x.should.equal 0
+					expect(layerA.shadows[0]).to.be.null
-					layerA.shadow1.y.should.equal 0
-					layerA.shadow1.blur.should.equal 0
-					layerA.shadow1.type.should.equal "inset"
-					transparentBlue = (new Color("blue")).alpha(0)
-					Color.equal(transparentBlue, layerA.shadow1.color).should.be.true
 					done()
 
 			it "should animate from null shadow nicely", (done) ->