RenderAnimation objects are animations that aim to simplify coding up Display cycles. They remove the need to worry about Promises, while at the same time exposing a suite of Display cycle hooks - attributes which can accept a function to be run at various points during a Display cycle
commence - triggers at the start of the Display cycle, before the clear cascade begins.afterClear - triggers when the clear cascade completes, before the compile cascade begins.afterCompile - triggers when the compile cascade completes, before the show cascade begins.afterShow - triggers at the end of the Display cycle, after the show cascade completes.afterCreated - triggers once, after the first Display cycle completes.error - triggers when the Display cycle throws an error.Note that all the above functions should be normal, synchronous functions. The Animation object will run them within its main, asynchronous (Promise-based) function.
The RenderAnimation object also supports the Animation object’s animation hook functions:
onRun - triggers each time the RenderAnimation object’s run function is invokedonHalt - triggers each time the RenderAnimation object’s halt function is invokedonKill - triggers each time the RenderAnimation object’s kill function is invokedIn addition to RenderAnimation attributes, the factory’s argument object can include two additional flags, which influence the make functionality:
RenderAnimation.observe attributeimport { animation, artefact, constructors } from '../core/library.js';
import { clear, compile, show } from '../core/document.js';
import { makeAnimationObserver } from '../core/events.js';
import { mergeOver, pushUnique, removeItem, xt, λnull, λthis } from '../core/utilities.js';
import { animate, resortAnimations } from '../core/animationloop.js';
import baseMix from '../mixin/base.js';const RenderAnimation = function (items = {}) {
let target;Handle cases where no target has been defined - the animation will affect all stacks and canvases
if (!items.target) target = {
clear: clear,
compile: compile,
show: show
};Handle cases where we have multiple targets - each needs its own render animation
else if (Array.isArray(items.target)) {
let multiReturn = []
items.target.forEach(tempTarget => {
let tempItems = Object.assign({}, items);
tempItems.name = `${tempItems.name}_${tempTarget.name}`;
tempItems.target = tempTarget;
multiReturn.push(new RenderAnimation(tempItems));
});
return multiReturn;
}Default case where we have a single target
else target = (items.target.substring) ? artefact[items.target] : items.target;Without a target, we can progress no further
if (!target || !target.clear || !target.compile || !target.show) return false;All should be good - proceed with animation creation
this.makeName(items.name);These attributes are the same as for the Animation object
this.order = (xt(items.order)) ? items.order : this.defs.order;
this.onRun = items.onRun || λnull;
this.onHalt = items.onHalt || λnull;
this.onKill = items.onKill || λnull;These attributes are specific to RenderAnimation
this.target = target;
this.commence = items.commence || λnull;
this.afterClear = items.afterClear || λnull;
this.afterCompile = items.afterCompile || λnull;
this.afterShow = items.afterShow || λnull;
this.afterCreated = items.afterCreated || λnull;
this.error = items.error || λnull;
this.readyToInitialize = true;
let self = this; this.fn = function () {
return new Promise((resolve, reject) => {
Promise.resolve(self.commence())
.then(() => self.target.clear())
.then(() => Promise.resolve(self.afterClear()))
.then(() => self.target.compile())
.then(() => Promise.resolve(self.afterCompile()))
.then(() => self.target.show())
.then(() => Promise.resolve(self.afterShow()))
.then(() => {
if (self.readyToInitialize) {
self.afterCreated();
self.readyToInitialize = false;
}
resolve(true);
})
.catch(err => {
self.error(err);
reject(err);
});
});
}Register in Scrawl-canvas library
this.register();The observer attribute
if (items.observer) this.observer = makeAnimationObserver(this, this.target);Start the animation immediately, unless flagged otherwise
if(!items.delay) this.run();
return this;
};let P = RenderAnimation.prototype = Object.create(Object.prototype);
P.type = 'RenderAnimation';
P.lib = 'animation';
P.isArtefact = false;
P.isAsset = false;P = baseMix(P);let defaultAttributes = {order - positive integer Number. Determines the order in which each animation object will be actioned during the Display cycle. Higher order animations will be processed after lower order animations.
order: 1,onRun, onHalt, onKill
The Animation object supports the following animation hook functions:
onRun - triggers each time the animation object’s run function is invoked.onHalt - triggers each time the animation object’s halt function is invoked.onKill - triggers each time the animation object’s kill function is invoked. onRun: null,
onHalt: null,
onKill: null,commence, afterClear, afterCompile, afterShow, afterCreated, error
RenderAnimation objects support the following Display cycle hook functions:
commence - triggers at the start of the Display cycle, before the clear cascade begins.afterClear - triggers when the clear cascade completes, before the compile cascade begins.afterCompile - triggers when the compile cascade completes, before the show cascade begins.afterShow - triggers at the end of the Display cycle, after the show cascade completes.afterCreated - triggers once, after the first Display cycle completes.error - triggers when the Display cycle throws an error. commence: null,
afterClear: null,
afterCompile: null,
afterShow: null,
afterCreated: null,
error: null,target - handle to the Stack or Cell wrapper object; each can have its own Display cycle animation.
target: null,
};
P.defs = mergeOver(P.defs, defaultAttributes);Animations do not take part in the packet or clone systems; they can, however, be used for importing and actioning packets as they retain those base functions
P.stringifyFunction = λnull;
P.processPacketOut = λnull;
P.finalizePacketOut = λnull;
P.saveAsPacket = function () {
return `[${this.name}, ${this.type}, ${this.lib}, {}]`
};P.clone = λthis;Stops the animation if it is already running, and removes it from the Scrawl-canvas library
P.kill = function () {
this.onKill();
removeItem(animate, this.name);
resortAnimations();
this.deregister();
return true;
};run - start the animation, if it is not already running
P.run = function () {
this.onRun();
pushUnique(animate, this.name);
resortAnimations();
return this;
};isRunning - returns Boolean true if animation is running; false otherwise
P.isRunning = function () {
return (animate.indexOf(this.name) >= 0) ? true : false;
};halt - stop the animation, if it is already running
P.halt = function () {
this.onHalt();
removeItem(animate, this.name);
resortAnimations();
return this;
};let report = function () {
let testTicker = Date.now(),
testTime, testNow,
testMessage = document.querySelector('#reportmessage');
return function () {
testNow = Date.now();
testTime = testNow - testTicker;
testTicker = testNow;
testMessage.textContent = `Screen refresh: ${Math.ceil(testTime)}ms`;
};
}();
scrawl.makeRender({
name: 'demo-animation',
target: scrawl.library.canvas['my-canvas-id'],
afterShow: report,
});const makeRender = function (items) {
return new RenderAnimation(items);
};
constructors.RenderAnimation = RenderAnimation;export {
makeRender,
};