skia2/experimental/skottiekit/examples/index.html
Kevin Lubick 4ad6b50df3 [canvaskit] Fix some other usages of .ready
Leftover from https://skia-review.googlesource.com/c/skia/+/291182

Change-Id: I7350839d43299846e9e9cbc58425013eb063b041
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/291356
Reviewed-by: Kevin Lubick <kjlubick@google.com>
2020-05-21 14:52:53 +00:00

123 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkottieKit Demo</title>
<script type="text/javascript" src="/bin/skottiekit.js"></script>
<script type="text/javascript" charset="utf-8">
const bootTime = performance.now();
const cdn = 'https://storage.googleapis.com/skia-cdn/misc/';
// loadKit resolves with SkottieKit.
const loadKit = SkottieKitInit({
locateFile: (file) => '/bin/'+file,
});
loadKit.then(() => {
const n = performance.now();
console.log(`loaded Kit in ${(n - bootTime).toFixed(2)} ms`)
});
const loadLegoJSON = fetch(cdn + 'lego_loader.json').then((resp) => {
return resp.text();
});
const loadPartyJSON = fetch(cdn + 'confetti.json').then((resp) => {
return resp.text();
});
const loadDrinksJSON = fetch(cdn + 'drinks.json').then((resp) => {
return resp.text();
});
const loadOnboardingJSON = fetch(cdn + 'onboarding.json').then((resp) => {
return resp.text();
});
function SkottieDemo(values, canvasID, width=400, height=400) {
const [SkottieKit, legoJSON] = values;
const animation = SkottieKit.MakeManagedAnimation(legoJSON);
const duration = animation.duration() * 1000;
const size = animation.size();
const bounds = {fLeft: 0, fTop: 0, fRight: width, fBottom: height};
const surface = SkottieKit.MakeCanvasSurface(canvasID);
if (!surface) {
console.error('Could not make surface');
return;
}
const firstFrame = Date.now();
const clearColor = SkottieKit.WHITE;
function drawFrame(canvas) {
const seek = ((Date.now() - firstFrame) / duration) % 1.0;
const damage = animation.seek(seek);
if (damage.fRight > damage.fLeft && damage.fBottom > damage.fTop) {
canvas.clear(clearColor);
animation.render(canvas, bounds);
}
surface.requestAnimationFrame(drawFrame);
}
surface.requestAnimationFrame(drawFrame);
}
const legosAnimating = Promise.all([loadKit, loadLegoJSON]).then((values) => {
SkottieDemo(values, 'legos', 400, 400);
});
const partyAnimating = Promise.all([loadKit, loadPartyJSON]).then((values) => {
SkottieDemo(values, 'party', 400, 400);
});
const drinksAnimating = Promise.all([loadKit, loadDrinksJSON]).then((values) => {
SkottieDemo(values, 'drinks', 400, 400);
});
const onboardingAnimating = Promise.all([loadKit, loadOnboardingJSON]).then((values) => {
SkottieDemo(values, 'onboarding', 400, 400);
});
Promise.all([legosAnimating, partyAnimating, drinksAnimating, onboardingAnimating]).then(() => {
const frames = new Float64Array(100);
let idx = 0;
let now = performance.now();
function benchFrame() {
frames[idx] = performance.now() - now;
idx++;
if (idx < frames.length) {
now = performance.now();
window.requestAnimationFrame(benchFrame);
} else {
let out = '';
for (const frameTime of frames) {
out += frameTime.toFixed(2);
out += '\n';
}
console.log(out);
}
}
window.requestAnimationFrame(benchFrame);
})
</script>
<style>
canvas {
border: 1px dashed #AAA;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<h1> SkottieKit</h1>
<canvas id=legos width=400 height=400></canvas>
<canvas id=party width=400 height=400></canvas>
<canvas id=drinks width=400 height=400></canvas>
<canvas id=onboarding width=400 height=400></canvas>
</body>
</html>