QHTML For Loop Stress Rect Test 05
A predefined QHTML array drives a for loop that instantiates animated stress-rect components.
q-component stress-rect {
q-property label: "0"
q-property numSteps: 120
q-property rectWidth: 8vw
q-property widthFrom: 8vw
q-property widthTo: 30vw
q-property rectOpacity: 0.58
q-property opacityFrom: 0.58
q-property opacityTo: 1
q-property status: running
q-property-animation widthAnim {
target: this.rectWidth
duration: 1400
steps: this.numSteps
easing: "linear"
from: this.widthFrom
to: this.widthTo
emitInterpolatedValues: true
onfinished {
var oldFrom = this.widthFrom
this.widthFrom = this.widthTo
this.widthTo = oldFrom
this.widthAnim.start()
}
}
q-property-animation opacityAnim {
target: this.rectOpacity
duration: 1200
steps: 80
easing: "linear"
from: this.opacityFrom
to: this.opacityTo
emitInterpolatedValues: true
onfinished {
var oldFrom = this.opacityFrom
this.opacityFrom = this.opacityTo
this.opacityTo = oldFrom
this.opacityAnim.start()
}
}
onready {
this.widthAnim.start()
this.opacityAnim.start()
}
div.rect-body {
width: this.rectWidth
opacity: this.rectOpacity
span.rect-label {
text { rect ${this.label} }
}
span.rect-status {
text { ${this.status} }
}
}
}
q-component stress-stage {
q-property somearray: [ 48, 64, 80, 96, 112, 128, 144, 160 ]
div.animation-stage {
for (num in this.somearray) {
stress-rect {
label: num
numSteps: num
}
}
}
}
stress-stage { }