lnmch/kops-arm64
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finally fixed the pod intro animation?

Browse Source
This commit is contained in:
Henning Jacobs
2016-12-21 21:32:43 +01:00
parent 1270df7e8a
commit 410665f474
3 changed files with 57 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/src/app.js
View File

@@ -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)
}
}

67
app/src/pod.js
View File

@@ -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)

4
app/src/utils.js
View File

@@ -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}
export {FACTORS, hsvToRgb, getBarColor, parseResource}