Commit 4422a88a authored by Tobias Bernard's avatar Tobias Bernard

Mobile shell: add app drawer prototype and video

parent cb75975b
# How to run this prototype
1. Set up Atom and install the packages
- coffee-compile
- atom-live-server
2. Start coffee-compile and atom-live-server
3. The prototype opens in the browser
4. Edit app.coffee
5. On each save, the prototype auto-reloads in the browser
## Base layer and background
home = new Layer
width: 360
height: 720
image: "images/background.png"
home.center()
## App drawer carousel
page = new PageComponent
width: 360
height: 694
y: 26
scrollHorizontal: false
page.parent = home
page1 = new Layer
width: 360
height: 511
backgroundColor: "rgba(0,0,0,0)"
page1.parent = page.content
page2 = new Layer
width: 360
height: 694
image: "images/app-drawer-transparent.png"
hideArrow = new Layer
width: 360
height: 40
y: 0
rotation: 180
image: "images/hide-arrow.png"
animationOptions:
time: 0.2
hideArrow.parent = page2
hideArrow.states.up =
rotation: 0
page3 = new Layer
width: 360
height: 694
image: "images/app-page-transparent.png"
page4 = new Layer
width: 360
height: 694
image: "images/app-page-transparent.png"
page.addPage(page2, "bottom")
page.addPage(page3, "bottom")
page.addPage(page4, "bottom")
## Page indicator dots
dots = new Layer
width: 360
height: 694
image: "images/dots.png"
opacity: 0
dots.parent = home
dots.states.visible =
opacity: 1
activeDot = new Layer
width: 360
height: 694
image: "images/active-dot.png"
opacity: 0
activeDot.parent = home
activeDot.animationOptions =
curve: Bezier.easeOut
time: 0.15
activeDot.states.page2 =
opacity: 1
y: 0
activeDot.states.page3 =
opacity: 1
y: 40
activeDot.states.page4 =
opacity: 1
y: 80
## Page change behavior
page.on "change:currentPage", ->
if page.currentPage == page1
hideArrow.animate("default")
dots.stateSwitch("default")
activeDot.stateSwitch("default")
else if page.currentPage == page2
hideArrow.animate("up")
dots.stateSwitch("visible")
activeDot.animate("page2")
else if page.currentPage == page3
activeDot.animate("page3")
else if page.currentPage == page4
activeDot.animate("page4")
## Apps in the overview
apps = new Layer
width: 1160
height: 654
y: -50 - 26
x: -400
scale: 0.6
backgroundColor: "rgba(0,0,0,0)"
animationOptions:
time: 0.2
apps.parent = page1
appsUI = new Layer
width: 1160
height: 654
image: "images/apps.png"
appsUI.parent = apps
apps.states.thumb =
scale: 0.6
y: -50
## System top bar
topbar = new Layer
width: 360
height: 26
image: "images/topbar.png"
topbar.parent = home
var activeDot, apps, appsUI, dots, hideArrow, home, page, page1, page2, page3, page4, topbar;
home = new Layer({
width: 360,
height: 720,
image: "images/background.png"
});
home.center();
page = new PageComponent({
width: 360,
height: 694,
y: 26,
scrollHorizontal: false
});
page.parent = home;
page1 = new Layer({
width: 360,
height: 511,
backgroundColor: "rgba(0,0,0,0)"
});
page1.parent = page.content;
page2 = new Layer({
width: 360,
height: 694,
image: "images/app-drawer-transparent.png"
});
hideArrow = new Layer({
width: 360,
height: 40,
y: 0,
rotation: 180,
image: "images/hide-arrow.png",
animationOptions: {
time: 0.2
}
});
hideArrow.parent = page2;
hideArrow.states.up = {
rotation: 0
};
page3 = new Layer({
width: 360,
height: 694,
image: "images/app-page-transparent.png"
});
page4 = new Layer({
width: 360,
height: 694,
image: "images/app-page-transparent.png"
});
page.addPage(page2, "bottom");
page.addPage(page3, "bottom");
page.addPage(page4, "bottom");
dots = new Layer({
width: 360,
height: 694,
image: "images/dots.png",
opacity: 0
});
dots.parent = home;
dots.states.visible = {
opacity: 1
};
activeDot = new Layer({
width: 360,
height: 694,
image: "images/active-dot.png",
opacity: 0
});
activeDot.parent = home;
activeDot.animationOptions = {
curve: Bezier.easeOut,
time: 0.15
};
activeDot.states.page2 = {
opacity: 1,
y: 0
};
activeDot.states.page3 = {
opacity: 1,
y: 40
};
activeDot.states.page4 = {
opacity: 1,
y: 80
};
page.on("change:currentPage", function() {
if (page.currentPage === page1) {
hideArrow.animate("default");
dots.stateSwitch("default");
return activeDot.stateSwitch("default");
} else if (page.currentPage === page2) {
hideArrow.animate("up");
dots.stateSwitch("visible");
return activeDot.animate("page2");
} else if (page.currentPage === page3) {
return activeDot.animate("page3");
} else if (page.currentPage === page4) {
return activeDot.animate("page4");
}
});
apps = new Layer({
width: 1160,
height: 654,
y: -50 - 26,
x: -400,
scale: 0.6,
backgroundColor: "rgba(0,0,0,0)",
animationOptions: {
time: 0.2
}
});
apps.parent = page1;
appsUI = new Layer({
width: 1160,
height: 654,
image: "images/apps.png"
});
appsUI.parent = apps;
apps.states.thumb = {
scale: 0.6,
y: -50
};
topbar = new Layer({
width: 360,
height: 26,
image: "images/topbar.png"
});
topbar.parent = home;
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<!-- <meta name="viewport" content="width=640,initial-scale=0.5,user-scalable=no"> -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="icon/apple-touch-icon-precomposed.png">
<style type="text/css" media="screen">
* {
margin:0;
padding:0;
border:none;
-webkit-user-select:none;
}
body {
/* background: black url('images/background.png')
repeat scroll top left; */
font: 28px/1em "Helvetica";
color: #FFF;
overflow: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0)
}
/* body > * {
width: 432px !important;
height: 768px !important;
} */
a {
color: #bfbfbf;
}
</style>
</head>
<body>
<script src="framer/framer.js"></script>
<script src="app.js"></script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment