mirror of
https://github.com/thorvg/thorvg.git
synced 2025-06-14 20:14:37 +00:00
infra: removed web support
Separated the web support into a new project repository. https://github.com/thorvg/thorvg.web This will help maintain the core logic more efficiently. issue: https://github.com/thorvg/thorvg/issues/2297
This commit is contained in:
Hermet Park
Hermet Park
parent
7b9bebe1de
commit
b19ae5b8c0
11 changed files with 0 additions and 3874 deletions
|
|
@ -1,31 +0,0 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
},
|
||||
extends: ["standard-with-typescript", "plugin:wc/best-practice"],
|
||||
overrides: [
|
||||
{
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
files: [".eslintrc.{js,cjs}"],
|
||||
parserOptions: {
|
||||
sourceType: "script",
|
||||
},
|
||||
},
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: "latest",
|
||||
sourceType: "module",
|
||||
},
|
||||
rules: {
|
||||
semi: [2, "always"],
|
||||
"@typescript-eslint/semi": "off",
|
||||
},
|
||||
settings: {
|
||||
wc: {
|
||||
elementBaseClasses: ["LitElement"],
|
||||
},
|
||||
},
|
||||
};
|
||||
147
web/.gitignore
vendored
147
web/.gitignore
vendored
|
|
@ -1,147 +0,0 @@
|
|||
### Node ###
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional stylelint cache
|
||||
.stylelintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variable files
|
||||
.env
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env.local
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# vuepress v2.x temp and cache directory
|
||||
.temp
|
||||
|
||||
# Docusaurus cache and generated files
|
||||
.docusaurus
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
### Node Patch ###
|
||||
# Serverless Webpack directories
|
||||
.webpack/
|
||||
|
||||
# Optional stylelint cache
|
||||
|
||||
# SvelteKit build / generate output
|
||||
.svelte-kit
|
||||
|
||||
# Operating system
|
||||
.DS_Store
|
||||
*.bak
|
||||
*.swp
|
||||
*~
|
||||
|
||||
# End of https://www.toptal.com/developers/gitignore/api/node
|
||||
295
web/README.md
295
web/README.md
|
|
@ -1,295 +0,0 @@
|
|||
# @thorvg/lottie-player
|
||||
|
||||
A Lottie Player which uses [ThorVG](https://github.com/thorvg/thorvg) as a renderer, provides a web component for easily embedding and playing [Lottie](https://airbnb.io/lottie) animations.
|
||||
|
||||
# Installation
|
||||
|
||||
- Import from CDN
|
||||
```html
|
||||
<script src="https://unpkg.com/@thorvg/lottie-player@latest/dist/lottie-player.js"></script>
|
||||
```
|
||||
|
||||
- Install from [NPM](https://www.npmjs.com/package/@thorvg/lottie-player)
|
||||
```sh
|
||||
npm install @thorvg/lottie-player
|
||||
```
|
||||
|
||||
# Usage
|
||||
### With HTML (Basic Usage)
|
||||
|
||||
Once you import from CDN, you can access `<lottie-player/>`
|
||||
|
||||
```html
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
mode="normal"
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 500px; height: 500px;"
|
||||
>
|
||||
</lottie-player>
|
||||
```
|
||||
|
||||
### With NPM (JS/TS)
|
||||
|
||||
Import the library and please follow Basic Usage, you can use library on any NPM-based project such as React, Vue and Svelte.
|
||||
|
||||
```ts
|
||||
import '@thorvg/lottie-player';
|
||||
```
|
||||
|
||||
### With ReactJS + TypeScript
|
||||
|
||||
Add `declarations.d.ts` on the root of project and make sure following declaration.
|
||||
|
||||
```js
|
||||
declare namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"lottie-player": any;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Then you will be able to use this as same as above
|
||||
```js
|
||||
import '@thorvg/lottie-player';
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
mode="normal"
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 500px; height: 500px;"
|
||||
>
|
||||
</lottie-player>
|
||||
```
|
||||
|
||||
### With SSR Framework
|
||||
We should be careful when using on SSR frameworks such as NextJS, NuxtJS and Svelte, as it means the library must to be rendered on browser/client side.
|
||||
|
||||
- NextJS
|
||||
```ts
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function Home() {
|
||||
// ...
|
||||
|
||||
useEffect(() => {
|
||||
import("@thorvg/lottie-player");
|
||||
});
|
||||
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
- NuxtJS
|
||||
```html
|
||||
<template>
|
||||
{/* ... */}
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
import("@thorvg/lottie-player");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
- Svelte
|
||||
```html
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
onMount(async () => {
|
||||
await import('@thorvg/lottie-player');
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
# API
|
||||
## Properties
|
||||
|
||||
| Property | Description | Type | Default Value | Required |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| src | A graphic resource to play. It could be an internal/external URL or JSON string for Lottie. | string | undefined | Y |
|
||||
| speed | Animation speed (for Lottie) | number | 1 | N |
|
||||
| autoplay | When set to true, automatically plays the animation on loading it (for Lottie) | boolean | false | N |
|
||||
| count | Number of times to loop the animation | number | undefined | N |
|
||||
| loop | When set to true, loops the animation. The count property defines the number of times to loop the animation. Setting the count property to 0 and setting the loop to true, loops the animation indefinitely. | boolean | false | N |
|
||||
| direction | Direction of the animation. Set to 1 to play the animation forward or set to -1 to play it backward. | number (1 or -1) | 1 | N |
|
||||
| mode | Play mode. Setting the mode to PlayMode.Bounce plays the animation in an indefinite cycle, forwards and then backwards. | PlayMode | PlayMode.Normal | N |
|
||||
| intermission | Duration (in milliseconds) to pause before playing each cycle in a looped animation. Set this parameter to 0 (no pause) or any positive number. | number | 1 | N |
|
||||
|
||||
## Events
|
||||
|
||||
You can adapt the event with the following code example
|
||||
|
||||
```jsx
|
||||
const player = document.querySelector('lottie-player');
|
||||
|
||||
player.addEventListener('load', () => {
|
||||
// TODO: implements
|
||||
});
|
||||
```
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| load | A graphic resource is loaded |
|
||||
| error | An animation data can’t be parsed. |
|
||||
| ready | Animation data is loaded and player is ready |
|
||||
| play | Animation starts playing |
|
||||
| pause | Animation is paused |
|
||||
| stop | Animation is stopped |
|
||||
| freeze | Animation is paused due to player being invisible |
|
||||
| loop | An animation loop is completed |
|
||||
| complete | Animation is complete (all loops completed) |
|
||||
| frame | A new frame is entered |
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
**Method** : `load(src: string | object)`
|
||||
|
||||
**Purpose** : Load and play Lottie animation
|
||||
|
||||
**Parameters**
|
||||
| Name | Type | Description
|
||||
| --- | --- | --- |
|
||||
| src | `string` or `object` | URL, or a JSON string or object representing a Lottie animation to play.
|
||||
|
||||
**Return Type** : `Promise<void>`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `play()`
|
||||
|
||||
**Purpose** : Play loaded animation
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `pause()`
|
||||
|
||||
**Purpose** : Pause playing animation
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `stop()`
|
||||
|
||||
**Purpose** : Stop current animation
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `seek(frame: number)`
|
||||
|
||||
**Purpose** : Move to a given frame
|
||||
|
||||
**Parameters**
|
||||
| Name | Type | Description
|
||||
| --- | --- | --- |
|
||||
| src | `number` | The frame number to move, shouldn't be less than 0 and greater than `totalFrame`
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
> [!TIP]
|
||||
> You can easily check total frame of animation, use `player.totalFrame`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `destory()`
|
||||
|
||||
**Purpose** : Destroy animation and lottie-player element
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `setLooping(value: boolean)`
|
||||
|
||||
**Purpose** : Enable animation loop
|
||||
|
||||
**Parameters**
|
||||
| Name | Type | Description
|
||||
| --- | --- | --- |
|
||||
| value | `boolean` | `true` enables looping, while `false` disables looping.
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `setDirection(value: number)`
|
||||
|
||||
**Purpose** : Set animation direction
|
||||
|
||||
|
||||
**Parameters**
|
||||
| Name | Type | Description
|
||||
| --- | --- | --- |
|
||||
| value | `number` | Direction values. `1` to play the animation forward, `-1` to play it backward.
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `setSpeed(value: number)`
|
||||
|
||||
**Purpose** : Set speed of animation
|
||||
|
||||
|
||||
**Parameters**
|
||||
| Name | Type | Description
|
||||
| --- | --- | --- |
|
||||
| value | `number` | Playback speed. The value must be any positive integer.
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `setBgColor(value: string)`
|
||||
|
||||
**Purpose** : Set a backgroud color
|
||||
|
||||
**Parameters**
|
||||
| Name | Type | Description
|
||||
| --- | --- | --- |
|
||||
| value | `string` | Color values. Hex(#fff) or string('red') to set background color
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
---
|
||||
|
||||
**Method** : `save(target: ExportableType)`
|
||||
|
||||
**Purpose** : Export current animation to other file type
|
||||
|
||||
**Parameters**
|
||||
| Name | Type | Description
|
||||
| --- | --- | --- |
|
||||
| value | `ExportableType` | File type to export
|
||||
|
||||
**Return Type** : `void`
|
||||
|
||||
|
||||
---
|
||||
|
||||
**Method** : `getVersion()`
|
||||
|
||||
**Purpose** : Return current ThorVG version
|
||||
|
||||
**Return Type** : `LibraryVersion`
|
||||
|
||||
# Examples
|
||||
|
||||
Please check these examples in various environments.
|
||||
|
||||
- [VanillaJS Usage](https://codesandbox.io/p/sandbox/thorvg-lottieplayer-vanillajs-t737qm)
|
||||
- [React Usage](https://codesandbox.io/p/devbox/thorvg-lottieplayer-react-hkkrq3)
|
||||
- [VueJS Usage](https://codesandbox.io/p/devbox/thorvg-lottieplayer-vue-758h3l)
|
||||
- [Svelte Usage](https://codesandbox.io/p/devbox/thorvg-lottieplayer-svelte-xd4zp6)
|
||||
|
|
@ -1,277 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>@thorvg/lottie-player | Benchmark</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
canvas {
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
<script
|
||||
src="../dist/lottie-player.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>ThorVG Web</h1>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<lottie-player
|
||||
autoPlay
|
||||
loop
|
||||
src="https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json"
|
||||
style="width: 300px; height: 300px"
|
||||
></lottie-player>
|
||||
|
||||
<script src="https://mrdoob.github.io/stats.js/build/stats.min.js"></script>
|
||||
<script>
|
||||
var statsFPS = new Stats();
|
||||
statsFPS.showPanel(0); // 0: fps
|
||||
statsFPS.dom.style.cssText =
|
||||
"position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";
|
||||
document.body.appendChild(statsFPS.dom);
|
||||
|
||||
var statsMS = new Stats();
|
||||
statsMS.showPanel(1); // 1: ms
|
||||
statsMS.dom.style.cssText =
|
||||
"position:fixed;top:0;left:80px;cursor:pointer;opacity:0.9;z-index:10000";
|
||||
document.body.appendChild(statsMS.dom);
|
||||
|
||||
var statsMB;
|
||||
if (self.performance && self.performance.memory) {
|
||||
statsMB = new Stats();
|
||||
statsMB.showPanel(2); // 2: mb
|
||||
statsMB.dom.style.cssText =
|
||||
"position:fixed;top:0;left:160px;cursor:pointer;opacity:0.9;z-index:10000";
|
||||
document.body.appendChild(statsMB.dom);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
statsFPS.begin();
|
||||
statsMS.begin();
|
||||
if (statsMB) statsMB.begin();
|
||||
|
||||
statsFPS.end();
|
||||
statsMS.end();
|
||||
if (statsMB) statsMB.end();
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>ThorVG Lottie Player</title>
|
||||
<meta name="description" content="A web lottie player using ThorVG as a renderer" />
|
||||
<script src="../dist/lottie-player.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div>
|
||||
<button onclick="playAnimation()">Play</button>
|
||||
<button onclick="pauseAnimation()">Pause</button>
|
||||
<button onclick="stopAnimation()">Stop</button>
|
||||
<button onclick="createAnimation()">Create</button>
|
||||
<button onclick="destroyAnimation()">Destroy</button>
|
||||
<button onclick="save('gif')">save2gif</button>
|
||||
<button onclick="save('tvg')">save2tvg</button>
|
||||
<button onclick="save('png')">save2png</button>
|
||||
<div>
|
||||
<label for="reverseCheckbox">Reverse</label>
|
||||
<input type="checkbox" id="reverseCheckbox" onchange="toggleReverse(event)">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="loopCheckbox">Loop</label>
|
||||
<input type="checkbox" id="loopCheckbox" onchange="toggleLoop(event)" checked>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="speedRange">Speed</label>
|
||||
<input type="range" id="speedRange" min="0.1" max="2" step="0.1" value="1" onchange="changeSpeed(this.value)">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="frameRange">Frame</label>
|
||||
<input type="range" id="frameRange" min="1" max="100" step="1" value="1" onchange="seekFrame(this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lottie"></div>
|
||||
</div>
|
||||
<script>
|
||||
let animation;
|
||||
window.onload = function() {
|
||||
createAnimation();
|
||||
}
|
||||
|
||||
function createAnimation() {
|
||||
if (animation) {
|
||||
alert('Animation already exists');
|
||||
return;
|
||||
}
|
||||
|
||||
const lottie = document.querySelector('.lottie');
|
||||
animation = document.createElement('lottie-player');
|
||||
|
||||
animation.autoPlay = true;
|
||||
animation.loop = true;
|
||||
animation.src = "https://lottie.host/6d7dd6e2-ab92-4e98-826a-2f8430768886/NGnHQ6brWA.json";
|
||||
animation.style.width = "500px";
|
||||
animation.style.height = "500px";
|
||||
|
||||
lottie.appendChild(animation);
|
||||
|
||||
animation = document.querySelector('lottie-player');
|
||||
const frameRange = document.querySelector('#frameRange');
|
||||
|
||||
animation.addEventListener('frame', function(e) {
|
||||
frameRange.value = e.detail.frame / animation.totalFrame * 100;
|
||||
});
|
||||
}
|
||||
|
||||
function pauseAnimation() {
|
||||
if (!animation) {
|
||||
alert('Animation is not created yet');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.pause();
|
||||
}
|
||||
|
||||
function stopAnimation() {
|
||||
if (!animation) {
|
||||
alert('Animation is not created yet');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.stop();
|
||||
}
|
||||
|
||||
function seekFrame(framePercentage) {
|
||||
if (!animation) {
|
||||
alert('Animation is not created yet');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.seek(animation.totalFrames * framePercentage / 100);
|
||||
}
|
||||
|
||||
function destroyAnimation() {
|
||||
if (!animation) {
|
||||
alert('No animation to destroy');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.destroy();
|
||||
animation = undefined;
|
||||
}
|
||||
|
||||
function playAnimation() {
|
||||
if (!animation) {
|
||||
alert('Animation is not created yet');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.play();
|
||||
}
|
||||
|
||||
function toggleLoop(e) {
|
||||
if (!animation) {
|
||||
alert('Animation is not created yet');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.setLooping(e.target.checked);
|
||||
if (animation.currentState !== 'playing') {
|
||||
animation.play();
|
||||
}
|
||||
}
|
||||
|
||||
function changeSpeed(speed) {
|
||||
if (!animation) {
|
||||
alert('Animation is not created yet');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.setSpeed(speed);
|
||||
if (animation.currentState !== 'playing') {
|
||||
animation.play();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleReverse(e) {
|
||||
if (!animation) {
|
||||
alert('Animation is not created yet');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.setDirection(e.target.checked ? -1 : 1);
|
||||
if (animation.currentState !== 'playing') {
|
||||
animation.play();
|
||||
}
|
||||
}
|
||||
|
||||
function save(ext) {
|
||||
if (!animation) {
|
||||
alert('Animation is not created yet');
|
||||
return;
|
||||
}
|
||||
|
||||
animation.save(ext);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
{
|
||||
"name": "@thorvg/lottie-player",
|
||||
"version": "1.0.0-beta.0",
|
||||
"description": "A web lottie player using ThorVG as a renderer",
|
||||
"main": "./dist/lottie-player.cjs.js",
|
||||
"module": "./dist/lottie-player.esm.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/lottie-player.cjs.js",
|
||||
"require": "./dist/lottie-player.esm.js"
|
||||
}
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"files": [
|
||||
"dist/"
|
||||
],
|
||||
"types": "./dist/lottie-player.d.ts",
|
||||
"scripts": {
|
||||
"build": "npm run clean && npm run copy:wasm && THORVG_VERSION=$(sed -n -e 4p ../meson.build | sed 's/..$//' | sed -r 's/.{19}//') rollup -c --bundleConfigAsCjs && rm -rf ./dist/thorvg-wasm.js",
|
||||
"build:watch": "npm run clean && npm run copy:wasm && rollup -c --bundleConfigAsCjs --watch",
|
||||
"copy:wasm": "cp ../build_wasm/src/bindings/wasm/thorvg-wasm.js ./dist",
|
||||
"clean": "rm -rf dist && mkdir dist && touch dist/index.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"lint": "eslint ./src --ext .ts,.tsx,.js",
|
||||
"lint:fix": "eslint ./src --ext .ts,.tsx,.js --fix"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/thorvg/thorvg.git"
|
||||
},
|
||||
"author": "Jinny You <jinny@lottiefiles.com>",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/thorvg/thorvg/issues"
|
||||
},
|
||||
"homepage": "https://thorvg.org",
|
||||
"keywords": [
|
||||
"lottie",
|
||||
"animation",
|
||||
"thorvg",
|
||||
"tvg"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^25.0.7",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@swc/core": "^1.3.99",
|
||||
"@typescript-eslint/eslint-plugin": "^6.4.0",
|
||||
"eslint": "^8.0.1",
|
||||
"eslint-config-standard-with-typescript": "^40.0.0",
|
||||
"eslint-plugin-import": "^2.25.2",
|
||||
"eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
|
||||
"eslint-plugin-promise": "^6.0.0",
|
||||
"eslint-plugin-wc": "^2.0.4",
|
||||
"rollup": "^4.6.0",
|
||||
"rollup-plugin-baked-env": "^1.0.1",
|
||||
"rollup-plugin-dts": "^6.1.0",
|
||||
"rollup-plugin-polyfill-node": "^0.13.0",
|
||||
"rollup-plugin-swc3": "^0.10.4",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typescript": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
"lit": "^3.1.0",
|
||||
"url": "^0.11.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
import { swc } from "rollup-plugin-swc3";
|
||||
import { dts } from "rollup-plugin-dts";
|
||||
import { nodeResolve } from "@rollup/plugin-node-resolve";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
import nodePolyfills from 'rollup-plugin-polyfill-node';
|
||||
import bakedEnv from 'rollup-plugin-baked-env';
|
||||
import pkg from './package.json';
|
||||
|
||||
const name = 'lottie-player';
|
||||
const globals = {
|
||||
url: "url",
|
||||
lit: "lit",
|
||||
"lit/decorators.js": "lit/decorators.js",
|
||||
};
|
||||
|
||||
export default [
|
||||
{
|
||||
input: "./src/lottie-player.ts",
|
||||
treeshake: false,
|
||||
output: [
|
||||
{
|
||||
file: './dist/lottie-player.js',
|
||||
format: "umd",
|
||||
name,
|
||||
minifyInternalExports: true,
|
||||
inlineDynamicImports: true,
|
||||
sourcemap: true,
|
||||
globals,
|
||||
},
|
||||
{
|
||||
file: pkg.main,
|
||||
name,
|
||||
format: "cjs",
|
||||
minifyInternalExports: true,
|
||||
inlineDynamicImports: true,
|
||||
sourcemap: true,
|
||||
globals,
|
||||
},
|
||||
{
|
||||
file: pkg.module,
|
||||
format: "esm",
|
||||
name,
|
||||
inlineDynamicImports: true,
|
||||
sourcemap: true,
|
||||
globals,
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
bakedEnv({ THORVG_VERSION: process.env.THORVG_VERSION }),
|
||||
nodePolyfills(),
|
||||
commonjs({
|
||||
include: /node_modules/
|
||||
}),
|
||||
swc({
|
||||
include: /\.[mc]?[jt]sx?$/,
|
||||
exclude: /node_modules/,
|
||||
tsconfig: "tsconfig.json",
|
||||
jsc: {
|
||||
parser: {
|
||||
syntax: "typescript",
|
||||
tsx: false,
|
||||
decorators: true,
|
||||
declaration: true,
|
||||
dynamicImport: true,
|
||||
},
|
||||
target: "es5",
|
||||
},
|
||||
}),
|
||||
nodeResolve(),
|
||||
terser({
|
||||
compress: true,
|
||||
mangle: true,
|
||||
output: {
|
||||
comments: false,
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
{
|
||||
input: "./src/lottie-player.ts",
|
||||
treeshake: false,
|
||||
output: [
|
||||
{
|
||||
file: './dist/lottie-player.d.ts',
|
||||
format: "esm",
|
||||
}
|
||||
],
|
||||
plugins: [
|
||||
dts(),
|
||||
],
|
||||
}
|
||||
];
|
||||
|
|
@ -1,663 +0,0 @@
|
|||
/*
|
||||
* Copyright (c) 2023 - 2024 the ThorVG project. All rights reserved.
|
||||
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to deal
|
||||
* in the Software without restriction, including without limitation the rights
|
||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
* copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all
|
||||
* copies or substantial portions of the Software.
|
||||
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
* SOFTWARE.
|
||||
*/
|
||||
|
||||
import { html, PropertyValueMap, LitElement, type TemplateResult } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
|
||||
// @ts-ignore: WASM Glue code doesn't have type & Only available on build progress
|
||||
import Module from '../dist/thorvg-wasm';
|
||||
import { THORVG_VERSION } from './version';
|
||||
|
||||
type LottieJson = Map<PropertyKey, any>;
|
||||
type TvgModule = any;
|
||||
|
||||
let _module: any;
|
||||
(async () => {
|
||||
_module = await Module();
|
||||
})();
|
||||
|
||||
// Define library version
|
||||
export interface LibraryVersion {
|
||||
THORVG_VERSION: string
|
||||
}
|
||||
|
||||
// Define file type which can be exported
|
||||
export enum ExportableType {
|
||||
GIF = 'gif',
|
||||
TVG = 'tvg',
|
||||
PNG = 'png',
|
||||
}
|
||||
|
||||
// Define mime type which player can load
|
||||
export enum MimeType {
|
||||
JSON = 'json',
|
||||
JPG = 'jpg',
|
||||
PNG = 'png',
|
||||
SVG = 'svg',
|
||||
TVG = 'tvg',
|
||||
}
|
||||
|
||||
// Define valid player states
|
||||
export enum PlayerState {
|
||||
Destroyed = 'destroyed', // Player is destroyed by `destroy()` method
|
||||
Error = 'error', // An error occurred
|
||||
Loading = 'loading', // Player is loading
|
||||
Paused = 'paused', // Player is paused
|
||||
Playing = 'playing', // Player is playing
|
||||
Stopped = 'stopped', // Player is stopped
|
||||
Frozen = 'frozen', // Player is paused due to player being invisible
|
||||
}
|
||||
|
||||
// Define play modes
|
||||
export enum PlayMode {
|
||||
Bounce = 'bounce',
|
||||
Normal = 'normal',
|
||||
}
|
||||
|
||||
// Define player events
|
||||
export enum PlayerEvent {
|
||||
Complete = 'complete',
|
||||
Destroyed = 'destroyed',
|
||||
Error = 'error',
|
||||
Frame = 'frame',
|
||||
Freeze = 'freeze',
|
||||
Load = 'load',
|
||||
Loop = 'loop',
|
||||
Pause = 'pause',
|
||||
Play = 'play',
|
||||
Ready = 'ready',
|
||||
Stop = 'stop',
|
||||
}
|
||||
|
||||
const _parseLottieFromURL = async (url: string): Promise<LottieJson> => {
|
||||
if (typeof url !== 'string') {
|
||||
throw new Error(`The url value must be a string`);
|
||||
}
|
||||
|
||||
try {
|
||||
const srcUrl: URL = new URL(url);
|
||||
const result = await fetch(srcUrl.toString());
|
||||
const json = await result.json();
|
||||
|
||||
return json;
|
||||
} catch (err) {
|
||||
throw new Error(
|
||||
`An error occurred while trying to load the Lottie file from URL`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const _parseImageFromURL = async (url: string): Promise<ArrayBuffer> => {
|
||||
const response = await fetch(url);
|
||||
return response.arrayBuffer();
|
||||
}
|
||||
|
||||
const _parseJSON = async (data: string): Promise<string> => {
|
||||
try {
|
||||
data = JSON.parse(data);
|
||||
} catch (err) {
|
||||
const json = await _parseLottieFromURL(data as string);
|
||||
data = JSON.stringify(json);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
const _parseSrc = async (src: string | object | ArrayBuffer, mimeType: MimeType): Promise<Uint8Array> => {
|
||||
const encoder = new TextEncoder();
|
||||
let data = src;
|
||||
|
||||
switch (typeof data) {
|
||||
case 'object':
|
||||
if (data instanceof ArrayBuffer) {
|
||||
return new Uint8Array(data);
|
||||
}
|
||||
|
||||
data = JSON.stringify(data);
|
||||
return encoder.encode(data);
|
||||
case 'string':
|
||||
if (mimeType === MimeType.JSON) {
|
||||
data = await _parseJSON(data);
|
||||
return encoder.encode(data);
|
||||
}
|
||||
|
||||
const buffer = await _parseImageFromURL(data);
|
||||
return new Uint8Array(buffer);
|
||||
default:
|
||||
throw new Error('Invalid src type');
|
||||
}
|
||||
}
|
||||
|
||||
const _wait = (timeToDelay: number) => {
|
||||
return new Promise((resolve) => setTimeout(resolve, timeToDelay))
|
||||
};
|
||||
|
||||
const _downloadFile = (fileName: string, blob: Blob) => {
|
||||
const link = document.createElement('a');
|
||||
link.setAttribute('href', URL.createObjectURL(blob));
|
||||
link.setAttribute('download', fileName);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
@customElement('lottie-player')
|
||||
export class LottiePlayer extends LitElement {
|
||||
/**
|
||||
* Lottie animation JSON data or URL to JSON.
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: String })
|
||||
public src?: string;
|
||||
|
||||
/**
|
||||
* File mime type.
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: MimeType })
|
||||
public mimeType: MimeType = MimeType.JSON;
|
||||
|
||||
/**
|
||||
* Animation speed.
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Number })
|
||||
public speed: number = 1.0;
|
||||
|
||||
/**
|
||||
* Autoplay animation on load.
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Boolean })
|
||||
public autoPlay: boolean = false;
|
||||
|
||||
/**
|
||||
* Number of times to loop animation.
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Number })
|
||||
public count?: number;
|
||||
|
||||
/**
|
||||
* Whether to loop animation.
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Boolean })
|
||||
public loop: boolean = false;
|
||||
|
||||
/**
|
||||
* Direction of animation.
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Number })
|
||||
public direction: number = 1;
|
||||
|
||||
/**
|
||||
* Play mode.
|
||||
* @since 1.0
|
||||
*/
|
||||
@property()
|
||||
public mode: PlayMode = PlayMode.Normal;
|
||||
|
||||
/**
|
||||
* Intermission
|
||||
* @since 1.0
|
||||
*/
|
||||
@property()
|
||||
public intermission: number = 1;
|
||||
|
||||
/**
|
||||
* total frame of current animation (readonly)
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Number })
|
||||
public totalFrame: number = 0;
|
||||
|
||||
/**
|
||||
* current frame of current animation (readonly)
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Number })
|
||||
public currentFrame: number = 0;
|
||||
|
||||
/**
|
||||
* Player state
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Number })
|
||||
public currentState: PlayerState = PlayerState.Loading;
|
||||
|
||||
/**
|
||||
* original size of the animation (readonly)
|
||||
* @since 1.0
|
||||
*/
|
||||
@property({ type: Float32Array })
|
||||
public get size(): Float32Array {
|
||||
return Float32Array.from(this._TVG?.size() || [0, 0]);
|
||||
}
|
||||
|
||||
private _TVG?: TvgModule;
|
||||
private _canvas?: HTMLCanvasElement;
|
||||
private _imageData?: ImageData;
|
||||
private _beginTime: number = Date.now();
|
||||
private _counter: number = 1;
|
||||
private _timer?: ReturnType<typeof setInterval>;
|
||||
private _observer?: IntersectionObserver;
|
||||
private _observable: boolean = false;
|
||||
|
||||
private async _init(): Promise<void> {
|
||||
if (!_module) {
|
||||
//NOTE: ThorVG Module has not loaded
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this._timer) {
|
||||
//NOTE: ThorVG Module has loaded, but called this function again
|
||||
return;
|
||||
}
|
||||
|
||||
clearInterval(this._timer);
|
||||
this._timer = undefined;
|
||||
|
||||
this._TVG = new _module.TvgLottieAnimation();
|
||||
|
||||
if (this.src) {
|
||||
this.load(this.src, this.mimeType);
|
||||
}
|
||||
}
|
||||
|
||||
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(this._observerCallback);
|
||||
this._observer.observe(this);
|
||||
|
||||
if (!this._TVG) {
|
||||
this._timer = setInterval(this._init.bind(this), 100);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.src) {
|
||||
this.load(this.src, this.mimeType);
|
||||
}
|
||||
}
|
||||
|
||||
protected createRenderRoot(): HTMLElement | DocumentFragment {
|
||||
this.style.display = 'block';
|
||||
return super.createRenderRoot();
|
||||
}
|
||||
|
||||
private async _animLoop(){
|
||||
if (!this._TVG) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (await this._update()) {
|
||||
this._render();
|
||||
window.requestAnimationFrame(this._animLoop.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
private _loadBytes(data: Uint8Array, rPath: string = ''): void {
|
||||
const isLoaded = this._TVG.load(data, this.mimeType, this._canvas!.width, this._canvas!.height, rPath);
|
||||
if (!isLoaded) {
|
||||
throw new Error('Unable to load an image. Error: ', this._TVG.error());
|
||||
}
|
||||
|
||||
this._render();
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Load));
|
||||
|
||||
if (this.autoPlay) {
|
||||
this.play();
|
||||
}
|
||||
}
|
||||
|
||||
private _flush(): void {
|
||||
const context = this._canvas!.getContext('2d');
|
||||
context!.putImageData(this._imageData!, 0, 0);
|
||||
}
|
||||
|
||||
private _render(): void {
|
||||
this._TVG.resize(this._canvas!.width, this._canvas!.height);
|
||||
const isUpdated = this._TVG.update();
|
||||
|
||||
if (!isUpdated) {
|
||||
return;
|
||||
}
|
||||
|
||||
const buffer = this._TVG.render();
|
||||
const clampedBuffer = new Uint8ClampedArray(buffer.buffer, buffer.byteOffset, buffer.byteLength);
|
||||
if (clampedBuffer.length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._imageData = new ImageData(clampedBuffer, this._canvas!.width, this._canvas!.height);
|
||||
this._flush();
|
||||
}
|
||||
|
||||
private async _update(): Promise<boolean> {
|
||||
if (this.currentState !== PlayerState.Playing) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const duration = this._TVG.duration();
|
||||
const currentTime = Date.now() / 1000;
|
||||
this.currentFrame = (currentTime - this._beginTime) / duration * this.totalFrame * this.speed;
|
||||
if (this.direction === -1) {
|
||||
this.currentFrame = this.totalFrame - this.currentFrame;
|
||||
}
|
||||
|
||||
if (
|
||||
(this.direction === 1 && this.currentFrame >= this.totalFrame) ||
|
||||
(this.direction === -1 && this.currentFrame <= 0)
|
||||
) {
|
||||
const totalCount = this.count ? this.mode === PlayMode.Bounce ? this.count * 2 : this.count : 0;
|
||||
if (this.loop || (totalCount && this._counter < totalCount)) {
|
||||
if (this.mode === PlayMode.Bounce) {
|
||||
this.direction = this.direction === 1 ? -1 : 1;
|
||||
this.currentFrame = this.direction === 1 ? 0 : this.totalFrame;
|
||||
}
|
||||
|
||||
if (this.count) {
|
||||
this._counter += 1;
|
||||
}
|
||||
|
||||
await _wait(this.intermission);
|
||||
this.play();
|
||||
return true;
|
||||
}
|
||||
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Complete));
|
||||
this.currentState = PlayerState.Stopped;
|
||||
}
|
||||
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Frame, {
|
||||
detail: {
|
||||
frame: this.currentFrame,
|
||||
},
|
||||
}));
|
||||
return this._TVG.frame(this.currentFrame);
|
||||
}
|
||||
|
||||
private _frame(curFrame: number): void {
|
||||
this.pause();
|
||||
this.currentFrame = curFrame;
|
||||
this._TVG.frame(curFrame);
|
||||
}
|
||||
|
||||
/**
|
||||
* Configure and load
|
||||
* @param src Lottie animation JSON data or URL to JSON.
|
||||
* @param mimeType The MIME type of the data to be loaded, defaults to JSON
|
||||
* @since 1.0
|
||||
*/
|
||||
public async load(src: string | object, mimeType: MimeType = MimeType.JSON): Promise<void> {
|
||||
try {
|
||||
const bytes = await _parseSrc(src, mimeType);
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Ready));
|
||||
|
||||
this.mimeType = mimeType;
|
||||
this._loadBytes(bytes);
|
||||
} catch (err) {
|
||||
this.currentState = PlayerState.Error;
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Start playing animation.
|
||||
* @since 1.0
|
||||
*/
|
||||
public play(): void {
|
||||
if (this.mimeType !== MimeType.JSON) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.totalFrame = this._TVG.totalFrame();
|
||||
if (this.totalFrame < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._beginTime = Date.now() / 1000;
|
||||
if (this.currentState === PlayerState.Playing) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this._observable) {
|
||||
this.currentState = PlayerState.Playing;
|
||||
window.requestAnimationFrame(this._animLoop.bind(this));
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentState = PlayerState.Frozen;
|
||||
}
|
||||
|
||||
/**
|
||||
* Pause animation.
|
||||
* @since 1.0
|
||||
*/
|
||||
public pause(): void {
|
||||
this.currentState = PlayerState.Paused;
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Pause));
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop animation.
|
||||
* @since 1.0
|
||||
*/
|
||||
public stop(): void {
|
||||
this.currentState = PlayerState.Stopped;
|
||||
this.currentFrame = 0;
|
||||
this._counter = 1;
|
||||
this.seek(0);
|
||||
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Stop));
|
||||
}
|
||||
|
||||
/**
|
||||
* Freeze animation.
|
||||
* @since 1.0
|
||||
*/
|
||||
public freeze(): void {
|
||||
this.currentState = PlayerState.Frozen;
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Freeze));
|
||||
}
|
||||
|
||||
/**
|
||||
* Seek to a given frame
|
||||
* @param frame Frame number to move
|
||||
* @since 1.0
|
||||
*/
|
||||
public async seek(frame: number): Promise<void> {
|
||||
this._frame(frame);
|
||||
await this._update();
|
||||
this._render();
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust the canvas size.
|
||||
* @param width The width to resize
|
||||
* @param height The height to resize
|
||||
* @since 1.0
|
||||
*/
|
||||
public resize(width: number, height: number) {
|
||||
this._canvas!.width = width;
|
||||
this._canvas!.height = height;
|
||||
|
||||
if (this.currentState !== PlayerState.Playing) {
|
||||
this._render();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy animation and lottie-player element.
|
||||
* @since 1.0
|
||||
*/
|
||||
public destroy(): void {
|
||||
if (!this._TVG) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._TVG.delete();
|
||||
this._TVG = null;
|
||||
this.currentState = PlayerState.Destroyed;
|
||||
|
||||
if (this._observer) {
|
||||
this._observer.disconnect();
|
||||
this._observer = undefined;
|
||||
}
|
||||
|
||||
this.dispatchEvent(new CustomEvent(PlayerEvent.Destroyed));
|
||||
this.remove();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the repeating of the animation.
|
||||
* @param value Whether to enable repeating. Boolean true enables repeating.
|
||||
* @since 1.0
|
||||
*/
|
||||
public setLooping(value: boolean): void {
|
||||
if (!this._TVG) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.loop = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Animation play direction.
|
||||
* @param value Direction values. (1: forward, -1: backward)
|
||||
* @since 1.0
|
||||
*/
|
||||
public setDirection(value: number): void {
|
||||
if (!this._TVG) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.direction = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set animation play speed.
|
||||
* @param value Playback speed. (any positive number)
|
||||
* @since 1.0
|
||||
*/
|
||||
public setSpeed(value: number): void {
|
||||
if (!this._TVG) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.speed = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a background color. (default: 0x00000000)
|
||||
* @param value Hex(#fff) or string(red) of background color
|
||||
* @since 1.0
|
||||
*/
|
||||
public setBgColor(value: string): void {
|
||||
if (!this._TVG) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._canvas!.style.backgroundColor = value;
|
||||
}
|
||||
|
||||
/**
|
||||
* Save current animation to other file type
|
||||
* @param target File type to export
|
||||
* @since 1.0
|
||||
*/
|
||||
public async save(target: ExportableType): Promise<void> {
|
||||
if (!this._TVG) {
|
||||
return;
|
||||
}
|
||||
|
||||
const fileName = `output.${target}`;
|
||||
|
||||
if (target === ExportableType.PNG) {
|
||||
this._canvas!.toBlob((blob: Blob | null) => {
|
||||
if (!blob) {
|
||||
return;
|
||||
}
|
||||
|
||||
_downloadFile('output.png', blob);
|
||||
}, 'image/png');
|
||||
return;
|
||||
}
|
||||
|
||||
const isExported = this._TVG.save(target);
|
||||
if (!isExported) {
|
||||
throw new Error('Unable to save. Error: ', this._TVG.error());
|
||||
}
|
||||
|
||||
const data = _module.FS.readFile(fileName);
|
||||
|
||||
if (target === ExportableType.GIF && data.length < 6) {
|
||||
throw new Error(
|
||||
`Unable to save the GIF data. The generated file size is invalid.`
|
||||
);
|
||||
}
|
||||
|
||||
if (target === ExportableType.TVG && data.length < 33) {
|
||||
throw new Error(
|
||||
`Unable to save the TVG data. The generated file size is invalid.`
|
||||
);
|
||||
}
|
||||
|
||||
const blob = new Blob([data], {type: 'application/octet-stream'});
|
||||
_downloadFile(fileName, blob);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return thorvg version
|
||||
* @since 1.0
|
||||
*/
|
||||
public getVersion(): LibraryVersion {
|
||||
return {
|
||||
THORVG_VERSION,
|
||||
};
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<canvas id="thorvg-canvas" style="width: 100%; height: 100%;" />
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// @ts-ignore: injected process.env from `rollup-plugin-baked-env`
|
||||
import env from 'process.env';
|
||||
export const THORVG_VERSION = env.THORVG_VERSION || '' as string;
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@dist/*": [
|
||||
"dist/*"
|
||||
]
|
||||
},
|
||||
"target": "es2017",
|
||||
"lib": [
|
||||
"esnext.array",
|
||||
"esnext",
|
||||
"es2017",
|
||||
"dom"
|
||||
],
|
||||
"experimentalDecorators": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"allowJs": true,
|
||||
"checkJs": false,
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts"
|
||||
],
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"example",
|
||||
"dist"
|
||||
],
|
||||
}
|
||||
2089
web/yarn.lock
2089
web/yarn.lock
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue