finally fixed the pod intro animation?

app/src/app.js

@@ -33,9 +33,6 @@ export default class App {
     }
 
     initialize() {
-        PIXI.ticker.shared.autoStart = false
-        PIXI.ticker.shared.stop()
-
         //Create the renderer
         const renderer = PIXI.autoDetectRenderer(256, 256, {resolution: 2})
         renderer.view.style.position = 'absolute'
@@ -104,26 +101,29 @@ export default class App {
         const angle = Math.random()*Math.PI*2
         const cos = Math.cos(angle)
         const sin = Math.sin(angle)
-        const distance = window.innerWidth*0.75
+        const distance = Math.max(200, Math.random() * Math.min(window.innerWidth, window.innerHeight))
         // blur filter looks cool, but has huge performance penalty
         // const blur = new PIXI.filters.BlurFilter(20, 2)
         // pod.filters = [blur]
         pod.pivot.x = pod.width / 2
         pod.pivot.y = pod.height / 2
         pod.alpha = 0
+        pod._progress = 0
         originalPod.visible = false
         const that = this
         const tick = function(t) {
-            const alpha = Math.min(1, pod.alpha + (0.01 * t))
+            // progress goes from 0 to 1
-            const scale = 1 + ((1 - alpha) * 140)
+            const progress = Math.min(1, pod._progress + (0.01 * t))
-            pod.x = targetPosition.x + (distance * cos * (1 - alpha))
+            const scale = 1 + ((1 - progress) * 140)
-            pod.y = targetPosition.y + (distance * sin * (1 - alpha))
+            pod._progress = progress
-            pod.alpha = alpha
+            pod.x = targetPosition.x + (distance * cos * (1 - progress))
-            pod.rotation = alpha * alpha * Math.PI * 2
+            pod.y = targetPosition.y + (distance * sin * (1 - progress))
+            pod.alpha = progress
+            pod.rotation = progress * progress * Math.PI * 2
             // blur.blur = (1 - alpha) * 20
             pod.scale.x = scale
             pod.scale.y = scale
-            if (alpha >= 1) {
+            if (progress >= 1) {
                 PIXI.ticker.shared.remove(tick)
                 that.stage.removeChild(pod)
                 originalPod.visible = true
@@ -163,6 +163,10 @@ export default class App {
         }
     }
 
+    tick(time) {
+        this.renderer.render(this.stage)
+    }
+
     run() {
         this.initialize()
 
@@ -182,13 +186,7 @@ export default class App {
 
         fetchData()
 
-        function mainLoop(time) {
+        PIXI.ticker.shared.add(this.tick, this)
-            PIXI.ticker.shared.update(time)
-            that.renderer.render(that.stage)
-            requestAnimationFrame(mainLoop)
-        }
-
-        mainLoop(performance.now())
     }
 }
 

app/src/pod.js

@@ -10,6 +10,7 @@ export class Pod extends PIXI.Graphics {
         this.pod = pod
         this.tooltip = tooltip
         this.tick = null
+        this._progress = 1
 
         if (register) {
             ALL_PODS[pod.namespace + '/' + pod.name] = this
@@ -61,10 +62,28 @@ export class Pod extends PIXI.Graphics {
         }
     }
 
+    pulsate(time) {
+        const v = Math.sin((PIXI.ticker.shared.lastTime % 1000)/1000.* Math.PI)
+        this.alpha = v * this._progress
+    }
+
+    crashing(time) {
+        const v = Math.sin((PIXI.ticker.shared.lastTime % 1000) / 1000. * Math.PI)
+        this.tint = PIXI.utils.rgb2hex([1, v, v])
+    }
+
+    terminating(time) {
+        const v = Math.sin(((1000 + PIXI.ticker.shared.lastTime) % 1000) / 1000. * Math.PI)
+        this.cross.alpha = v
+    }
+
     draw() {
 
         if (this.tick) {
-            PIXI.ticker.shared.remove(this.tick)
+            PIXI.ticker.shared.remove(this.tick, this)
+            this.tick = null
+            this.alpha = this._progress
+            this.tint = 0xffffff
         }
 
         // pod.status.containerStatuses might be undefined!
@@ -137,47 +156,39 @@ export class Pod extends PIXI.Graphics {
             podBox.lineStyle(2, 0xaaffaa, 1)
         } else if (this.pod.status.phase == 'Running' && allRunning && !allReady) {
             // all containers running, but some not ready (readinessProbe)
-            this.tick = function(_) {
+            this.tick = this.pulsate
-                var v = Math.sin((PIXI.ticker.shared.lastTime % 1000)/1000.* Math.PI)
-                podBox.alpha = v
-            }
             podBox.lineStyle(2, 0xaaffaa, 1)
         } else if (this.pod.status.phase == 'Pending') {
-            this.tick = function(_) {
+            this.tick = this.pulsate
-                var v = Math.sin((PIXI.ticker.shared.lastTime % 1000)/1000.* Math.PI)
-                podBox.alpha = v
-            }
             podBox.lineStyle(2, 0xffffaa, 1)
         } else {
             // CrashLoopBackOff, ImagePullBackOff or other unknown state
-
+            this.tick = this.crashing
-            this.tick = function(_) {
-                var v = Math.sin((PIXI.ticker.shared.lastTime % 1000) / 1000. * Math.PI)
-                podBox.tint = PIXI.utils.rgb2hex([1, v, v])
-            }
             podBox.lineStyle(2, 0xff9999, 1)
         }
         podBox.beginFill(0x999999, 0.5)
         podBox.drawRect(0, 0, 10, 10)
         if (this.pod.deleted) {
-            podBox.lineStyle(2, 0x000000, 0.8)
+            if (!this.cross) {
-            podBox.moveTo(0, 0)
+                const cross = new PIXI.Graphics()
-            podBox.lineTo(10, 10)
+                cross.lineStyle(3, 0xff6666, 1)
-            podBox.moveTo(10, 0)
+                cross.moveTo(0, 0)
-            podBox.lineTo(0, 10)
+                cross.lineTo(10, 10)
-            /*
+                cross.moveTo(10, 0)
-            PIXI.ticker.shared.add(function (_) {
+                cross.lineTo(0, 10)
-                const now = new Date().getTime() / 1000
+                cross.pivot.x = 5
-                // TODO: better animation
+                cross.pivot.y = 5
-                podBox.alpha = Math.min(0.8, Math.max(0.2, (podBox.pod.deleted - now)/30))
+                cross.x = 5
-            })
+                cross.y = 5
-            */
+                this.addChild(cross)
+                this.cross = cross
+            }
+            this.tick = this.terminating
         }
         if (this.tick) {
-            PIXI.ticker.shared.add(this.tick)
+            PIXI.ticker.shared.add(this.tick, this)
         }
 
-
         const cpuHeight = resources.cpu.limit !== 0 ? 8 / resources.cpu.limit : 0
         podBox.lineStyle(0, 0xaaffaa, 1)
         podBox.beginFill(getBarColor(resources.cpu.requested, resources.cpu.limit), 1)

app/src/utils.js

@@ -59,7 +59,7 @@ function hsvToRgb(h, s, v) {
 }
 
 function getBarColor(usage, capacity) {
-    return hsvToRgb(0.4 - (0.4 * (usage / capacity)), 0.6, 1)
+    return hsvToRgb(Math.max(0, Math.min(1, 0.4 - (0.4 * (usage / capacity)))), 0.6, 1)
 }
 
 function parseResource(v) {