import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';import * as scrawl from '../source/scrawl.js';
import { reportSpeed } from './utilities.js';We load GA code in the normal way through markup in the dom-006.html file (lines 11-21), and get a handle on the ga object here
const ga = window[window['GoogleAnalyticsObject'] || 'ga'];
let myTracker;Create a new tracker to handle tween and ticker action/progress, and set some attributes on it.
/** @ts-expect-error */
ga('create', 'UA-000000-0', 'auto', 'demoCanvasTracker');We can then incorporate the tracker’s functionality in our various hook functions defined further down in this script
/** @ts-expect-error */
ga(function() {
const ga = window[window['GoogleAnalyticsObject'] || 'ga'];
/** @ts-expect-error */
myTracker = ga.getByName('demoCanvasTracker');
myTracker.set('transport', 'beacon');
myTracker.set('campaignKeyword', 'Scrawl-canvas demo');Comment out the next line to send tracker packets (so they show up in the console)
myTracker.set('sendHitTask', null);
});const stack = scrawl.findStack('mystack');Namespacing boilerplate
const namespace = stack.name;
const name = (n) => `${namespace}-${n}`;Grab a handle to the ‘boat’ element, then clone it
const element = scrawl.findElement('myelement');
element.set({
startX: 'center',
startY: 'center',
handleX: 'center',
handleY: 200,
width: 80,
height: 42,
text: 'BOAT',
css: {
border: '1px solid blue',
borderRadius: '50%',
textAlign: 'center',
padding: '12px 0 0 0',
},
}).clone({
name: name('mysecondelement'),
handleY: 150,
scale: 0.9,
css: {
backgroundColor: 'lightblue',
},
}).clone({
name: name('mythirdelement'),
handleY: 100,
scale: 0.8,
roll: -40,
css: {
backgroundColor: 'lightgreen',
},
});Create tickers - testing Ticker clone and packet functionality
const modelTicker = scrawl.makeTicker({
name: name('modelTicker'),
cycles: 0,
duration: '12s'
});Test Ticker cloning
const ticker = modelTicker.clone({
name: name('myTicker'),
});Create, and start, tweens - testing Tween clone and packet functionality
scrawl.makeTween({
name: name('myTween'),
targets: element,
ticker: ticker,
duration: '100%',
time: 0,
definitions: [
{
attribute: 'roll',
start: 0,
end: 360
}
],
}).clone({
name: name('myClonedTween'),
targets: scrawl.findElement(name('mysecondelement')),
definitions: [
{
attribute: 'roll',
start: -20,
end: 340
}
],
}).clone({
name: name('mySecondClonedTween'),
targets: scrawl.findElement(name('mythirdelement')),
useNewTicker: true,
duration: '10s',
cycles: 0,
definitions: [
{
attribute: 'roll',
start: -40,
end: 320
}
]
});Build timeline actions
const red = { css: { backgroundColor: 'red' }},
purple = { css: { backgroundColor: 'purple' }},
brown = { css: { backgroundColor: 'brown' }},
orange = { css: { backgroundColor: 'orange' }},
yellow = { css: { backgroundColor: 'yellow' }},
gray = { css: { backgroundColor: 'gray' }},
green = { css: { backgroundColor: 'green' }},
blue = { css: { backgroundColor: 'blue' }};
scrawl.makeAction({
name: name('red'),ticker: name(‘myTicker’),
targets: element,
time: '6.25%',
action: function () { element.set(red) },
revert: function () { element.set(purple) },
}).clone({
name: name('brown'),
time: '18.75%',
action: function () { element.set(brown) },
revert: function () { element.set(red) },
}).clone({
name: name('orange'),
time: '31.25%',
action: function () { element.set(orange) },
revert: function () { element.set(brown) },
}).clone({
name: name('yellow'),
time: '43.75%',
action: function () { element.set(yellow) },
revert: function () { element.set(orange) },
}).clone({
name: name('gray'),
time: '56.25%',
action: function () { element.set(gray) },
revert: function () { element.set(yellow) },
}).clone({
name: name('green'),
time: '68.75%',
action: function () { element.set(green) },
revert: function () { element.set(gray) },
}).clone({
name: name('blue'),
time: '81.25%',
action: function () { element.set(blue) },
revert: function () { element.set(green) },
}).clone({
name: name('purple_1'),
time: '93.75%',
action: function () { element.set(purple) },
revert: function () { element.set(blue) },
}).clone({Set the color as soon as the action’s ticker starts to run
name: name('purple_2'),
time: '0%',
action: function () { element.set(purple) },
revert: function () { element.set(purple) },
});Test ticker.set({subscribers: […]}) functionality
ticker.set({
subscribers: [
name('red'),
scrawl.findTween(name('brown')),
],
});Test ticker.subscribe(arg, …) functionality
ticker.subscribe(
name('orange'),
scrawl.findTween(name('yellow')),
[
name('gray'),
name('green'),
],
scrawl.findTween(name('blue')),
[
scrawl.findTween(name('purple_1')),
name('purple_2'),
],
)Add some Google Analytics progress actions to one of the tickers
TODO: 0% times will fire the action function when the ticker is moving both forwards and backwards, but never fires the revert function. I don’t consider this to be a show stopper.
scrawl.makeAction({
ticker: name('myTicker'),
name: name('lapStarted'),
time: '0%',
action: function () {
if (myTracker) myTracker.send('event', 'Ticker progress', 'Ticker loop starting (forwards)', `Action ${this.name} on ${this.ticker}`) ;
},
revert: function () {
if (myTracker) myTracker.send('event', 'Ticker progress', 'Ticker loop starting (reversed)', `Action ${this.name} on ${this.ticker}`);
},
}).clone({
name: name('lapCompleted'),
time: '100%',
action: function () {
if (myTracker) myTracker.send('event', 'Ticker progress', '100% complete (forwards)', `Action ${this.name} on ${this.ticker}`);
},
revert: function () {
if (myTracker) myTracker.send('event', 'Ticker progress', '100% complete (reversed)', `Action ${this.name} on ${this.ticker}`);
},
}).clone({
name: name('halfwayThere'),
time: '50%',
action: function () {
if (myTracker) myTracker.send('event', 'Ticker progress', '50% complete (forwards)', `Action ${this.name} on ${this.ticker}`);
},
revert: function () {
if (myTracker) myTracker.send('event', 'Ticker progress', '50% complete (reversed)', `Action ${this.name} on ${this.ticker}`);
},
});Also add some Google Analytics code to one of the tweens
const smallboat = scrawl.findTween(name('mySecondClonedTween'));
smallboat.set({
onHalt: function () {
if (myTracker) myTracker.send('event', 'Tween state', 'halt', `Tween ${this.name} on ${this.ticker}`)
},
onResume: function () {
if (myTracker) myTracker.send('event', 'Tween state', 'resume', `Tween ${this.name} on ${this.ticker}`)
},
});ticker.run();
smallboat.run();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: stack,
afterShow: report,
});Event listener will reverse direction on the larger boats, while halting/restarting the smallest boat
const changeDirection = (e) => {
e.preventDefault();
e.returnValue = false;
ticker.reverse(true);
if (smallboat.isRunning()) smallboat.halt();
else smallboat.resume();
};
scrawl.addNativeListener('click', changeDirection, stack.domElement);console.log(scrawl.library);Test Tween object packet
console.log(scrawl.findTween(name('mySecondClonedTween')).saveAsPacket());RESULT:
[
"mystack-mySecondClonedTween",
"Tween",
"tween",
{
"name":"mystack-mySecondClonedTween",
"ticker":"mystack-mySecondClonedTween_ticker",
"duration":"10s",
"onHalt":"~~~\n if (myTracker) myTracker.send('event', 'Tween state', 'halt', `Tween ${this.name} on ${this.ticker}`)\n ",
"onResume":"~~~\n if (myTracker) myTracker.send('event', 'Tween state', 'resume', `Tween ${this.name} on ${this.ticker}`)\n ",
"targets":["mystack-mythirdelement"],
"definitions":[
{
"attribute":"roll",
"start":-40,
"end":320,
"engine":"linear"
}
]
}
]
Test Ticker object packet
console.log(modelTicker.saveAsPacket()); RESULT:
[
"mystack-modelTicker",
"Ticker",
"animationtickers",
{
"name":"mystack-modelTicker",
"duration":"12s",
"cycles":0
}
]