import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';const canvas = scrawl.findCanvas('mycanvas');Namespacing boilerplate
const namespace = canvas.name;
const name = (n) => `${namespace}-${n}`;color variables
const background_dark = '#404040',
text_dark = '#c0ffc0',
background_light = '#f0f0f0',
text_light = '#408f40';Create the demo Oval entity
const track = scrawl.makeOval({
name: name('loader-track'),
radiusX: '22%',
radiusY: '12%',
start: ['center', 'center'],
handle: ['center', 'center'],
strokeStyle: '#808080',
lineWidth: 10,
method: 'draw',
delta: {
roll: 0.2
},
useAsPath: true,
precision: 0.1
});Create the three EnhancedLabel entitys that will animate around the oval
const textGroup = scrawl.makeGroup({
name: name('text-group'),
host: canvas.get('baseName'),
});
scrawl.makeEnhancedLabel({
name: name('loader-text-1'),
group: textGroup,
fontString: 'bold 50px Arial, sans-serif',
text: 'Loading',
textHandle: ['center', '120%'],
layoutTemplate: name('loader-track'),
useLayoutTemplateAsPath: true,
constantSpeedAlongPath: true,
breakTextOnSpaces: false,
delta: {
pathPosition: -0.002
},
}).clone({
name: name('loader-text-2'),
pathPosition: 0.333,
}).clone({
name: name('loader-text-3'),
pathPosition: 0.667,
});Setup the actions to take, to match the animation scene to the user’s preference for dark or light (default) color scheme
canvas.setColorSchemeDarkAction(() => {
canvas.set({ backgroundColor: background_dark});
textGroup.setArtefacts({ fillStyle: text_dark});
});
canvas.setColorSchemeLightAction(() => {
canvas.set({ backgroundColor: background_light});
textGroup.setArtefacts({ fillStyle: text_light});
});Function to display frames-per-second data, and other information relevant to the demo
const report = reportSpeed('#reportmessage');Create the Display cycle animation
scrawl.makeRender({
name: name('animation'),
target: canvas,
afterShow: report,
});const checkE = (e) => {
if (e) {
if ('keydown' === e.type) {spacebar
if (32 === e.keycode) return true;enter key
if (13 === e.keycode) return true;
}mouse click
if ('click' === e.type) return true;tap
if ('touchend' === e.type) return true;
}
return false;
};
const startAnimation = (e) => {
if (e === 'reduced-motion' || checkE(e)) {
track.set({ noDeltaUpdates: false });
textGroup.setArtefacts({ noDeltaUpdates: false });
}
};
const stopAnimation = (e) => {
if (e === 'reduced-motion' || checkE(e)) {
track.set({ noDeltaUpdates: true });
textGroup.setArtefacts({ noDeltaUpdates: true });
}
};
canvas.setReduceMotionAction(() => setTimeout(() => stopAnimation('reduced-motion'), 1000));
canvas.setNoPreferenceMotionAction(() => startAnimation('reduced-motion'));
scrawl.addNativeListener(['click', 'keydown', 'touchend'], startAnimation, '#play');
scrawl.addNativeListener(['click', 'keydown', 'touchend'], stopAnimation, '#pause');In chrome browsers, open the inspector and enable the Rendering view - this includes selectors to emulate both prefers-reduced-motion and prefers-color-scheme user choices.
console.log(scrawl.library);