Fixed flashing text when animating color

Fixes framer/company#5184
koenbok · Jul 12, 2017 · 7f807e6 · 7f807e6
1 parent 9e9ce72
commit 7f807e6
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/framer/StyledText.coffee b/framer/StyledText.coffee
@@ -75,6 +75,8 @@ class InlineStyle
 		@element?.style[style] = value
 
 	getStyle: (style) ->
+		if style is "color"
+			return @css["color"] ? @css["WebkitTextFillColor"]
 		return @css[style]
 
 	measure: ->
@@ -288,7 +290,7 @@ class exports.StyledText
 		@blocks.map (block) -> block.resetStyle(style)
 
 	getStyle: (style, block=null) ->
-		return (block ? _.first(@blocks))?.getStyle(style) ? @element.style[style]
+		return (block ? _.first(@blocks))?.getStyle(style) ? @element?.style[style]
 
 	measure: (currentSize) ->
 		constraints = {}

diff --git a/framer/TextLayer.coffee b/framer/TextLayer.coffee
@@ -43,6 +43,7 @@ class exports.TextLayer extends Layer
 
 		if options.styledText?
 			@styledTextOptions = options.styledText
+			options.color ?= @_styledText.getStyle("color")
 		else
 			_.defaults options,
 				backgroundColor: "transparent"

diff --git a/test/tests/TextLayerTest.coffee b/test/tests/TextLayerTest.coffee
@@ -4,6 +4,7 @@ assert = require "assert"
 shortText = "Awesome title"
 mediumText = "What about this text that probably spans just over two lines"
 longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas posuere odio nisi, non elementum ipsum posuere ac. Vestibulum et faucibus ante. Praesent mi eros, scelerisque non venenatis at, tempus ut purus. Morbi volutpat velit lacus, id convallis lacus vulputate id. Nullam eu ex sed purus accumsan finibus sed eget lorem. Maecenas vulputate ante non ipsum luctus cursus. Nam dapibus purus ut lorem laoreet sollicitudin. Sed ullamcorper odio sed risus viverra, in vehicula lectus malesuada. Morbi porttitor, augue vel mollis pulvinar, sem lacus fringilla dui, facilisis venenatis lacus velit vitae velit. Suspendisse dictum elit in quam feugiat, nec ornare neque tempus. Duis eget arcu risus. Sed vitae turpis sit amet sapien pharetra consequat quis a dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla laoreet quis augue ac venenatis. Aenean nec lorem sodales, finibus purus in, ornare elit. Maecenas ut feugiat tellus."
+simpleStyledTextOptions = {blocks: [{inlineStyles: [{startIndex: 0, endIndex: 5, css: {fontSize: "16px", WebkitTextFillColor: "#000000", letterSpacing: "0px", fontWeight: 400, lineHeight: "2.5", tabSize: 4, fontFamily: "'Roboto-Regular', 'Roboto', 'Times New Roman'"}}], text: "Color"}]}
 exampleStyledTextOptions = {blocks: [{inlineStyles: [{startIndex: 0, endIndex: 6, css: {fontSize: "48px", WebkitTextFillColor: "#000000", letterSpacing: "0px", fontWeight: 800, lineHeight: "1.2", tabSize: 4, fontFamily: "'.SFNSText-Heavy', '.SFUIText-Heavy', 'SF UI Text', 'Times New Roman'"}}], text: "Header"}, {inlineStyles: [{startIndex: 0, endIndex: 8, css: {fontSize: "20px", WebkitTextFillColor: "rgb(153, 153, 153)", letterSpacing: "0px", fontWeight: 400, lineHeight: "1.2", tabSize: 4, fontFamily: "'.SFNSText', 'SFUIText-Regular', '.SFUIText', 'SF UI Text', 'Times New Roman'"}}], text: "Subtitle"}, {inlineStyles: [{startIndex: 0, endIndex: 6, css: {fontSize: "16px", WebkitTextFillColor: "rgb(238, 68, 68)", letterSpacing: "0px", fontWeight: 200, lineHeight: "1.2", tabSize: 4, fontFamily: "'.SFNSText-Light', 'SFUIText-Light', '.SFUIText-Light', 'SF UI Text', 'Times New Roman'"}}, {startIndex: 6, endIndex: 16, css: {fontSize: "12px", WebkitTextFillColor: "#000000", letterSpacing: "0px", fontWeight: 400, lineHeight: "1.2", tabSize: 4, fontFamily: "'.SFNSText', 'SFUIText-Regular', '.SFUIText', 'SF UI Text', 'Times New Roman'"}}], text: "Leader Body text"}], alignment: "left"}
 
 describe "TextLayer", ->
@@ -40,7 +41,7 @@ describe "TextLayer", ->
 
 		it "should render correctly when switching to the default state", ->
 			text = new TextLayer
-				styledText: {blocks: [{inlineStyles: [{startIndex: 0, endIndex: 5, css: {fontSize: "16px", WebkitTextFillColor: "#000000", letterSpacing: "0px", fontWeight: 400, lineHeight: "2.5", tabSize: 4, fontFamily: "'Roboto-Regular', 'Roboto', 'Times New Roman'"}}], text: "Color"}]}
+				styledText: simpleStyledTextOptions
 			textSize = text.size
 			options = text.styledTextOptions
 			text.stateSwitch("default")
@@ -52,6 +53,19 @@ describe "TextLayer", ->
 				styledText: exampleStyledTextOptions
 			l.styledTextOptions.should.eql exampleStyledTextOptions
 
+	describe "animation", ->
+		it "should start animating from the textcolor the layer has", (done) ->
+			text = new TextLayer
+				styledText: simpleStyledTextOptions
+
+			text.onAnimationStart ->
+				black = new Color("black")
+				text.color.toRgbString().should.equal black.toRgbString()
+				done()
+			#
+			text.animate
+				color: "red"
+
 	describe "Auto-sizing", ->
 
 		it "should auto size the layer the size of the text", ->