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

import panelRow 					from '/elements/panel/row.js';

import label 						from '/elements/label.js';

import button 						from '/elements/button.js';

class animationBlock{

	width			= 100;

	height			= 100;

	margin			= 20;

	background		= "#03a9f4";

	create() {

		this.animation = this.createAnimation("reverseAnimation");
/*
		var key = this.animation.createKeyFrame( 0 );

		key.setProperty( "rotate", "0deg" );


		var key = this.animation.createKeyFrame( 20 );

		key.setProperty( "rotate", "60deg" );


		var key = this.animation.createKeyFrame( 60 );

		key.setProperty( "rotate", "120deg" );


		var key = this.animation.createKeyFrame( 100 );

		key.setProperty( "rotate", "0deg" );

		*/
		var key = this.animation.createKeyFrame( 0 );

		key.setProperty( "rotate", "0deg" );



		var key = this.animation.createKeyFrame( 100 );

		key.setProperty( "rotate", "360deg" );

		this.animation.duration = "2s"

		this.animation.iterationCount = "infinite"

		this.animation.fillMode = "forwards"
	}

	async mouseover() {




		//this.animation.play();

	}

	async mouseleave() {

		//this.animation.pause();

	}

}

class forwardButton extends button{

	text	= "Direction Forward";

	click() {

		var animation	= this.parent.parent.animationBlock.animation;

		animation.direction		= "normal"

	}


}

class backwardButton extends button{

	text	= "Direction  Backward";

	click() {

		var animation	= this.parent.parent.animationBlock.animation;

		animation.direction		= "reverse"

	}
	
}


class pauseButton extends button{

	text	= "Pause";

	click() {

		var animation	= this.parent.parent.animationBlock.animation;

		
		animation.pause();
	}
	
}

class playButton extends button{

	text	= "Play";

	click() {

		var animation	= this.parent.parent.animationBlock.animation;

		animation.play();

	}
	
}

class stopButton extends button{

	text	= "Stop";

	click() {

		var animation	= this.parent.parent.animationBlock.animation;

		animation.stop();

	}
	
}


class rowLabel extends label{

	flex = "1";

} 

class buttons{



	playButton			= new playButton();

	pauseButton			= new pauseButton();

	stopButton			= new stopButton();

	forwardButton		= new forwardButton();

	backwardButton		= new backwardButton();


	flexDirection		= "column"

}



export default class row extends panelRow{

	boxWidth			= "95%"

	rowLabel			= new rowLabel("Reverse");

	buttons				= new buttons();

	animationBlock		= new animationBlock();


}