git_clone/thorvg
1
0
Fork 0
mirror of https://github.com/thorvg/thorvg.git synced 2025-06-08 21:53:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

web: Reduce initial playing resources

Browse source 
Previously, the Intersection Observer doesn't filter hidden animations when page just loaded.

Ensure that the only visible animations to be played. Hidden resources will be frozen in the initial load.
This commit is contained in:
Jinny You 2024-05-22 18:06:11 +09:00 • committed by Hermet Park
parent 7e721e8ba7
commit 9c5eafd74e
1 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
web/src/lottie-player.ts
View file

@ -151,20 +151,6 @@ const _wait = (timeToDelay: number) => {
return new Promise((resolve) => setTimeout(resolve, timeToDelay))
};
const _observerCallback = (entries: IntersectionObserverEntry[]) => {
const entry = entries[0];
const target = entry.target as LottiePlayer;
if (entry.isIntersecting) {
if (target.currentState === PlayerState.Frozen) {
target.play();
}
} else if (target.currentState === PlayerState.Playing) {
target.freeze();
target.dispatchEvent(new CustomEvent(PlayerEvent.Freeze));
}
}
const _downloadFile = (fileName: string, blob: Blob) => {
const link = document.createElement('a');
link.setAttribute('href', URL.createObjectURL(blob));
@ -276,6 +262,7 @@ export class LottiePlayer extends LitElement {
private _counter: number = 1;
private _timer?: ReturnType<typeof setInterval>;
private _observer?: IntersectionObserver;
private _observable: boolean = false;
private async _init(): Promise<void> {
if (!_module) {
@ -298,12 +285,27 @@ export class LottiePlayer extends LitElement {
}
}
private _observerCallback(entries: IntersectionObserverEntry[]) {
const entry = entries[0];
const target = entry.target as LottiePlayer;
target._observable = entry.isIntersecting;
if (entry.isIntersecting) {
if (target.currentState === PlayerState.Frozen) {
target.play();
}
} else if (target.currentState === PlayerState.Playing) {
target.freeze();
target.dispatchEvent(new CustomEvent(PlayerEvent.Freeze));
}
}
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
this._canvas = this.shadowRoot!.querySelector('#thorvg-canvas') as HTMLCanvasElement;
this._canvas.width = this._canvas.offsetWidth;
this._canvas.height = this._canvas.offsetHeight;
this._observer = new IntersectionObserver(_observerCallback);
this._observer = new IntersectionObserver(this._observerCallback);
this._observer.observe(this);
if (!this._TVG) {
@ -457,8 +459,13 @@ export class LottiePlayer extends LitElement {
return;
}
this.currentState = PlayerState.Playing;
window.requestAnimationFrame(this._animLoop.bind(this));
if (this._observable) {
this.currentState = PlayerState.Playing;
window.requestAnimationFrame(this._animLoop.bind(this));
return;
}
this.currentState = PlayerState.Frozen;
}
/**