Unify/application/demo/animations/animation.rotateMoveColor.js

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();

}