向drawimage添加过渡答案

【问题标题】：Adding transition to drawimage向drawimage添加过渡
【发布时间】：2020-07-29 15:43:40
【问题描述】：

我正在尝试向画布元素添加过渡效果。我附上了一个示例 sn-p，显示了我当前的行为。

如何向画布中的图像添加过渡动画？

感谢您的帮助:)

const { useRef, useEffect } = React;
const aImage = new Image();
const aSrc = "https://www.techjunkie.com/wp-content/uploads/2017/09/letter_a_small.png"
let x = 20;
let y = 20;

const draw = (elRef, coords) => {
   aImage.addEventListener('load', () => {
    const canvas = elRef.current;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.drawImage(aImage, coords.x, coords.y);
   })
   aImage.src = aSrc;
}

function App() {
  const canvasRef = useRef(null);
  
  setInterval(() => {
    draw(canvasRef, {x, y})
    x = x + 20;
    }
    , 500)

  return (
    <canvas ref={canvasRef} height={600} width={1200} />
  )
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【问题讨论】：

标签： javascript reactjs canvas html5-canvas

【解决方案1】：

您需要使用requestAnimationFrame处理渲染内部的过渡，这样它就很流畅了，包括下面的示例。

const { useRef, useEffect } = React;
const aImage = new Image();
const aSrc = "https://www.techjunkie.com/wp-content/uploads/2017/09/letter_a_small.png"
let x = 20;
let y = 20;

const draw = (ref) => {
   aImage.addEventListener('load', () => {
            render(ref);
   })
   
   aImage.src = aSrc;
}

function render(ref) {
        requestAnimationFrame(_ => render(ref));
  
    const canvas = ref.current;
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    // Any fancy transition here
    x++;
    //
    ctx.drawImage(aImage, x, y);
}

function App() {
  const canvasRef = useRef(null);
  useEffect(_ => draw(canvasRef));

  return (
    <canvas ref={canvasRef} height={600} width={1200} />
  )
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：