如何让飞行物体反应组件使用gif？

如何解决如何让飞行物体反应组件使用gif？

所以我正在制作一个小游戏，我希望让飞行恐龙物体出现供用户销毁。我希望使用我拥有的导入 gif 渲染飞行物体。它在语法上会是什么样子，我是否需要一些 React 库来做到这一点？所以我将飞行恐龙对象作为组件，然后将其导入画布中进行渲染。

Canvas.jsx：

import React from 'react';
import PropTypes from 'prop-types';
import Background from './Background';
import Ground from './Ground';
import CannonBase from './CannonBase';
import CannonShaft from './CannonShaft';
import CannonBall from './CannonBall';
import Currentscore from './Currentscore';

const Canvas = (props) => {
  const viewBox = [window.innerWidth / -2,100 - window.innerHeight,window.innerWidth,window.innerHeight];
  return (
    <svg
      id="mini-game-canvas"
      preserveAspectRatio="xMaxYMax none"
      onMouseMove={props.trackMouse}
      viewBox={viewBox}
    >
      <defs>
        <filter id="shadow">
          <feDropShadow dx="1" dy="1" stdDeviation="2" />
        </filter>
      </defs>
      <Background />
      <Ground />
      <CannonShaft rotation={props.angle} />
      <CannonBase />
      <CannonBall position={{x: 0,y: -100}}/>
      <Currentscore score={15} />
    </svg>
  );
};

Canvas.propTypes = {
  angle: PropTypes.number.isrequired,trackMouse: PropTypes.func.isrequired,};

export default Canvas;

飞行恐龙组件：

import React from 'react';
import PropTypes from 'prop-types';
import dino from './assets/dino.gif'

const FlyingDino = (props) => {

};

export default FlyingDino;