"
39 | html += "Error: Not A WebKit Browser"
40 | html += "Your browser is not supported.
Please use Safari or Chrome.
" 41 | html += "Try anyway" 42 | html += "
"
43 |
44 | showAlert(html)
45 | }
46 |
47 | function showFileLoadingAlert() {
48 | var html = ""
49 | html += "Please use Safari or Chrome.
" 41 | html += "Try anyway" 42 | html += "
"
50 | html += "Error: Local File Restrictions"
51 | html += "Preview this prototype with Framer Mirror or learn more about "
52 | html += "file restrictions.
" 53 | html += "Try anyway" 54 | html += "
"
55 |
56 | showAlert(html)
57 | }
58 |
59 | function loadProject(callback) {
60 | CoffeeScript.load("app.coffee", callback)
61 | }
62 |
63 | function setDefaultPageTitle() {
64 | // If no title was set we set it to the project folder name so
65 | // you get a nice name on iOS if you bookmark to desktop.
66 | document.addEventListener("DOMContentLoaded", function() {
67 | if (document.title == "") {
68 | if (window.FramerStudioInfo && window.FramerStudioInfo.documentTitle) {
69 | document.title = window.FramerStudioInfo.documentTitle
70 | } else {
71 | document.title = window.location.pathname.replace(/\//g, "")
72 | }
73 | }
74 | })
75 | }
76 |
77 | function init() {
78 |
79 | if (Utils.isFramerStudio()) {
80 | return
81 | }
82 |
83 | setDefaultPageTitle()
84 |
85 | if (!isCompatibleBrowser()) {
86 | return showBrowserAlert()
87 | }
88 |
89 | if (!isFileLoadingAllowed()) {
90 | return showFileLoadingAlert()
91 | }
92 |
93 | loadProject(function(){
94 | // CoffeeScript: Framer?.CurrentContext?.emit?("loaded:project")
95 | var context;
96 | if (typeof Framer !== "undefined" && Framer !== null) {
97 | if ((context = Framer.CurrentContext) != null) {
98 | if (typeof context.emit === "function") {
99 | context.emit("loaded:project");
100 | }
101 | }
102 | }
103 | })
104 | }
105 |
106 | init()
107 |
108 | })()
109 |
--------------------------------------------------------------------------------
/Examples/Countdown.framer/framer/framer.modules.js:
--------------------------------------------------------------------------------
1 | require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o" 53 | html += "Try anyway" 54 | html += "
5 | Countdown: [http://share.framerjs.com/8as5o1wn1f0a/](http://share.framerjs.com/8as5o1wn1f0a/) 6 | 7 |
8 | 
9 |
10 | Thank you [Henrique Gusso](https://twitter.com/gusso) for writing that [great article](https://medium.com/@gusso/draw-and-animate-an-svg-circle-in-framer-d4bc3a9863c1#.9kdfcl942).
11 |
12 | ## Setup
13 | 1. Download the `circleModule.coffee` file
14 | 2. Create or open a framer project and drop `circleModule.coffee` inside the /modules folder
15 | 3. Add `{Circle} = require "circleModule"` at the top of your document (case-sensitive).
16 |
17 | ## Add Circle
18 | ```coffeescript
19 | circle = new Circle
20 | ```
21 | You can also change the size of the circle `circleSize: 400` and the strokeSize `circleSize: 20`.
22 |
23 | ## Start Animation or set value initial value
24 | You can animate to a certain value (percent-based). You can change the value any time in your prototype.
25 | ```coffeescript
26 | circle.changeTo(50) # Animates to 50% of circle in the default time
27 |
28 | # Options: Speed (in seconds)
29 | circle.changeTo(50, 10) # Animates to 50% of circle in the 10s
30 | ```
31 |
32 | Or just set a initial value (percent-based)
33 | ```coffeescript
34 | circle.startAt(10)
35 | ```
36 |
37 | ## Countdown
38 | You can use the circle also for countdowns
39 | ```coffeescript
40 | countdownCircle = new Circle
41 | hasCounter: true
42 | ```
43 |
44 | Change the text color `counterColor: "#fff"` and font-size `counterFontSize: 20` to your liking.
45 |
46 | ## Callback
47 | You can get a callback when animation is completed
48 | ```coffeescript
49 | circle.onFinished = ->
50 | print "animation done"
51 | ```
52 |
53 | Get the current value of the circle
54 | ```coffeescript
55 | circle.onFinished = ->
56 | if circle.currentValue == 80 # TRUE if circle was animated to "circle.changeTo(80)"
57 | print "80%"
58 | ```
59 |
60 | ## Coloring / Gradients
61 | You can either use a plain color (default) for the circle or a gradient.
62 | ```coffeescript
63 | gradientCircle = new Circle
64 | topColor: "#7cc201"
65 | bottomColor: "#a3fe00"
66 |
67 | plainCircle = new Circle
68 | color: "#7cc201"
69 | ```
70 |
71 |
72 | ## Show / Hide Circle
73 | You can easily animate the circles visibilty using standard framer functions. For instant changes:
74 | ```coffeescript
75 | circle.hide()
76 | circle.show()
77 | ```
78 |
79 | ## Optional Properties
80 | You can also customize the circle with following properties:
81 |
82 | | property | Description|
83 | | ------------- | ------------- |
84 | | `circleSize` | The size of the circle (default: 300) |
85 | | `strokeWidth` | The thickness of the stroke (default: 24) |
86 | | `strokeColor` | The color of the stroke (default: "#fc245c") |
87 | | `linecap` | The shape of the stroke's endcaps. Use "butt", "round" or "square" (default: "round") |
88 | | `topColor` | Top Gradient Color |
89 | | `bottomColor` | Bottom Gradient Color |
90 | | `hasCounter` | Set it to `true`, will show a countdown label (default: null) |
91 | | `counterColor` | Text color of countdown label (default: "#fff") |
92 | | `counterFontSize` | Font size of countdown label (default: 60) |
93 | | `hasLinearEasing` | Allows to change the animation curve to "linear" for "ease-in-out". Set it to `true (default: null) |
94 |
95 | ```coffeescript
96 | loadingCircle = new Circle
97 | circleSize: 200
98 | strokeWidth: 30
99 | linecap: "round"
100 |
101 | topColor: "#ff150f"
102 | bottomColor: "#ff23bd"
103 |
104 | hasCounter: true
105 | counterColor: "#fff"
106 | hasLinearEasing: true
107 |
108 | counterColor: "red"
109 | counterFontSize: 100
110 |
111 | loadingCircle.center() # center the circle
112 |
113 | loadingCircle.changeTo(100)
114 |
115 | loadingCircle.onFinished = ->
116 | print "animation is done"
117 | ```
118 |
--------------------------------------------------------------------------------
/applewatchactivities.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ServusJon/SVGCircle-Module-for-FramerJS/4fbbea8b5bbce544a7144d98c95e0c673b062915/applewatchactivities.gif
--------------------------------------------------------------------------------
/circleModule.coffee:
--------------------------------------------------------------------------------
1 | class exports.Circle extends Layer
2 | currentValue: null
3 |
4 | constructor: (@options={}) ->
5 |
6 | @options.circleSize ?= 300
7 | @options.strokeWidth ?= 24
8 | @options.linecap ?= "round"
9 |
10 | @options.strokeColor ?= "#fc245c"
11 | @options.topColor ?= null
12 | @options.bottomColor ?= null
13 |
14 | @options.hasCounter ?= null
15 | @options.counterColor ?= "#fff"
16 | @options.counterFontSize ?= 60
17 | @options.hasLinearEasing ?= false
18 |
19 | @options.value = 2
20 |
21 | @options.viewBox = (@options.circleSize) + @options.strokeWidth
22 |
23 | super @options
24 |
25 | @.backgroundColor = ""
26 | @.height = @options.viewBox
27 | @.width = @options.viewBox
28 | @.rotation = -90
29 |
30 |
31 | @.pathLength = Math.PI * @options.circleSize
32 |
33 | @.circleID = "circle" + Math.floor(Math.random()*1000)
34 | @.gradientID = "circle" + Math.floor(Math.random()*1000)
35 |
36 | # Put this inside lineargradient
37 | # gradientUnits="userSpaceOnUse"
38 | # x1="0%" y1="0%" x2="50%" y2="0%" gradientTransform="rotate(120)"
39 |
40 |
41 | if @options.hasCounter isnt null
42 | counter = new Layer
43 | parent: @
44 | html: ""
45 | width: @.width
46 | height: @.height
47 | backgroundColor: ""
48 | rotation: 90
49 | color: @options.counterColor
50 |
51 | style = {
52 | textAlign: "center"
53 | fontSize: "#{@options.counterFontSize}px"
54 | lineHeight: "#{@.height}px"
55 | fontWeight: "600"
56 | fontFamily: "-apple-system, Helvetica, Arial, sans-serif"
57 | boxSizing: "border-box"
58 | height: @.height
59 | }
60 |
61 | counter.style = style
62 |
63 | numberStart = 0
64 | numberEnd = 100
65 | numberDuration = 2
66 |
67 | numberNow = numberStart
68 | numberInterval = numberEnd - numberStart
69 |
70 |
71 | @.html = """
72 | """
91 |
92 | self = @
93 | Utils.domComplete ->
94 | self.path = document.querySelector("##{self.circleID}")
95 |
96 | @proxy = new Layer
97 | opacity: 0
98 | name: "circuleModuleProxy"
99 |
100 | @proxy.sendToBack()
101 |
102 | @proxy.on Events.AnimationEnd, (animation, layer) ->
103 | self.onFinished()
104 |
105 | @proxy.on 'change:x', ->
106 |
107 | offset = Utils.modulate(@.x, [0, 500], [self.pathLength, 0])
108 |
109 | self.path.setAttribute 'stroke-dashoffset', offset
110 |
111 | if self.options.hasCounter isnt null
112 | numberNow = Utils.round(self.proxy.x / 5)
113 | counter.html = numberNow
114 |
115 | Utils.domComplete ->
116 | self.proxy.x = 0.1
117 |
118 | changeTo: (value, time) ->
119 | if time is undefined
120 | time = 2
121 |
122 | if @options.hasLinearEasing is true
123 | customCurve = "linear"
124 | else
125 | customCurve = "ease-in-out"
126 |
127 | @proxy.animate
128 | properties:
129 | x: 500 * (value / 100)
130 | time: time
131 | curve: customCurve
132 |
133 | @currentValue = value
134 |
135 | startAt: (value) ->
136 | @proxy.animate
137 | properties:
138 | x: 500 * (value / 100)
139 | time: 0.001
140 |
141 | @currentValue = value
142 |
143 |
144 |
145 | hide: ->
146 | @.opacity = 0
147 |
148 | show: ->
149 | @.opacity = 1
150 |
151 | onFinished: ->
152 |
153 |
--------------------------------------------------------------------------------
/countdown.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ServusJon/SVGCircle-Module-for-FramerJS/4fbbea8b5bbce544a7144d98c95e0c673b062915/countdown.gif
--------------------------------------------------------------------------------