Add event point to GOT timelines

alex2wong · May 4, 2019 · ebff20e · ebff20e
1 parent 87b9a16
commit ebff20e
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 6 deletions.
diff --git a/assets/pace.min.js b/assets/pace.min.js
diff --git a/assets/timelines.js b/assets/timelines.js
@@ -43,7 +43,7 @@ var timelines = [{
     "description": "经过风息堡、黑水河和红色婚礼的战斗和屠杀后，五王之中的蓝礼·拜拉席恩、史坦尼斯·拜拉席恩和罗柏·史塔克相继失败，巴隆·葛雷乔伊怀疑因意外去世，乔佛里·拜拉席恩的王位得以巩固。随后他在自己的婚礼上遭毒杀。提利昂·兰尼斯特被指控为凶手，越狱后他刺杀了父亲泰温·兰尼斯特公爵，流亡海外",
     'location': 'Blackwater Bay',
     "camera": {
-        center: [19.974683987649488, 4.116626703866494],
+        center: [21.974683987649488, 4.916626703866494],
         bearing: -40.4,
         zoom: 6.64,
         pitch: 60,
@@ -84,7 +84,7 @@ var timelines = [{
     "title": "Iron Islands",
     "description": "数千年以来的首次选王会于铁群岛召开，“鸦眼”攸伦·葛雷乔伊当选，并展开对河湾地的袭击",
     "camera": {
-        center: [6.440872912730907, 14.214867740],
+        center: [7.548877424568763, 11.060546],
         zoom: 6.68,
         bearing: 25,
         pitch: 45

diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <title>custom WebGL layer-Threejs</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
     <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
+    <script src="./assets/pace.min.js"></script>
     <style>
         body, html {
             margin:0;
@@ -76,6 +77,7 @@
             flex: 2;
         }
         .btn {
+            flex: 1;
             color: #999
         }
         .btn:hover {
@@ -100,7 +102,7 @@ <h2 id='location-title'>Game of Throne Interactive Map</h2>
             <p id='location-description'>loading data...</p>
             <div class="btn-container">
                 <span class="btn" id="preChapBtn"> < Pre </span>
-                <div class="m-flex"></div>
+                <span class="btn" id="pauseBtn">Pause</span>
                 <span class="btn" id="nextChapBtn"> Next > </span>
             </div>
             <small>Text credit: <a target='_blank' href='https://asoiaf.fandom.com/zh/wiki/Portal:%E5%8E%86%E5%8F%B2'>https://asoiaf.fandom.com/zh/wiki</a></small>

diff --git a/src/bundle.js b/src/bundle.js
diff --git a/src/index.js b/src/index.js
@@ -80,11 +80,20 @@ map.on('style.load', function () {
     map.addLayer(customLayer, 'roads labels');
 });
 
+var canvasLayer = new Mapbox.CanvasOverlayer({
+    map: map,
+    shadow: true,
+    blurWidth: 4
+});
+Mapbox.myTween.loop = true;
+
 var title = document.getElementById('location-title');
 var description = document.getElementById('location-description');
 var preBtn = document.querySelector('#preChapBtn');
 var nextBtn = document.querySelector('#nextChapBtn');
+var pauseBtn = document.querySelector('#pauseBtn');
 var controller = {
+    playingStory: true,
     index: 0,
     timer: 0
 }
@@ -96,3 +105,11 @@ setTimeout(function(){
 
 preBtn.addEventListener('click', function() { if (controller.index - 1 >= 0) playback(controller, -1) });
 nextBtn.addEventListener('click', function() { playback(controller, 1) });
+pauseBtn.addEventListener('click', function() { 
+    controller.playingStory = !controller.playingStory;
+    if (controller.playingStory) {
+        playback(controller, 1);
+        pauseBtn.innerHTML = 'Pause';
+    }
+    if (!controller.playingStory) pauseBtn.innerHTML = 'Play';
+})
diff --git a/src/player.js b/src/player.js
@@ -1,4 +1,6 @@
+var animationInterval = 8000;
 function playback(controller, next) {
+    if (!controller.playingStory) return;
     if (next == 1) {
         controller.index = (controller.index + 1 === timelines.length) ? 0 : controller.index + 1;
     } else if (next == -1) {
@@ -20,15 +22,22 @@ function playback(controller, next) {
         speed: 0.5, // make the flying slow
         curve: 1
     }
-    map.flyTo(Object.assign(animationOpt, timelines[controller.index].camera));
+    var cameraOpt = timelines[controller.index].camera;
+    var eventPoint = { lon: cameraOpt.center[0], lat: cameraOpt.center[1], radius: 8, color: '#f00' };
+    map.flyTo(Object.assign(animationOpt, cameraOpt));
+    Mapbox.myTween.paused = true;
+    canvasLayer.clear();
 
     map.once('moveend', function () {
+        // render event Point animation
+        Mapbox.myTween.get([eventPoint]).to([Object.assign({}, eventPoint, { radius: 16 })], 2000, canvasLayer.redraw);
+        Mapbox.myTween.paused = false;
         var control = controller;
         // Duration the slide is on screen after interaction
         controller.timer = setTimeout(function () {
             // Increment index, closure?
             control.index = (control.index + 1 === timelines.length) ? 0 : control.index + 1;
             playback(control);
-        }, 7000); // After callback, show the location for 3 seconds.
+        }, animationInterval); // After callback, show the location for 3 seconds.
     });
 }