Permalink
Browse files

Fixed flashing text when animating color

  • Loading branch information...
nvh committed Jul 12, 2017
1 parent 9e9ce72 commit 7f807e6f50932ac9d429578d0f025b18f99503df
Showing with 19 additions and 2 deletions.
  1. +3 −1 framer/StyledText.coffee
  2. +1 −0 framer/TextLayer.coffee
  3. +15 −1 test/tests/TextLayerTest.coffee
View
@@ -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 = {}
View
@@ -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"
@@ -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", ->

0 comments on commit 7f807e6

Please sign in to comment.