feat(game/loading-scene): fade-out on load complete

bemusic · Feb 16, 2015 · fa0161c · fa0161c
1 parent 55287dd
commit fa0161c
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/src/game/index.js b/src/game/index.js
@@ -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)
+  })
 }
diff --git a/src/game/loading-scene/index.js b/src/game/loading-scene/index.js
@@ -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)
+    }
   }
 }
diff --git a/src/game/loading-scene/style.scss b/src/game/loading-scene/style.scss
@@ -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;
   }
 
@@ -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 {

diff --git a/src/game/loading-scene/view.jade b/src/game/loading-scene/view.jade
@@ -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