亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

向 drawimage 添加過渡

向 drawimage 添加過渡

楊__羊羊 2022-12-09 19:40:38
我正在嘗試向畫布元素添加過渡效果。我附上了一個顯示我當前行為的示例片段。我如何將過渡動畫添加到畫布中的圖像?謝謝你的幫助 :)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>
查看完整描述

1 回答

?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

您需要處理渲染內部的過渡,使用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>


查看完整回答
反對 回復 2022-12-09
  • 1 回答
  • 0 關注
  • 114 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號