Permalink
Browse files

New SVGLayer to allow for fill and gradient animations

  • Loading branch information...
jonastreub committed Jun 27, 2017
1 parent 16e23b2 commit 8e73cb1e70961610e11709303e95442a3f330354
Showing with 43 additions and 12 deletions.
  1. +3 −0 framer/LayerStyle.coffee
  2. +40 −12 framer/SVGLayer.coffee
View
@@ -194,6 +194,9 @@ exports.LayerStyle =
backgroundColor: (layer) ->
return layer._properties.backgroundColor
fill: (layer) ->
return layer._properties.fill
color: (layer) ->
return layer._properties.color
View
@@ -1,20 +1,48 @@
{_} = require "./Underscore"
{Layer} = require "./Layer"
{Color} = require "./Color"
{Layer, layerProperty} = require "./Layer"
class exports.SVGLayer extends Layer
constructor: (options={}) ->
options.backgroundColor ?= null
options.fill ?= "black"
super options
@define "backgroundColor", layerProperty(@, "fill", "fill", null, Color.validColorValue, Color.toColor)
@define "gradient",
get: ->
return @_gradient
set: (value) ->
if LinearGradient.isLinearGradient(value)
@_gradient = value
else
gradientOptions = LinearGradient._asPlainObject(value)
if not _.isEmpty(gradientOptions)
@_gradient = new LinearGradient(gradientOptions)
else
@_gradient = null
@updateGradientSVG()
updateGradientSVG: =>
super _.defaults options,
backgroundColor: null
isGradient = LinearGradient.isLinearGradient @_gradient
@svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
@svg.setAttribute("width", "100%")
@svg.setAttribute("height", "100%")
@svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink")
if not @_elementGradientSVG and isGradient
@_elementGradientSVG = document.createElementNS("http://www.w3.org/2000/svg", "svg")
@_elementGradientSVG.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink")
@_element.appendChild @_elementGradientSVG
addShape: (type) ->
shape = document.createElementNS("http://www.w3.org/2000/svg", "circle")
@svg.appendChild(shape)
return shape
if isGradient
id = "#{@id}-gradient"
@_elementGradientSVG.innerHTML = """
<linearGradient id='#{id}' gradientTransform='rotate(#{@gradient.angle - 90}, 0.5, 0.5)' >
<stop offset="0" stop-color='##{@gradient.start.toHex()}' stop-opacity='#{@gradient.start.a}' />
<stop offset="1" stop-color='##{@gradient.end.toHex()}' stop-opacity='#{@gradient.end.a}' />
</linearGradient>
"""
@style.fill = "url(##{id})"
else
@_elementGradientSVG.innerHTML = ""
@fill = @fill

0 comments on commit 8e73cb1

Please sign in to comment.