Permalink
Browse files

Merge branch 'navcomponent'

  • Loading branch information...
koenbok committed May 28, 2016
2 parents b7021df + ece543d commit 1608171dc1fbb3301e301fccb9131bc53b25c920
@@ -29,14 +29,12 @@ framer/backup.coffee
framer/backups
framer/backups/*
framer/.*.hash
framer/images/*
framer/framer*.js
framer/framer*.js.map
framer/manifest.txt
framer/preview.png
app.js
framer/images/*
framer/framer*.js
framer/framer*.js.map
imported
Binary file not shown.
@@ -1,16 +1,71 @@
scroll = new ScrollComponent
size: Screen
# Import file "NavComponent"
# {home, table, back, update, dialog} =
# Framer.Importer.load("imported/NavComponent@1x")
#
# dialog.borderRadius = 10
#
# nav = new NavComponent
# nav.push(home)
nav = new NavComponent
grid = new GridComponent
width: Screen.width * 2
height: Screen.height * 2
rows: 10
columns: 10
nav.push(grid)
grid.renderCell = (layer) ->
layer.image = Utils.randomImage(layer)
# layer.onClick ->
#
# large = new Layer
# size: Utils.frameInset(nav, 80)
# image: @image
#
# large.onTap ->
# nav.back()
#
# nav.modal(large)
# photo = new Layer
# width: 1400
# height: 933
# image: "images/photo.jpg"
#
# home.onTap -> nav.push(table)
# back.onTap -> nav.back()
# update.onTap -> nav.alert(dialog)
# photo.draggable.enabled = true
cover = new Layer
size: Screen
backgroundColor: Color.grey(0, 1)
progress = new CircularProgressComponent
parent: cover
point: Align.center()
progress.strokeWidth = 1
# progress.railsColor = Color.grey(1, 1)
# progress.progressColor = Color.grey(0, 0.5)
imageLayers = _.filter Framer.CurrentContext.layers, (layer) ->
layer.image
counter = 0
for imageLayer in imageLayers
Utils.loadImage imageLayer.image, ->
counter += 1
progress.setProgress counter / imageLayers.length
if counter is imageLayers.length
cover.destroy()
# cover.animate
# properties:
# opacity: 0
# time: 0.4
# delay: 1.3
@@ -5,13 +5,12 @@
"deviceOrientation" : 0,
"sharedPrototype" : 1,
"contentScale" : 1,
"deviceType" : "apple-iphone-6s-silver",
"deviceType" : "fullscreen",
"selectedHand" : "",
"updateDelay" : 0.3,
"deviceScale" : "fit",
"deviceScale" : 1,
"codeFolds" : [
],
"orientation" : 0,
"fullScreen" : false
"orientation" : 0
}
Binary file not shown.
@@ -1,3 +1,5 @@
pixelRound = parseInt
center = (layer, property, offset=0) ->
parent = Screen
@@ -6,8 +8,8 @@ center = (layer, property, offset=0) ->
borderWidth = parent.borderWidth
borderWidth ?= 0
x = (parent.width / 2) - (layer.width / 2) - borderWidth + offset
y = (parent.height / 2) - (layer.height / 2) - borderWidth + offset
x = pixelRound((parent.width / 2) - (layer.width / 2) - borderWidth + offset)
y = pixelRound((parent.height / 2) - (layer.height / 2) - borderWidth + offset)
return x if property is "x"
return y if property is "y"
@@ -18,39 +20,42 @@ left = (layer, property, offset=0) ->
throw Error "Align.left only works for x" unless property is "x"
parent = Screen
parent = layer.parent if layer.parent
return 0 + offset
return pixelRound(0 + offset)
right = (layer, property, offset=0) ->
throw Error "Align.right only works for x" unless property is "x"
parent = Screen
parent = layer.parent if layer.parent
borderWidth = parent.borderWidth
borderWidth ?= 0
return parent.width - (2 * borderWidth) - layer.width + offset
return pixelRound(parent.width - (2 * borderWidth) - layer.width + offset)
top = (layer, property, offset=0) ->
throw Error "Align.top only works for y" unless property is "y"
parent = Screen
parent = layer.parent if layer.parent
return 0 + offset
return pixelRound(0 + offset)
bottom = (layer, property, offset=0) ->
throw Error "Align.bottom only works for y" unless property is "y"
parent = Screen
parent = layer.parent if layer.parent
borderWidth = parent.borderWidth
borderWidth ?= 0
return parent.height - (2 * borderWidth) - layer.height + offset
return pixelRound(parent.height - (2 * borderWidth) - layer.height + offset)
# Helper to see if we are dealing with a function or result of a function
wrapper = (f) ->
return (a, b) ->
wrapper = (f, name) ->
align = (a, b) ->
return ((l, p) -> f(l, p, a)) if not a? or _.isNumber(a)
return f(a, b, 0)
align.toInspect = ->
return "Align.#{name}"
return align
exports.Align =
center: wrapper(center)
left: wrapper(left)
right: wrapper(right)
top: wrapper(top)
bottom: wrapper(bottom)
center: wrapper(center, "center")
left: wrapper(left, "left")
right: wrapper(right, "right")
top: wrapper(top, "top")
bottom: wrapper(bottom, "bottom")
@@ -55,6 +55,7 @@ class exports.Animation extends BaseClass
delay: 0
debug: false
colorModel: "husl"
animate: true
if options.origin
console.warn "Animation.origin: please use layer.originX and layer.originY"
@@ -139,11 +140,15 @@ class exports.Animation extends BaseClass
@_repeatCounter--
@start()
# If animate is false we set everything immediately and skip the actual animation
start = @_start
start = @_instant if @options.animate is false
# If we have a delay, we wait a bit for it to start
if @options.delay
Utils.delay(@options.delay, @_start)
Utils.delay(@options.delay, start)
else
@_start()
start()
return true
@@ -176,21 +181,22 @@ class exports.Animation extends BaseClass
animatingProperties: ->
_.keys(@_stateA)
_instant: =>
@emit("start")
@_prepareUpdateValues()
@_updateValues(1)
@emit("end")
@emit("stop")
_start: =>
@options.layer.context.addAnimation(@)
@emit("start")
Framer.Loop.on("update", @_update)
# Figure out what kind of values we have so we don't have to do it in
# the actual update loop. This saves a lot of frame budget.
@_prepareUpdateValues()
@_valueUpdaters = {}
for k, v of @_stateB
if Color.isColorObject(v) or Color.isColorObject(@_stateA[k])
@_valueUpdaters[k] = @_updateColorValue
else
@_valueUpdaters[k] = @_updateNumberValue
_update: (delta) =>
if @_animator.finished()
@@ -201,6 +207,15 @@ class exports.Animation extends BaseClass
else
@_updateValues(@_animator.next(delta))
_prepareUpdateValues: =>
@_valueUpdaters = {}
for k, v of @_stateB
if Color.isColorObject(v) or Color.isColorObject(@_stateA[k])
@_valueUpdaters[k] = @_updateColorValue
else
@_valueUpdaters[k] = @_updateNumberValue
_updateValues: (value) =>
@_valueUpdaters[k](k, value) for k, v of @_stateB
return null
@@ -11,7 +11,7 @@ class exports.SpringRK4Animator extends Animator
tension: 250
friction: 25
velocity: 0
tolerance: 1/10000
tolerance: 1/100
time: null # Hack
@_time = 0
@@ -0,0 +1,77 @@
{SVGLayer} = require "../SVGLayer"
class exports.CircularProgressComponent extends SVGLayer
constructor: (options={}) ->
super
@backgroundColor = null
@rotation = -90
@rails = @addShape("circle")
@rails.setAttribute("fill", "transparent")
@circle = @addShape("circle")
@circle.setAttribute("fill", "transparent")
@strokeWidth = 1
@progress = 0
@railsColor = Color.grey(.2)
@progressColor = Color.grey(1)
@svg.appendChild(@rails)
@svg.appendChild(@circle)
@_element.appendChild(@svg)
@define "radius",
get: -> @width / 2 - @strokeWidth / 2
@define "strokeWidth",
get: -> @_strokeWidth or 1
set: (value) ->
@_strokeWidth = value
@rails.cx.baseVal.value = @width / 2
@rails.cy.baseVal.value = @width / 2
@rails.r.baseVal.value = @radius
@rails.setAttribute("stroke-width", value)
@circle.cx.baseVal.value = @width / 2
@circle.cy.baseVal.value = @width / 2
@circle.r.baseVal.value = @radius
@circle.setAttribute("stroke-width", value)
@define "progressColor",
get: -> @_progressColor or Color.grey(1)
set: (value) -> @circle.setAttribute("stroke", value)
@define "railsColor",
get: -> @_progressColor or Color.grey(.1)
set: (value) -> @rails.setAttribute("stroke", value)
@define "progress",
get: -> @_progress or 0
set: (value) ->
@_progress = Utils.clamp(value, 0, 1)
strokeDashArray = (@radius * Math.PI * 2)
strokeDashOffset = (1 - @progress) * strokeDashArray
@circle.setAttribute("stroke-dasharray", strokeDashArray)
@circle.setAttribute("stroke-dashoffset", strokeDashOffset)
setProgress: (value, animated=true, animationOptions={}) ->
return @progress = value unless animated
# If no time was given we use a dynamic time based on the relative distance
# to animate based on the progress delta. The full circle time is 0.3 by default.
dynamicTime = Math.abs(@progress - value) * 0.3
animationOptions = _.defaults animationOptions,
curve: "linear"
time: dynamicTime
animationOptions = _.extend animationOptions,
properties:
progress: Utils.clamp(value, 0, 1)
@animate(animationOptions)
@@ -40,7 +40,7 @@ class exports.GridComponent extends Layer
@render()
@define "cellWidth",
get: -> (@width - (@spacing.horizontal * (@columns - 1))) / @columns
get: -> (@width - (@spacing.horizontal * (@columns - 1))) / @columns
@define "cellHeight",
get: -> (@height - (@spacing.vertical * (@rows - 1))) / @rows
@@ -75,16 +75,10 @@ class exports.GridComponent extends Layer
for row in [@rows-1..0]
for column in [@columns-1..0]
frame =
x: @cellX(column)
y: @cellY(row)
width: @cellWidth
height: @cellHeight
cell = new Layer
parent: @
frame: frame
frame: @cellFrame(column, row)
name: "Cell #{column}:#{row}"
@renderCell(cell, row, column)
@@ -96,7 +90,7 @@ class exports.GridComponent extends Layer
Utils.labelLayer(cell, "#{row}:#{column}")
_reset: ->
_.invoke(@cells, "destroy")
_.invokeMap(@cells, "destroy")
@_cells = {}
# copy: ->
Oops, something went wrong.

0 comments on commit 1608171

Please sign in to comment.