Permalink
Browse files

Merge pull request #379 from koenbok/preloader

Updated preloader.
  • Loading branch information...
eelco committed Jul 25, 2016
2 parents 5c3994f + ed9f249 commit 5199601a9cc5ada4e0ac10d6c60b61bd3fdf34cf
Showing with 627 additions and 44 deletions.
  1. +2 −2 extras/Studio.framer/.gitignore
  2. +337 −2 extras/Studio.framer/app.coffee
  3. +2 −2 extras/Studio.framer/framer/config.json
  4. +12 −0 extras/Studio.framer/images/mdMenu.svg
  5. +12 −0 extras/Studio.framer/images/mdMore.svg
  6. +12 −0 extras/Studio.framer/images/mdMovies.svg
  7. +12 −0 extras/Studio.framer/images/mdShows.svg
  8. +12 −0 extras/Studio.framer/images/mdUpcoming.svg
  9. +15 −0 extras/Studio.framer/images/mdWatch.svg
  10. BIN extras/Studio.framer/images/movies/1.jpg
  11. BIN extras/Studio.framer/images/movies/10.jpg
  12. BIN extras/Studio.framer/images/movies/2.jpg
  13. BIN extras/Studio.framer/images/movies/3.jpg
  14. BIN extras/Studio.framer/images/movies/4.jpg
  15. BIN extras/Studio.framer/images/movies/5.jpg
  16. BIN extras/Studio.framer/images/movies/6.jpg
  17. BIN extras/Studio.framer/images/movies/7.jpg
  18. BIN extras/Studio.framer/images/movies/8.jpg
  19. BIN extras/Studio.framer/images/movies/9.jpg
  20. BIN extras/Studio.framer/images/shows/1.jpg
  21. BIN extras/Studio.framer/images/shows/10.jpg
  22. BIN extras/Studio.framer/images/shows/2.jpg
  23. BIN extras/Studio.framer/images/shows/3.jpg
  24. BIN extras/Studio.framer/images/shows/4.jpg
  25. BIN extras/Studio.framer/images/shows/5.jpg
  26. BIN extras/Studio.framer/images/shows/6.jpg
  27. BIN extras/Studio.framer/images/shows/7.jpg
  28. BIN extras/Studio.framer/images/shows/8.jpg
  29. BIN extras/Studio.framer/images/shows/9.jpg
  30. +12 −0 extras/Studio.framer/images/statusIcons.svg
  31. +14 −0 extras/Studio.framer/images/systemIcons.svg
  32. BIN extras/Studio.framer/images/upcoming/1.jpg
  33. BIN extras/Studio.framer/images/upcoming/10.jpg
  34. BIN extras/Studio.framer/images/upcoming/2.jpg
  35. BIN extras/Studio.framer/images/upcoming/3.jpg
  36. BIN extras/Studio.framer/images/upcoming/4.jpg
  37. BIN extras/Studio.framer/images/upcoming/5.jpg
  38. BIN extras/Studio.framer/images/upcoming/6.jpg
  39. BIN extras/Studio.framer/images/upcoming/7.jpg
  40. BIN extras/Studio.framer/images/upcoming/8.jpg
  41. BIN extras/Studio.framer/images/upcoming/9.jpg
  42. BIN extras/Studio.framer/images/watch/1.jpg
  43. BIN extras/Studio.framer/images/watch/10.jpg
  44. BIN extras/Studio.framer/images/watch/2.jpg
  45. BIN extras/Studio.framer/images/watch/3.jpg
  46. BIN extras/Studio.framer/images/watch/4.jpg
  47. BIN extras/Studio.framer/images/watch/5.jpg
  48. BIN extras/Studio.framer/images/watch/6.jpg
  49. BIN extras/Studio.framer/images/watch/7.jpg
  50. BIN extras/Studio.framer/images/watch/8.jpg
  51. BIN extras/Studio.framer/images/watch/9.jpg
  52. +106 −0 extras/Studio.framer/modules/mediaInfo.coffee
  53. BIN extras/preloader-images/preloader-icon.png
  54. +68 −35 framer/Extras/Preloader.coffee
  55. +7 −2 framer/Framer.coffee
  56. +4 −1 scripts/dist.sh
@@ -23,15 +23,15 @@ Temporary Items
.apdisk
# Framer specific
.temp.html
.*.html
framer/*.old.*
framer/backup.coffee
framer/backups
framer/backups/*
framer/.*.hash
framer/manifest.txt
framer/preview.png
framer/social*.png
app.js
framer/images/*
@@ -1,4 +1,339 @@
layer = new Layer
# Basic setup ------------------------------------------
Framer.Defaults.Animation = curve: "spring()"
bg = new BackgroundLayer backgroundColor: "#F3F3F3"
moviesColor = new Color("#1E88E5")
showsColor = new Color("#388E3C")
upcomingColor = new Color("#3F51B5")
watchColor = new Color("#546E7A")
offSet = 20
touchBarHeight = 320
systemBarHeight = 140
fontSize = 36
spacingUnit = 48
Framer.Device.background.states.add
moviesColor: backgroundColor: moviesColor
showsColor: backgroundColor: showsColor
upcomingColor: backgroundColor: upcomingColor
watchColor: backgroundColor: watchColor
Framer.Device.background.states.animationOptions =
curve: "linear"
time: 0.35
Framer.Device.background.states.switchInstant("moviesColor")
# Page component setup ---------------------------------
page = new PageComponent
size: Screen.size
scrollVertical: false
scrollHorizontal: false
# Content -----------------------------------------------
mediaInfo = require "mediaInfo"
for layer, title of mediaInfo
moviesTitle = title.movies.name
moviesDescription = title.movies.description
showsTitle = title.shows.name
showsDescription = title.shows.description
upcomingTitle = title.upcoming.name
upcomingDescription = title.upcoming.description
watchTitle = title.watch.name
watchDescription = title.watch.description
movieScroll = new ScrollComponent
showsScroll = new ScrollComponent
upcomingScroll = new ScrollComponent
watchScroll = new ScrollComponent
for scroll in [movieScroll, showsScroll, upcomingScroll, watchScroll]
scroll.props =
size: Screen.size
scrollHorizontal: false
opacity: 1
contentInset:
top: 220
bottom: systemBarHeight + spacingUnit
scroll.states.add
hide:
opacity: 0
mediaContent = (mediaParent, mediaWidth, mediaType, mediaTitle, mediaDescription) ->
for i in [0...10]
card = new Layer
parent: mediaParent
height: 340
width: Screen.width - spacingUnit
midX: Screen.width / 2
y: 368 * i
backgroundColor: "#FFF"
borderRadius: 8
shadowY: 1, shadowBlur: 2
clip: true
posters = new Layer
parent: card
width: mediaWidth, height: card.height
image: "images/#{mediaType}/#{i+1}.jpg?cache=#{Date.now()}"
title = new Layer
parent: card
html: mediaTitle[i]
backgroundColor: null
x: mediaWidth + spacingUnit
y: spacingUnit
width: card.width - mediaWidth - spacingUnit
style:
"color": "#111"
"text-align": "left"
"font-size": "80px"
"font-weight": "300"
"line-height": "1"
description = new Layer
parent: card
html: mediaDescription[i]
backgroundColor: null
x: mediaWidth + spacingUnit
y: 170
width: card.width - mediaWidth - spacingUnit * 2
clip: true
style:
"color": "#999"
"text-align": "left"
"font-size": "34px"
"font-weight": "300"
"line-height": "1.3"
mediaContent(movieScroll.content, 220, "movies", moviesTitle, moviesDescription)
mediaContent(showsScroll.content, 220,"shows", showsTitle, showsDescription)
mediaContent(upcomingScroll.content, 220, "upcoming", upcomingTitle, upcomingDescription)
mediaContent(watchScroll.content, 220, "watch", watchTitle, watchDescription)
movieScroll.parent = page.content
page.addPage(showsScroll)
page.addPage(upcomingScroll)
page.addPage(watchScroll)
# Navigation bar setup ---------------------------------
touchBar = new Layer
height: touchBarHeight
clip: true
backgroundColor: moviesColor
width: Screen.width
maxY: Screen.height + offSet
force2d: true
tabBar = new Layer
backgroundColor: null
width: Screen.width
height: touchBar.height
maxY: Screen.height + offSet
for layer in [touchBar, tabBar]
layer.states.add
hide:
minY: Screen.height
layer.states.animationOptions = curve: "spring(750,50,0)"
systemBar = new Layer
height: systemBarHeight
backgroundColor: "rgba(0,0,0,0.35)"
width: Screen.width
maxY: Screen.height
systemIcons = new Layer
height: 120
width: 670
image: "images/systemIcons.svg"
parent: systemBar
midX: Screen.width / 2
y: Align.center
tabUnit = touchBar.height - systemBar.height - offSet
# Status bar and time ----------------------------------
statusBarHeight = 52
statusBar = new Layer
height: statusBarHeight
width: Screen.width
backgroundColor: "rgba(0,0,0,0.35)"
time = new Layer
parent: statusBar
width: 120
height: statusBarHeight / 2
x: Align.right(-20)
y: Align.center
backgroundColor: null
style:
"font-weight":"500"
"font-size": "32px"
"line-height": "0.8"
"text-align": "right"
getTime = ->
currentTime = new Date()
hours = "#{if currentTime.getHours() < 10 then 0 else ''}#{currentTime.getHours()}"
min = "#{if currentTime.getMinutes() < 10 then 0 else ''}#{currentTime.getMinutes()}"
return "#{hours}:#{min}"
setTime = ->
time.html = getTime()
Utils.delay 60, ->
setTime()
setTime()
statusIcons = new Layer
height: 28
width: 100
parent: statusBar
image: "images/statusIcons.svg"
y: 10
x: 858
# Search bar ------------------------------------------
searchBar = new Layer
backgroundColor: "#FFF"
width: Screen.width - spacingUnit
height: 120
x: Align.center
minY: statusBar.height + 20
borderRadius: 3
shadowY: 1, shadowBlur: 2
index: 4
searchBar.states.add
hide:
maxY: -100
searchBar.states.animationOptions = curve: "spring(750,50,0)"
searchLabel = new Layer
parent: searchBar
width: 160, height: 44
midY: searchBar.height/2
x: 120
html: "Search"
style:
"color": "#AAA"
"font-size": "42px"
"line-height": "1"
"font-weight": "300"
backgroundColor: null
searchIcon = new Layer
parent: searchBar
width: 120, height: 120
midY: searchBar.height/2
image: "images/mdMenu.svg"
moreIcon = new Layer
parent: searchBar
width: 120, height: 120
x: Align.right
midY: searchBar.height/2
image: "images/mdMore.svg"
# Tab items function -----------------------------------
tabSize = Screen.width / 4
tabContent = []
tabItem = (tabName, tabColor) ->
tab = new Layer
name: "#{tabName}"
parent: tabBar
x: tabContent.length * tabSize
backgroundColor: null
width: tabSize
height: tabUnit
tab.label = new Layer
name: "#{tabName}Label"
backgroundColor: null
html: "#{tabName}"
parent: tab
width: tab.width
opacity: 0
y: Align.center(-10)
height: 25
style:
"font-size": "#{fontSize}px"
tab.label.states.add
active:
opacity: 1
y: Align.center(12)
tab.icon = new Layer
name: "#{tabName}Icon"
image: "images/md#{tabName}.svg"
parent: tab
backgroundColor: null
width: tabSize / 4.5
height: tabSize / 4.5
x: Align.center()
y: Align.center()
opacity: 0.25
tab.icon.states.add
active:
y: Align.center(-tabSize / 10)
opacity: 1
tab.touch = new Layer
name: "#{tabName}Touch"
backgroundColor: tabColor
width: Screen.width * 3
height: Screen.width * 3
borderRadius: Screen.width * 1.5
midX: tab.midX
midY: tab.midY
parent: touchBar
scale: 0
tab.touch.states.add
active:
scale: 1
tab.touch.states.animationOptions =
curve: "linear"
time: 0.35
tabContent.push(tab)
return tab
movies = tabItem("Movies", moviesColor)
shows = tabItem("Shows", showsColor)
upcoming = tabItem("Upcoming", upcomingColor)
watch = tabItem("Watch", watchColor)
for layer in [movies.touch, movies.label, movies.icon]
layer.states.switchInstant("active")
# Scroll logic --------------------------------------------------
page.onSwipeUpEnd ->
for layer in [tabBar, touchBar, searchBar]
layer.states.switch("hide")
page.onSwipeDownEnd ->
for layer in [tabBar, touchBar, searchBar]
layer.states.switch("default")
# Tab configuration ------------------------------
tabConf = (moviesConf, showsConf, upcomingConf, watchConf) ->
for layer in [movies.label, movies.icon, movies.touch]
layer.states.switch(moviesConf)
for layer in [shows.label, shows.icon, shows.touch]
layer.states.switch(showsConf)
for layer in [upcoming.label, upcoming.icon, upcoming.touch]
layer.states.switch(upcomingConf)
for layer in [watch.label, watch.icon, watch.touch]
layer.states.switch(watchConf)
layer.onTap (e) -> print e.point
# Events -----------------------------------------
movies.onTap ->
tabConf("active", "default", "default", "default")
page.snapToPage(movieScroll, true)
Framer.Device.background.states.switchInstant("moviesColor")
movies.touch.bringToFront()
shows.onTap ->
tabConf("default", "active", "default", "default")
page.snapToPage(showsScroll, true)
Framer.Device.background.states.switchInstant("showsColor")
shows.touch.bringToFront()
upcoming.onTap ->
tabConf("default", "default", "active", "default")
page.snapToPage(upcomingScroll, true)
Framer.Device.background.states.switchInstant("upcomingColor")
upcoming.touch.bringToFront()
watch.onTap ->
tabConf("default", "default", "default", "active")
page.snapToPage(watchScroll, true)
Framer.Device.background.states.switchInstant("watchColor")
watch.touch.bringToFront()
@@ -5,7 +5,7 @@
"deviceOrientation" : 0,
"sharedPrototype" : 1,
"contentScale" : 1,
"deviceType" : "apple-iphone-6s-gold",
"deviceType" : "google-nexus-5x",
"selectedHand" : "",
"updateDelay" : 0.3,
"deviceScale" : "fit",
@@ -14,4 +14,4 @@
],
"orientation" : 0,
"fullScreen" : false
}
}
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.2 (28276) - http://www.bohemiancoding.com/sketch -->
<title>mdMenu</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group-2" fill="#808080">
<path d="M13,16 L31,16 L31,18 L13,18 L13,16 Z M13,21 L31,21 L31,23 L13,23 L13,21 Z M13,26 L31,26 L31,28 L13,28 L13,26 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
Oops, something went wrong.

0 comments on commit 5199601

Please sign in to comment.