163 lines
2.5 KiB
JavaScript
163 lines
2.5 KiB
JavaScript
/*
|
|
|
|
Copyright (c) 2020, 2023, The Unified Company.
|
|
|
|
This code is part of Unify.
|
|
|
|
This program is free software; you can redistribute it and/or modify
|
|
it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE,
|
|
as published by the Free Software Foundation.
|
|
See the GNU AFFERO GENERAL PUBLIC LICENSE, for more details.
|
|
|
|
https://unifyjs.org
|
|
|
|
*/
|
|
|
|
import keyFrame from "./animation.keyFrame.js";
|
|
|
|
export default class animation{
|
|
|
|
name;
|
|
|
|
element;
|
|
|
|
keyFrames = new Array();
|
|
|
|
animationManager;
|
|
|
|
duration;
|
|
|
|
|
|
createKeyFrame( percent ) {
|
|
|
|
var newKeyFrame = new keyFrame();
|
|
|
|
newKeyFrame.percent = percent;
|
|
|
|
this.keyFrames.push( newKeyFrame );
|
|
|
|
return newKeyFrame;
|
|
|
|
}
|
|
|
|
createPromiseFunction( id ) {
|
|
|
|
var that = this;
|
|
|
|
function promiseFunction( resolveFunction ){
|
|
|
|
var promiseObject = new Object;
|
|
|
|
promiseObject.id = id;
|
|
|
|
promiseObject.resolve = resolveFunction;
|
|
|
|
that.animationManager.addPromise( promiseObject );
|
|
|
|
}
|
|
|
|
|
|
return promiseFunction;
|
|
|
|
}
|
|
|
|
async stop() {
|
|
|
|
if( !this.element.classList.contains("keyFrameAnimations") ) {
|
|
|
|
var animationClassName = this.animationManager.getAnimationClassName();
|
|
|
|
this.element.classList.remove( animationClassName );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
async pause() {
|
|
|
|
this.element.classList.add("pause-animation");
|
|
|
|
}
|
|
|
|
setDuration( duration ) {
|
|
|
|
this.duration = duration;
|
|
|
|
}
|
|
|
|
setDirection( direction ) {
|
|
|
|
this.direction = direction;
|
|
|
|
}
|
|
|
|
setIterationCount( iterationCount ) {
|
|
|
|
this.iterationCount = iterationCount;
|
|
|
|
}
|
|
|
|
setFillMode( fillMode ) {
|
|
|
|
this.fillMode = fillMode;
|
|
|
|
}
|
|
|
|
|
|
async play( duration ) {
|
|
|
|
if( this.element.classList.contains("pause-animation") ) {
|
|
|
|
this.element.classList.remove("pause-animation");
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
if( !this.element.classList.contains("keyFrameAnimations") ) {
|
|
|
|
var animationClassName = this.animationManager.getAnimationClassName();
|
|
|
|
this.element.classList.add( animationClassName );
|
|
|
|
}
|
|
|
|
if( duration ) {
|
|
|
|
this.duration = duration;
|
|
|
|
}
|
|
|
|
this.active = true;
|
|
|
|
var source = this.animationManager.composeCss();
|
|
|
|
this.writeStyleToDOM( source );
|
|
|
|
var promiseFunction = this.createPromiseFunction( this.id );
|
|
|
|
var promise = new Promise( promiseFunction );
|
|
|
|
this.animationManager.createEventListener();
|
|
|
|
await promise;
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
writeStyleToDOM( source ) {
|
|
|
|
var style = document.createElement("style")
|
|
|
|
style.type = 'text/css';
|
|
|
|
style.appendChild( document.createTextNode( source ) );
|
|
|
|
|
|
document.getElementsByTagName("head")[0].appendChild( style );
|
|
|
|
}
|
|
|
|
} |