Permalink
Browse files

Testing animating fill and stroke

  • Loading branch information...
nvh committed Dec 13, 2017
1 parent a557f66 commit 08215358f62c675cf39b810a572c489f6143da77
Showing with 43 additions and 1 deletion.
  1. +2 −1 framer/Color.coffee
  2. +41 −0 test/tests/LayerAnimationTest.coffee
View
@@ -288,7 +288,8 @@ class exports.Color extends BaseClass
@isValidColorProperty: (name, value) ->
# We check if the property name ends with color, because we don't want
# to convert every string that looks like a Color, like the html property containing "add"
if _.endsWith(name.toLowerCase(), "color") and _.isString(value) and Color.isColorString(value)
isColorKey = _.endsWith(name.toLowerCase(), "color") or name in ["fill", "stroke"]
if isColorKey and _.isString(value) and Color.isColorString(value)
return true
return false
@@ -1239,3 +1239,44 @@ describe "LayerAnimation", ->
textLayer.on Events.AnimationEnd, ->
textLayer.text.should.equal "8.00KM-HEAVY"
done()
describe "svg animations", ->
layer = null
beforeEach ->
layer = new SVGLayer
name: "ret",
backgroundColor: null,
width: 200,
html: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="5"><path id="shape-id-o075lAYCB" d="M 0 0 L 200 0 L 200 200 L 0 200 Z"></path></svg>',
htmlIntrinsicSize: {height: 200, width: 200},
height: 200,
constraintValues: {height: 200, width: 200},
fill: "rgba(0,170,255,0.75)",
blending: "normal",
autoSize: true
strokeWidth: 1
it "should animate the fill property", (done) ->
layer.onAnimationEnd ->
Color.equal(layer.fill, "yellow").should.be.true
done()
layer.animate
fill: "yellow"
x: 100
it "should animate the stroke property", (done) ->
layer.onAnimationEnd ->
Color.equal(layer.stroke, "yellow").should.be.true
done()
layer.animate
stroke: "yellow"
x: 100
it "should animate the stroke width", (done) ->
layer.onAnimationEnd ->
layer.strokeWidth.should.equal 10
done()
layer.animate
strokeWidth: 10
x: 100
it "should animate along a path"

0 comments on commit 0821535

Please sign in to comment.