apng-canvas-typescript

1.0.1 • Public • Published

This Library is based on

"name": "apng-canvas",
"version": "2.1.3",
"author": "David Mzareulyan",
"description": "Library for displaing animated PNG files in browsers with canvas support",
"keywords": [
"apng",
"animation",
"animated png",
"canvas"
],
"homepage": "https://github.com/davidmz/apng-canvas"

Thanks for his work!

Introduction

Library to display Animated PNG (Wikipedia, specification) in a browser using canvas

You can totally control it.

The library requires support from the following technologies in order to run:

How To Use

<img class="" src="xxxxxxxx" style='opacity:0' />

style='opacity:0' this is important

import APNG from "apng-canvas-typescript";
let apng = new APNG();

api

isSupport

is support apng

apng
  .isSupport()
  .then(() => {
    console.log("not support");
  })
  .catch(() => {
    console.log("support");
  });

animateImage(img,autoplay)

covert apng to canvas data

param type about
img HTMLImgElement img dom
autoplay boolean auto or not

@return Promiseanim:AnimationCotroller

var image1 = document.querySelector(".apng-image1");
apng.animateImage(image1, false).then((anim) => {
  anim.play([50, 70]);
  anim.before((ctx, f) => {
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 100 + f * 3, 100 + f * 3);
  });
  anim.after((ctx, f) => {
    ctx.fillStyle = "blue";
    ctx.fillRect(200, 200, 100 + f * 3, 100 + f * 3);
  });
});

anim

anim.play(frameArray)

param type about
frameArray array [start,end] the frames range you want to play ,[start] means play to the end

anim.stop()

anim.pause(frame)

param type about
frame number stop at the frame number

anim.start()

restart (use with pause)

anim.pause(5);
anim.start();

anim.setOptions({playNum,rate})

param type about default
playNum number play number 0: play again and again :)
rate number play rate 1

anim.before(func) & anim.after(func)

ctx:RenderingContext f: frame number

anim.before((ctx, f) => {
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, 100 + f * 3, 100 + f * 3);
});
anim.after((ctx, f) => {
  ctx.fillStyle = "blue";
  ctx.fillRect(200, 200, 100 + f * 3, 100 + f * 3);
});

Package Sidebar

Install

npm i apng-canvas-typescript

Weekly Downloads

14

Version

1.0.1

License

MIT

Unpacked Size

78.6 kB

Total Files

19

Last publish

Collaborators

  • magic-zhu