First commit

application/demo/animations/animation.rotateMoveColor.js

@@ -0,0 +1,145 @@
+
+
+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();
+
+}