Skip to content

Commit

Permalink
Improved stroke animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@nvh
nvh committed Jan 31, 2018
1 parent bf6afa6 commit a68a2d0
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 9 deletions.
39 changes: 30 additions & 9 deletions framer/SVGPath.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,26 @@ class exports.SVGPath extends SVGBaseLayer
updateStroke: ->
startLength = @strokeStart ? 0
endLength = @strokeEnd ? @length
# print startLength, endLength
dasharray = []
if endLength < startLength
gap = startLength - endLength
@strokeDasharray = [endLength, gap, @length - startLength, 0]
remaining = @length - startLength
dasharray.push(endLength)
dasharray.push(gap)
if remaining isnt 0
dasharray.push(remaining)
dasharray.push(0)
else
length = endLength - startLength
@strokeDasharray = [0, startLength, length, @length - endLength]
print @strokeDasharray
remaining = @length - endLength
if startLength isnt 0
dasharray.push(0)
dasharray.push(startLength)
if length isnt @length and (length isnt 0 or startLength is 0)
dasharray.push(length)
if length isnt remaining and remaining isnt 0
dasharray.push(remaining)
@strokeDasharray = dasharray

# Custom properties
@define "fill", layerProperty(@, "fill", "fill", null, SVG.validFill, SVG.toFill)
Expand All @@ -63,6 +75,9 @@ class exports.SVGPath extends SVGBaseLayer
@define "strokeLength", layerProperty @, "strokeLength", null, undefined, _.isNumber, ((value, path) -> Math.max(0, Math.min(value, path.length))), {}, (path, value) ->
strokeStart = path.strokeStart ? 0
strokeEnd = strokeStart + value
if strokeEnd > path.length
strokeEnd -= path.length
path._properties.strokeStart = strokeStart
path._properties.strokeEnd = strokeEnd
path._properties.strokeFraction = value / path.length
path.updateStroke()
Expand All @@ -71,14 +86,20 @@ class exports.SVGPath extends SVGBaseLayer
path.strokeLength = path.length * value

@define "strokeStart", layerProperty @, "strokeStart", null, undefined, _.isNumber, ((value, path) -> Math.max(0, Math.min(value, path.length))), {}, (path, value) ->
strokeEnd = path.strokeEnd ? @length
path._properties.strokeLength = Math.abs(strokeEnd - path.strokeStart)
path.updateStroke()
strokeStart = value
strokeEnd = path.strokeEnd ? path.strokeLength ? path.length
if strokeEnd >= strokeStart
path.strokeLength = strokeEnd - strokeStart
else
path.strokeLength = (path.length - strokeStart) + strokeEnd

@define "strokeEnd", layerProperty @, "strokeEnd", null, undefined, _.isNumber, ((value, path) -> Math.max(0, Math.min(value, path.length))), {}, (path, value) ->
strokeStart = path.strokeStart ? 0
path._properties.strokeLength = Math.abs(path.strokeEnd - strokeStart)
path.updateStroke()
strokeEnd = value
if strokeEnd >= strokeStart
path.strokeLength = strokeEnd - strokeStart
else
path.strokeLength = (path.length - strokeStart) + strokeEnd

@define "length", get: -> @_length
@define "start", get: -> @pointAtFraction(0)
Expand Down
113 changes: 113 additions & 0 deletions test/tests/SVGPathTest.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,119 @@ describe "SVGPath", ->
layer.elements.test.strokeDasharray.should.eql []
expect(layer.elements.test.strokeDashoffset).to.be.null

describe "strokeLength", ->
it "0", ->
path.strokeLength = 0
path.strokeStart.should.equal 0
path.strokeEnd.should.equal 0
path.strokeDasharray.should.eql [0, path.length]
path.strokeFraction.should.equal 0
expect(path.strokeDashoffset).to.be.null

it "length", ->
path.strokeLength = path.length
path.strokeStart.should.equal 0
path.strokeEnd.should.equal path.length
path.strokeDasharray.should.eql []
path.strokeFraction.should.equal 1
expect(path.strokeDashoffset).to.be.null

it "100", ->
path.strokeLength = 100
path.strokeStart.should.equal 0
path.strokeEnd.should.equal 100
path.strokeFraction.should.equal 100/path.length
path.strokeDasharray.should.eql [100, path.length - 100]
expect(path.strokeDashoffset).to.be.null

describe "strokeFraction", ->
it "0", ->
path.strokeFraction = 0
path.strokeStart.should.equal 0
path.strokeEnd.should.equal 0
path.strokeLength.should.equal 0
path.strokeDasharray.should.eql [0, path.length]
expect(path.strokeDashoffset).to.be.null

it "1", ->
path.strokeFraction = 1
path.strokeStart.should.equal 0
path.strokeEnd.should.equal path.length
path.strokeLength.should.equal path.length
path.strokeDasharray.should.eql []
expect(path.strokeDashoffset).to.be.null

it "0.5", ->
path.strokeFraction = 0.5
path.strokeStart.should.equal 0
path.strokeEnd.should.equal path.length / 2
path.strokeLength.should.equal path.length / 2
path.strokeDasharray.should.eql [path.length/2]
expect(path.strokeDashoffset).to.be.null

describe "strokeStart", ->
it "0", ->
path.strokeStart = 0
path.strokeEnd.should.equal path.length
path.strokeLength.should.equal path.length
path.strokeDasharray.should.eql []
expect(path.strokeDashoffset).to.be.null

it "1", ->
path.strokeStart = path.length
path.strokeEnd.should.equal path.length
path.strokeLength.should.equal 0
path.strokeDasharray.should.eql [0, path.length]
expect(path.strokeDashoffset).to.be.null

it "0.5", ->
path.strokeStart = path.length / 2
path.strokeEnd.should.equal path.length
path.strokeLength.should.equal path.length / 2
path.strokeDasharray.should.eql [0, path.length/2, path.length/2]
expect(path.strokeDashoffset).to.be.null

it "with end", ->
path.strokeStart = 50
path.strokeEnd = 200
path.strokeLength.should.equal 150
path.strokeDasharray.should.eql [0, 50, 150, path.length - 200]
expect(path.strokeDashoffset).to.be.null

it "with end before start", ->
path.strokeStart = 200
path.strokeEnd = 50
path.strokeLength.should.equal path.length - 200 + 50
path.strokeDasharray.should.eql [50, 150, path.length - 200, 0]
expect(path.strokeDashoffset).to.be.null

it "with reversed end before start", ->
path.strokeEnd = 50
path.strokeStart = 200
path.strokeLength.should.equal path.length - 200 + 50
path.strokeDasharray.should.eql [50, 150, path.length - 200, 0]
expect(path.strokeDashoffset).to.be.null


describe "strokeEnd", ->
it "0", ->
path.strokeEnd = 0
path.strokeLength.should.equal 0
path.strokeDasharray.should.eql [0, path.length]
expect(path.strokeDashoffset).to.be.null

it "1", ->
path.strokeEnd = path.length
path.strokeLength.should.equal path.length
path.strokeDasharray.should.eql []
expect(path.strokeDashoffset).to.be.null

it "0.5", ->
path.strokeEnd = path.length / 2
path.strokeLength.should.equal path.length / 2
path.strokeDasharray.should.eql [path.length/2]
expect(path.strokeDashoffset).to.be.null

describe "positioning", ->
it "should proxy the transform property to the SVGLayer if that is it's direct parent", ->
path.x.should.equal 123
Expand Down

0 comments on commit a68a2d0

Please sign in to comment.