Skip to content
Lightweight SVGA Web Player
TypeScript HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
core fix: format Aug 28, 2019
scripts feat: banner Aug 27, 2019
tests feat: types Aug 28, 2019
types feat: types Aug 28, 2019
.babelrc feat: 不兼容 Promise Aug 27, 2019
.editorconfig
.eslintignore
.eslintrc.js init Apr 15, 2019
.gitignore
.npmignore
README.md
README.zh-CN.md
db.js feat: types Aug 28, 2019
package.json chore(release): 1.3.0-3 Aug 27, 2019
parser.1x.js feat: types Aug 28, 2019
svga.lite.min.js feat: types Aug 28, 2019
tsconfig.json feat: types Aug 28, 2019
util.js

README.md

SVGAPlayer-Web-Lite

This is a SVGA player on the Web, and its goal is to be lighter and more efficient, But at the same time it also gave up compatibility support for some older browsers.

简体中文

v1.3.0+ Change

Unbound Promise object compatibility code, core library size reduced to 55kb (gzip = 18kb)

If there is a problem such as Promise is not a constructor, the outer chain polyfill or the configuration babel is compatible

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

Target Future

  • Size = 80kb (gzip = 27kb)
  • Compatible Android 4+ / iOS 9+
  • Better Asynchronous Operation
  • Multi-threaded (WebWorker) parsing file data

Experimental

  • Use WebAssembly instead of WebWorker
  • Rendering engine simulation runs in the WebWorker
  • GPU accelerated operation

Diff

  • not support play sound

Install

NPM

yarn add svga.lite

# or

npm i svga.lite

CDN

<script src="https://cdn.jsdelivr.net/npm/svga.lite/svga.lite.min.js"></script>

Use

Simple Use

<canvas id="canvas"></canvas>
import { Downloader, Parser, Player } from 'svga.lite'

const downloader = new Downloader()
// calls WebWorker parsing by default, configurable `new Parser({ disableWorker: true })`
const parser = new Parser()
const player = new Player('#canvas') // #canvas is HTMLCanvasElement

;(async () => {
  const fileData = await downloader.get('./xxx.svga')
  const svgaData = await parser.do(fileData)

  player.set({
    loop: 1,
    fillMode: 'forwards'
  })

  await player.mount(svgaData)

  player
    .$on('start', () => console.log('event start'))
    .$on('pause', () => console.log('event pause'))
    .$on('stop', () => console.log('event stop'))
    .$on('end', () => console.log('event end'))
    .$on('clear', () => console.log('event clear'))
    .$on('process', () => console.log('event process', player.progress))

  player.start()
  // player.pause()
  // player.stop()
  // player.clear()
})()

Support v1.x of SVGA (v1.2.0+)

import { Downloader, Parser, Player } from 'svga.lite'
import Parser1x from 'svga.lite/parser.1x'
import util from 'svga.lite/util'

const downloader = new Downloader()

const svgaFile = './svga/show.svga'

const fileData = await downloader.get(svgaFile)

// Parser1x calls WebWorker parsing by default, configurable `new Parser1x({ disableWorker: true })`
const parser = util.version(fileData) === 1 ? new Parser1x() : new Parser()

const svgaData = await parser.do(fileData)

const player = new Player('#canvas')

await player.mount(svgaData)

player.start()

Replace Element

You can change the elements of the svga data corresponding to the key values.

import { Downloader, Parser, Player } from 'svga.lite'

const downloader = new Downloader()
const parser = new Parser()
const player = new Player('#canvas')

;(async () => {
  const fileData = await downloader.get('./xxx.svga')
  const svgaData = await parser.do(fileData)

  const image = new Image()
  image.src = 'https://xxx.com/xxx.png'
  svgaData.images['key'] = image

  await player.mount(svgaData)

  player.start()
})()

Dynamic Element

You can insert some dynamic elements with svga data.

const text = 'hello gg'
const fontCanvas = document.getElementById('font')
const fontContext = fontCanvas.getContext('2d')
fontCanvas.height = 30
fontContext.font = '30px Arial'
fontContext.textAlign = 'center'
fontContext.textBaseline = 'middle'
fontContext.fillStyle = '#000'
fontContext.fillText(text, fontCanvas.clientWidth / 2, fontCanvas.clientHeight / 2)

const { Downloader, Parser, Player } = SVGA

const downloader = new Downloader()
const parser = new Parser()
const player = new Player('#canvas')

const svgaFile = './svga/kingset.svga'

const fileData = await downloader.get(svgaFile)
const svgaData = await parser.do(fileData)

svgaData.dynamicElements['banner'] = fontCanvas

await player.mount(svgaData)

player.start()

Reusable instantiated Downloader & Parser

import { Downloader, Parser, Player } from 'svga.lite'

const downloader = new Downloader()
const parser = new Parser()

const player1 = new Player('#canvas1')
const player2 = new Player('#canvas2')

const fileData1 = await downloader.get('./1.svga')
const fileData2 = await downloader.get('./2.svga')

const svgaData1 = await parser.do(fileData1)
const svgaData2 = await parser.do(fileData2)

await player1.mount(svgaData1)
await player2.mount(svgaData2)

player1.start()
player2.start()

Destroy Instance (v1.2.0+)

The downloaded and parsed data is persisted and cached using WebSQL, and the next time you can avoid reusing resources for unified SVGA download and parsing

const parser = new Parser()
parser.destroy()

const player = new Player('#canvas')
player.destroy()

DB (v1.3.0+)

import { Downloader, Parser, Player } from 'svga.lite'
import DB from 'svga.lite/db'

const svgaFile = 'test.svga'
let data = void 0
let db = void 0

try {
  db = new SVGADB()
} catch (error) {
  console.error(error)
}

if (db) {
  const record = (await db.find(svgaFile))[0]
  record && (data = JSON.parse(record.data))
}

if (!data) {
  const downloader = new Downloader()
  const fileData = await downloader.get(svgaFile)
  const parser = new Parser()

  data = await parser.do(fileData)

  // insert data to db
  db && (await db.insert(svgaFile, JSON.stringify(data)))
}

const player = new Player('#canvas')
await player.mount(data)

player.start()

Contributing

We are grateful to the community for contributing bugfixes and improvements.

# Development & Test
npm run test

# Build
npm run build

# Publish
npm publish

LICENSE

MIT

You can’t perform that action at this time.