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.library.canvas.mycanvas;
const background_dark = '#404040',
text_dark = '#c0ffc0',
background_light = '#f0f0f0',
text_light = '#408f40';Create the demo Oval entity
const track = scrawl.makeOval({
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 Phrase entitys that will animate around the oval
const textGroup = scrawl.makeGroup({
name: 'text-group',
host: canvas.base.name,
});
scrawl.makePhrase({
name: 'loader-text-1',
group: textGroup,
weight: 'bold',
text: 'Loading',
size: '50px',
justify: 'center',
textPath: 'loader-track',
handleY: '120%',
delta: {
textPathPosition: -0.002
},
}).clone({
name: 'loader-text-2',
textPathPosition: 0.333,
}).clone({
name: 'loader-text-3',
textPathPosition: 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
const demoAnimation = scrawl.makeRender({
name: "demo-animation",
target: canvas,
afterShow: report,
});const checkE = (e) => {
if (e) {
if ("keydown" === e.type) {
if (32 === e.keycode) return true; // spacebar
if (13 === e.keycode) return true; // enter key
}
if ("click" === e.type) return true; // mouse click
if ("touchend" === e.type) return true; // tap
}
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"), 5000));
canvas.setNoPreferenceMotionAction(() => startAnimation("reduced-motion"));
const startButton = scrawl.addNativeListener(['click', 'keydown', 'touchend'], startAnimation, '#play');
const stopButton = 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);