Skip to content

Commit

Permalink
feat(game/loading-scene): fade-out on load complete
Browse files Browse the repository at this point in the history
  • Loading branch information
dtinth committed Feb 16, 2015
1 parent 55287dd commit fa0161c
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 10 deletions.
4 changes: 3 additions & 1 deletion src/game/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,7 @@ export function main() {
let loader = new GameLoader()
let promise = loader.load('/music/aoi_olivia/olivia_SPpp.bml')
SCENE_MANAGER.display(new LoadingScene({ loader, song }))
promise.done()
promise.then(function() {
SCENE_MANAGER.display(null)
})
}
4 changes: 4 additions & 0 deletions src/game/loading-scene/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,9 @@ export default function LoadingScene({ loader, song }) {
let view = new View({ el: container, data })
loader.on('progress', () => { console.log('progress') })
loader.on('progress', () => view.set(getData()))
return function() {
container.classList.add('is-exiting')
return Promise.delay(500)
}
}
}
37 changes: 34 additions & 3 deletions src/game/loading-scene/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@
background: url(~assets/bg/a.jpg) center no-repeat;
background-size: cover;

.loading-scene-song-info {
&--info {
position: absolute;
top: 40%; left: 0; right: 0;
transform: translateY(-50%);
}

.loading-scene-song-info {
animation: loading-scene-song-info-animation 1s ease;
}

Expand All @@ -20,11 +23,39 @@
bottom: 10px; left: 10px;
}

&--cover {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0; opacity: 0;
pointer-events: none;

background: black;
}

.scene.is-exiting & {
&--info {
animation: loading-scene--info-exit 0.3s linear;
}
&--cover {
animation: loading-scene--cover-exit 0.3s linear;
opacity: 1;
}
}

}

@keyframes loading-scene-song-info-animation {
0% { transform: translateY(-50%) scale(1.5, 0.02); }
100% { transform: translateY(-50%) scale(1, 1); }
0% { transform: scale(1.5, 0.02); }
100% { transform: scale(1, 1); }
}

@keyframes loading-scene--info-exit {
0% { transform: translateY(-50%) scale(1, 1); }
100% { transform: translateY(-50%) scale(2, 2); }
}

@keyframes loading-scene--cover-exit {
0% { opacity: 0; }
100% { opacity: 1; }
}

.loading-scene-song-info {
Expand Down
14 changes: 8 additions & 6 deletions src/game/loading-scene/view.jade
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,18 @@ mixin section(name)
!= '{{/' + name + '}}'

.loading-scene
.loading-scene-song-info
.loading-scene-song-info--genre {{song.genre}}
.loading-scene-song-info--title {{song.title}}
+section('song.subtitle')
.loading-scene-song-info--subtitle {{.}}
.loading-scene-song-info--artist {{song.artist}}
.loading-scene--info
.loading-scene-song-info
.loading-scene-song-info--genre {{song.genre}}
.loading-scene-song-info--title {{song.title}}
+section('song.subtitle')
.loading-scene-song-info--subtitle {{.}}
.loading-scene-song-info--artist {{song.artist}}
.loading-scene-progress
+section('items')
.loading-scene-progress--item
.loading-scene-progress-bar
.loading-scene-progress-bar--bar(style='width:{{width}}')
| {{text}}
span.loading-scene-progress-bar--progress {{progress}}
.loading-scene--cover

0 comments on commit fa0161c

Please sign in to comment.