69 lines
943 B
JavaScript
69 lines
943 B
JavaScript
|
|
||
|
|
|
||
|
|
import panelRow from '/elements/panel/row.js';
|
||
|
|
|
||
|
|
import label from '/elements/label.js';
|
||
|
|
|
||
|
|
|
||
|
|
class animationBlock{
|
||
|
|
|
||
|
|
width = 100;
|
||
|
|
|
||
|
|
height = 100;
|
||
|
|
|
||
|
|
margin = 20;
|
||
|
|
|
||
|
|
background = "#03a9f4";
|
||
|
|
|
||
|
|
create() {
|
||
|
|
|
||
|
|
this.animation = this.createAnimation("backgroundAnimation");
|
||
|
|
|
||
|
|
var key = this.animation.createKeyFrame( 0 );
|
||
|
|
|
||
|
|
key.setProperty( "background", "#03a9f4" );
|
||
|
|
|
||
|
|
|
||
|
|
var key = this.animation.createKeyFrame( 40 );
|
||
|
|
|
||
|
|
key.setProperty( "background", "#a6e22e" );
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var key = this.animation.createKeyFrame( 70 );
|
||
|
|
|
||
|
|
key.setProperty( "background", "#f92672" );
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var key = this.animation.createKeyFrame( 100 );
|
||
|
|
|
||
|
|
key.setProperty( "background", "#03a9f4" );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
async click() {
|
||
|
|
|
||
|
|
this.animation.play("2s");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
class rowLabel extends label{
|
||
|
|
|
||
|
|
flex = "1";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export default class row extends panelRow{
|
||
|
|
|
||
|
|
boxWidth = "95%"
|
||
|
|
|
||
|
|
rowLabel = new rowLabel("Background color");
|
||
|
|
|
||
|
|
animationBlock = new animationBlock();
|
||
|
|
|
||
|
|
}
|