Анимация GIF на холсте с использованием Reaction-Konva - PullRequest
Новая
       24

Анимация GIF на холсте с использованием Reaction-Konva

0 голосов
/ 17 марта 2020

Я пытаюсь создать пользовательский интерфейс для приложения, использующего реагирование. Я использую React-Konva для создания 2D холста. Я выяснил, как импортировать изображение на этот холст, но у меня возникли проблемы при попытке анимировать GIF. Есть документация о том, как сделать это в конве, но я не могу преобразовать ее в реактив-конву.

Документация, чтобы сделать это в конве, дана здесь .

1 Ответ

2 голосов
/ 18 марта 2020 
import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Image } from "react-konva";
// gifler will be imported into global window object
import "gifler";

const GIF = ({ src }) => {
  const imageRef = React.useRef(null);
  const canvas = React.useMemo(() => {
    const node = document.createElement("canvas");
    return node;
  }, []);

  React.useEffect(() => {
    // save animation instance to stop it on unmount
    let anim;
    window.gifler(src).get(a => {
      anim = a;
      anim.animateInCanvas(canvas);
      anim.onDrawFrame = (ctx, frame) => {
        ctx.drawImage(frame.buffer, frame.x, frame.y);
        imageRef.current.getLayer().draw();
      };
    });
    return () => anim.stop();
  }, [src, canvas]);

  return <Image image={canvas} ref={imageRef} />;
};

class App extends React.Component {
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <GIF src="https://konvajs.org/assets/yoda.gif" />
        </Layer>
      </Stage>
    );
  }
}

render(<App />, document.getElementById("root"));

Демо: https://codesandbox.io/s/react-konva-gif-animation-p86qr

...