Skip to content
Permalink
Browse files

New SVGLayer to allow for fill and gradient animations

  • Loading branch information
Jonas Treub
Jonas Treub committed Jun 28, 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
@@ -194,6 +194,9 @@ exports.LayerStyle =

backgroundColor: (layer) ->
return layer._properties.backgroundColor

fill: (layer) ->
return layer._properties.fill

color: (layer) ->
return layer._properties.color
@@ -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.
You can’t perform that action at this time.