67 lines
896 B
JavaScript
67 lines
896 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("rotateAnimation");
|
||
|
|
|
||
|
|
var key = this.animation.createKeyFrame( 0 );
|
||
|
|
|
||
|
|
key.setProperty( "skewX", "0deg" );
|
||
|
|
|
||
|
|
|
||
|
|
var key = this.animation.createKeyFrame( 20 );
|
||
|
|
|
||
|
|
key.setProperty( "skewX", "14deg" );
|
||
|
|
|
||
|
|
|
||
|
|
var key = this.animation.createKeyFrame( 60 );
|
||
|
|
|
||
|
|
key.setProperty( "skewX", "52deg" );
|
||
|
|
|
||
|
|
|
||
|
|
var key = this.animation.createKeyFrame( 100 );
|
||
|
|
|
||
|
|
key.setProperty( "skewX", "0deg" );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
async click() {
|
||
|
|
|
||
|
|
this.animation.play("2s");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
class rowLabel extends label{
|
||
|
|
|
||
|
|
flex = "1";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export default class row extends panelRow{
|
||
|
|
|
||
|
|
boxWidth = "95%"
|
||
|
|
|
||
|
|
rowLabel = new rowLabel("skewX");
|
||
|
|
|
||
|
|
animationBlock = new animationBlock();
|
||
|
|
|
||
|
|
}
|