AuroraMiddleware/skia2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[lottie-web-perf] Make similar to skottie-wasm-perf

Browse Source 
* Take 25 evenly distributed sample points.
* Fix bug where goToAndStop was not seeking to a frame.
* Make sure it draws to 1000x1000.

NoTry: true
Bug: skia:9195
Change-Id: I73139e41542d22329bb9e3383059ac50011a9882
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/223300
Commit-Queue: Ravi Mistry <rmistry@google.com>
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
This commit is contained in:
Ravi Mistry 2019-06-24 14:53:55 -04:00 committed by Skia Commit-Bot
parent f52bce41f7
commit 137822513c
1 changed files with 66 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
tools/lottie-web-perf/lottie-web-perf.html
View File

@ -7,24 +7,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/res/lottie.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
body,
main,
.anim {
body {
margin: 0;
padding: 0;
}
main {
display: flex;
width: 1000px;
height: 1000px;
flex-flow: row wrap;
}
</style>
</head>
<body>
<main>
<div class=anim></div>
<div style="width:1000px;height:1000px" class=anim></div>
</main>
<script type="text/javascript" charset="utf-8">
(function () {
@ -32,55 +23,82 @@
const RENDERER = 'svg';
const FRAMES = 25;
// First load the animation with autoplay false. We will control which
// frame to seek to and then will measure performance.
let anim = lottie.loadAnimation({
// Do an initial load to figure out how many frames we are working with
// for calculating seek values later.
let initialAnim = lottie.loadAnimation({
container: document.querySelector('.anim'),
renderer: RENDERER,
loop: false,
autoplay: false,
autoplay: true,
path: PATH,
rendererSettings: {
preserveAspectRatio:'xMidYMid meet'
},
});
console.log("start")
const t_rate = 1.0 / (FRAMES - 1);
let time = 0;
let max = -1;
let min = 1000000000;
let seek = 0;
let frame = 0;
const drawFrame = () => {
if (frame >= FRAMES) {
console.log("On average, took "+ (time/FRAMES) +" us" );
// These are global variables to talk with puppeteer.
window._avgFrameTimeUs = time/FRAMES;
window._minFrameTimeUs = min;
window._maxFrameTimeUs = max;
window._lottieWebDone = true;
return;
}
initialAnim.addEventListener('data_ready', (e) => {
// We no longer need initialAnim.
lottie.destroy()
console.log("Lottie has " + initialAnim.totalFrames + "total frames");
totalFrames = initialAnim.totalFrames;
let start = window.performance.now();
anim.goToAndStop(seek, true /* isFrame */);
const t = (window.performance.now() - start) * 1000;
// Load the animation with autoplay false. We will control which
// frame to seek to and then will measure performance.
let anim = lottie.loadAnimation({
container: document.querySelector('.anim'),
renderer: RENDERER,
loop: false,
autoplay: false,
path: PATH,
rendererSettings: {
preserveAspectRatio:'xMidYMid meet'
},
});
time += t;
console.log("Frame " + frame + " took " + t + " us");
console.log("Used seek " + seek);
if (t < min) {
min = t;
}
if (t > max) {
max = t;
}
seek += t_rate;
frame++;
console.log("start")
const t_rate = 1.0 / (FRAMES - 1);
let time = 0;
let max = -1;
let min = 1000000000;
let frame = 0;
const drawFrame = () => {
if (frame >= FRAMES) {
console.log("On average, took "+ (time/FRAMES) +" us" );
// These are global variables to talk with puppeteer.
window._avgFrameTimeUs = time/FRAMES;
window._minFrameTimeUs = min;
window._maxFrameTimeUs = max;
window._lottieWebDone = true;
return;
}
let t1 = Math.max(Math.min(t_rate * frame, 1.0), 0.0);
let seekToFrame = totalFrames * t1;
if (seekToFrame >= totalFrames-1) {
// bodymovin player sometimes draws blank when requesting
// to draw the very last frame. Subtracting a small value
// seems to fix this and make it draw the last frame.
seekToFrame -= .001;
}
let start = window.performance.now();
anim.goToAndStop(seekToFrame, true /* isFrame */);
const t = (window.performance.now() - start) * 1000;
time += t;
console.log("Frame " + frame + " took " + t + " us");
console.log("Used seek: " + (seekToFrame/totalFrames));
if (t < min) {
min = t;
}
if (t > max) {
max = t;
}
frame++;
window.requestAnimationFrame(drawFrame);
};
window.requestAnimationFrame(drawFrame);
};
window.requestAnimationFrame(drawFrame);
});
})();
</script>
</body>