145 lines
2.3 KiB
JavaScript
145 lines
2.3 KiB
JavaScript
|
|
|
|
import panelRow from '/elements/panel/row.js';
|
|
|
|
import label from '/elements/label.js';
|
|
|
|
|
|
class animationBlock{
|
|
|
|
width = 100;
|
|
|
|
height = 100;
|
|
|
|
margin = 20;
|
|
|
|
background = "#03a9f4";
|
|
|
|
|
|
zIndex = 4;
|
|
|
|
|
|
create() {
|
|
|
|
this.rotateAnimation = this.createAnimation("rotateAnimation");
|
|
|
|
var key = this.rotateAnimation.createKeyFrame( 0 );
|
|
|
|
key.setProperty( "rotate", "0deg" );
|
|
|
|
|
|
var key = this.rotateAnimation.createKeyFrame( 20 );
|
|
|
|
key.setProperty( "rotate", "60deg" );
|
|
|
|
|
|
var key = this.rotateAnimation.createKeyFrame( 60 );
|
|
|
|
key.setProperty( "rotate", "120deg" );
|
|
|
|
|
|
var key = this.rotateAnimation.createKeyFrame( 100 );
|
|
|
|
key.setProperty( "rotate", "0deg" );
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.moveAnimation = this.createAnimation("moveAnimation");
|
|
|
|
var key = this.moveAnimation.createKeyFrame( 0 );
|
|
|
|
key.setProperty( "margin-right", 12 );
|
|
|
|
|
|
var key = this.moveAnimation.createKeyFrame( 20 );
|
|
|
|
//key.setProperty( "margin-top", 200 );
|
|
key.setProperty( "margin-right", 40 );
|
|
|
|
|
|
var key = this.moveAnimation.createKeyFrame( 30 );
|
|
|
|
//key.setProperty( "margin-top", 500 );
|
|
key.setProperty( "margin-right", 120 );
|
|
|
|
|
|
var key = this.moveAnimation.createKeyFrame( 50 );
|
|
|
|
key.setProperty( "margin-top", 200 );
|
|
|
|
|
|
var key = this.moveAnimation.createKeyFrame( 100 );
|
|
|
|
//key.setProperty( "margin-top", 0 );
|
|
|
|
|
|
|
|
|
|
this.backgroundAnimation = this.createAnimation("backgroundAnimation");
|
|
|
|
var key = this.backgroundAnimation.createKeyFrame( 0 );
|
|
|
|
key.setProperty( "background", "#03a9f4" );
|
|
|
|
|
|
var key = this.backgroundAnimation.createKeyFrame( 40 );
|
|
|
|
key.setProperty( "background", "#a6e22e" );
|
|
|
|
|
|
|
|
var key = this.backgroundAnimation.createKeyFrame( 70 );
|
|
|
|
key.setProperty( "background", "#f92672" );
|
|
|
|
|
|
|
|
var key = this.backgroundAnimation.createKeyFrame( 100 );
|
|
|
|
key.setProperty( "background", "#03a9f4" );
|
|
|
|
|
|
}
|
|
|
|
async click() {
|
|
|
|
|
|
this.text = "Rotating and moving.";
|
|
|
|
this.rotateAnimation.play("2s");
|
|
|
|
await this.moveAnimation.play("3s");
|
|
|
|
|
|
|
|
this.text = "Changing background color.";
|
|
|
|
await this.backgroundAnimation.play("2s");
|
|
|
|
|
|
this.text = "Animation is done."
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
class rowLabel extends label{
|
|
|
|
flex = "1";
|
|
|
|
}
|
|
|
|
|
|
export default class row extends panelRow{
|
|
|
|
boxWidth = "95%"
|
|
|
|
rowLabel = new rowLabel("Rotate + Move + Background");
|
|
|
|
animationBlock = new animationBlock();
|
|
|
|
} |