OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity
impress-2020/public/animate-test.html

151 lines
4.8 KiB
HTML
Raw Normal View History

test case for HTML5 animations
2020-09-21 06:52:36 -07:00
<!DOCTYPE html>
<html>
<head>
oops, assetProxy more things for animate-test.html
2020-09-21 07:07:47 -07:00
<script src="https://code.createjs.com/1.0.0/easeljs.min.js"></script>
<script src="https://code.createjs.com/1.0.0/tweenjs.min.js"></script>
<script src="/api/assetProxy?url=http://images.neopets.com/cp/items/data/000/000/564/564507_fc3216b9b8/all-item_foreground_lower.js"></script>
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
</head>
<body>
<div style="display: flex; justify-content: center;">
<div
style="
width: 100%;
max-width: 600px;
border: 1px solid #aaa;
position: relative;
"
>
<div style="padding-bottom: 100%;"></div>
<canvas
id="stage-canvas"
style="
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
"
></canvas>
</div>
</div>
add smooth fades, pause/play to animation test
2020-09-21 08:18:08 -07:00
<div style="margin-top: 1em; text-align: center;">
<button id="show-hide">Show/hide</button>
<button id="pause-play">Pause/play</button>
</div>
simplify animate-test code we got rid of the custom timing now that I learned about additional API hooks to do exactly what I want!
2020-09-21 15:57:01 -07:00
<div style="margin-top: 1em; text-align: center;">
FPS: <span id="fps-count">…</span>
</div>
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
<script>
remove preloadjs from animate test, to save bundle Well, there's no real bundle yet, but just was noticing that PreloadJS is like 100KB, and we're only using very very basic features. Simplify and save!
2020-09-21 09:33:07 -07:00
function loadImage(src) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = () => resolve(image);
image.onerror = (e) => reject(e);
image.src = src;
});
}
function proxyUrl(url) {
return "/api/assetProxy?url=" + encodeURIComponent(url);
}
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
async function main() {
const composition = Object.values(AdobeAn.compositions)[0];
const library = composition.getLibrary();
remove preloadjs from animate test, to save bundle Well, there's no real bundle yet, but just was noticing that PreloadJS is like 100KB, and we're only using very very basic features. Simplify and save!
2020-09-21 09:33:07 -07:00
const manifestImages = new Map(
library.properties.manifest.map(({ id, src }) => [
id,
loadImage(
proxyUrl(
"http://images.neopets.com/cp/items/data/000/000/564/564507_fc3216b9b8/" +
src
)
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
),
remove preloadjs from animate test, to save bundle Well, there's no real bundle yet, but just was noticing that PreloadJS is like 100KB, and we're only using very very basic features. Simplify and save!
2020-09-21 09:33:07 -07:00
])
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
);
remove preloadjs from animate test, to save bundle Well, there's no real bundle yet, but just was noticing that PreloadJS is like 100KB, and we're only using very very basic features. Simplify and save!
2020-09-21 09:33:07 -07:00
try {
await Promise.all(manifestImages.values());
} catch (e) {
console.error("Error loading images", e);
return;
}
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
const spriteSheets = composition.getSpriteSheet();
for (const { name, frames } of library.ssMetadata) {
remove preloadjs from animate test, to save bundle Well, there's no real bundle yet, but just was noticing that PreloadJS is like 100KB, and we're only using very very basic features. Simplify and save!
2020-09-21 09:33:07 -07:00
const image = await manifestImages.get(name);
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
spriteSheets[name] = new createjs.SpriteSheet({
remove preloadjs from animate test, to save bundle Well, there's no real bundle yet, but just was noticing that PreloadJS is like 100KB, and we're only using very very basic features. Simplify and save!
2020-09-21 09:33:07 -07:00
images: [image],
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
frames,
});
}
const movieClip = new library.allitem_foreground_lower();
const canvas = document.getElementById("stage-canvas");
const stage = new library.Stage(canvas);
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
add smooth fades, pause/play to animation test
2020-09-21 08:18:08 -07:00
stage.scaleX =
(canvas.offsetWidth * window.devicePixelRatio) /
library.properties.width;
stage.scaleY =
(canvas.offsetHeight * window.devicePixelRatio) /
library.properties.height;
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
add smooth fades, pause/play to animation test
2020-09-21 08:18:08 -07:00
movieClip.alpha = 0;
const tween = createjs.Tween.get(movieClip, { paused: true }).to(
{ alpha: 1 },
200
);
stage.on(
"drawend",
() => {
tween.paused = false;
},
null,
true
);
simplify animate-test code we got rid of the custom timing now that I learned about additional API hooks to do exactly what I want!
2020-09-21 15:57:01 -07:00
// TODO: I'm not 100% clear on why, but manually caching the movie and
// manually updating the cache at a 60FPS rate (that's how often
// the tick fires, regardless of movie framerate) seems to
// substantially improve performance of things like fade-in. I
// think it might just be perceived performance, because the
// alpha applies to a cached raster instead of the individual
// layers, so it looks better? Although hell, maybe applying
// alpha to a cached raster just _is_ faster than applying it to
// like 200 overlapping layers, that would just make sense...
movieClip.cache(
0,
0,
library.properties.width,
library.properties.height
);
movieClip.on("tick", () => movieClip.updateCache());
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
stage.addChild(movieClip);
simplify animate-test code we got rid of the custom timing now that I learned about additional API hooks to do exactly what I want!
2020-09-21 15:57:01 -07:00
movieClip.framerate = library.properties.fps;
add smooth fades, pause/play to animation test
2020-09-21 08:18:08 -07:00
createjs.Ticker.timingMode = createjs.Ticker.RAF;
simplify animate-test code we got rid of the custom timing now that I learned about additional API hooks to do exactly what I want!
2020-09-21 15:57:01 -07:00
createjs.Ticker.on("tick", (e) => stage.update(e));
add smooth fades, pause/play to animation test
2020-09-21 08:18:08 -07:00
document.getElementById("show-hide").addEventListener("click", () => {
tween.reversed = !tween.reversed;
tween.setPosition(0);
tween.paused = false;
});
document.getElementById("pause-play").addEventListener("click", () => {
simplify animate-test code we got rid of the custom timing now that I learned about additional API hooks to do exactly what I want!
2020-09-21 15:57:01 -07:00
movieClip.tickEnabled = !movieClip.tickEnabled;
add smooth fades, pause/play to animation test
2020-09-21 08:18:08 -07:00
});
test case for HTML5 animations
2020-09-21 06:52:36 -07:00
}
main();
</script>
</body>
</html>
Copy permalink