From 410665f474900ef68ca6e521981c1a352a0842f7 Mon Sep 17 00:00:00 2001 From: Henning Jacobs Date: Wed, 21 Dec 2016 21:32:43 +0100 Subject: [PATCH] finally fixed the pod intro animation? --- app/src/app.js | 34 ++++++++++++------------ app/src/pod.js | 67 ++++++++++++++++++++++++++++-------------------- app/src/utils.js | 4 +-- 3 files changed, 57 insertions(+), 48 deletions(-) diff --git a/app/src/app.js b/app/src/app.js index 5837607..0c1e2f3 100644 --- a/app/src/app.js +++ b/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)) - const scale = 1 + ((1 - alpha) * 140) - pod.x = targetPosition.x + (distance * cos * (1 - alpha)) - pod.y = targetPosition.y + (distance * sin * (1 - alpha)) - pod.alpha = alpha - pod.rotation = alpha * alpha * Math.PI * 2 + // progress goes from 0 to 1 + const progress = Math.min(1, pod._progress + (0.01 * t)) + const scale = 1 + ((1 - progress) * 140) + pod._progress = progress + pod.x = targetPosition.x + (distance * cos * (1 - progress)) + 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.update(time) - that.renderer.render(that.stage) - requestAnimationFrame(mainLoop) - } - - mainLoop(performance.now()) + PIXI.ticker.shared.add(this.tick, this) } } diff --git a/app/src/pod.js b/app/src/pod.js index 3d5a4da..45ccdba 100644 --- a/app/src/pod.js +++ b/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(_) { - var v = Math.sin((PIXI.ticker.shared.lastTime % 1000)/1000.* Math.PI) - podBox.alpha = v - } + this.tick = this.pulsate podBox.lineStyle(2, 0xaaffaa, 1) } else if (this.pod.status.phase == 'Pending') { - this.tick = function(_) { - var v = Math.sin((PIXI.ticker.shared.lastTime % 1000)/1000.* Math.PI) - podBox.alpha = v - } + this.tick = this.pulsate podBox.lineStyle(2, 0xffffaa, 1) } else { // CrashLoopBackOff, ImagePullBackOff or other unknown state - - this.tick = function(_) { - var v = Math.sin((PIXI.ticker.shared.lastTime % 1000) / 1000. * Math.PI) - podBox.tint = PIXI.utils.rgb2hex([1, v, v]) - } + this.tick = this.crashing 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) - podBox.moveTo(0, 0) - podBox.lineTo(10, 10) - podBox.moveTo(10, 0) - podBox.lineTo(0, 10) - /* - PIXI.ticker.shared.add(function (_) { - const now = new Date().getTime() / 1000 - // TODO: better animation - podBox.alpha = Math.min(0.8, Math.max(0.2, (podBox.pod.deleted - now)/30)) - }) - */ + if (!this.cross) { + const cross = new PIXI.Graphics() + cross.lineStyle(3, 0xff6666, 1) + cross.moveTo(0, 0) + cross.lineTo(10, 10) + cross.moveTo(10, 0) + cross.lineTo(0, 10) + cross.pivot.x = 5 + cross.pivot.y = 5 + 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) diff --git a/app/src/utils.js b/app/src/utils.js index 18e2ef2..0160c18 100644 --- a/app/src/utils.js +++ b/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) { @@ -68,4 +68,4 @@ function parseResource(v) { return parseInt(match[1]) * factor } -export {FACTORS, hsvToRgb, getBarColor, parseResource} \ No newline at end of file +export {FACTORS, hsvToRgb, getBarColor, parseResource}