uniapp 如何實現canvas動畫

隨著行動裝置應用的不斷發展，動畫已經成為了現代應用的必備元素。而canvas作為HTML5中提供的一種繪圖技術，被廣泛應用於實現各種複雜的動畫效果。而今，隨著uniapp的流行，我們也可以藉助uniapp的強大能力，輕鬆實現canvas動畫效果。本文將為大家詳細介紹uniapp如何實現canvas動畫。

一、認識canvas

canvas是HTML5新增的特性，它是一種繪圖技術，可以幫助我們繪製各種形狀、圖案、複雜場景等。相對於DOM操作，canvas的繪圖效能更加強大，可以實現更複雜的動畫效果。 canvas繪圖的基礎是兩個指令：繪製路徑、填滿路徑，其實作基於JavaScript的API。

在uniapp中實作canvas的步驟如下：

1. 在uniapp專案中建立一個canvas畫布，程式碼如下：

<canvas id="myCanvas" style="width: 100%; height: 100%;"></canvas>

2. 取得canvas上下文，程式碼如下：

let ctx = uni.createCanvasContext('myCanvas')

3. 在canvas上下文中使用JavaScript API實作繪圖作業。

下面我們將透過實例程式碼來詳細介紹uniapp中實作canvas動畫的具體步驟。

二、實作步驟

1. 定義動畫數據

我們先來定義動畫數據，包括每個圓的顏色、半徑以及運動速度等，程式碼如下：

const data = [
  { color: '#0099CC', radius: 50, speed: 4, x: 0, y: 50 },
  { color: '#99CC00', radius: 70, speed: 3, x: 0, y: 100 },
  { color: '#FFBB33', radius: 60, speed: 5, x: 0, y: 150 },
  { color: '#FF4444', radius: 80, speed: 2, x: 0, y: 200 }
]

2. 繪製圓形

首先我們需要透過canvas上下文繪製各個圓形，程式碼如下：

function draw() {
  for (let i = 0; i < data.length; i++) {
    let item = data[i];
    ctx.beginPath();
    ctx.arc(item.x + item.radius, item.y + item.radius, item.radius, 0, Math.PI * 2, true)
    ctx.closePath()
    ctx.fillStyle = item.color;
    ctx.fill();
  }
  ctx.draw();
}

3. 更新數據並重繪

接下來，我們需要更新控制圓形動畫的數據，並在canvas上下文中重新繪製，程式碼如下：

function update() {
  for (let i = 0; i < data.length; i++) {
    let item = data[i];
    item.x += item.speed;
    if (item.x + item.radius >= window.innerWidth) {
      item.speed = -item.speed;
    } else if (item.x - item.radius <= 0) {
      item.speed = -item.speed;
    }
  }
  draw(); // 重新绘制
  setTimeout(update, 1000 / 60); //每秒重绘60次
}

4. 頁面監聽

最後，我們在頁面的onLoad生命週期中監聽canvas的大小變化，自動適應螢幕寬度，並啟動動畫，程式碼如下：

onLoad() {
  ctx = uni.createCanvasContext('myCanvas');
  const query = uni.createSelectorQuery();
  query.select('#myCanvas').boundingClientRect(rect => {
    const canvas = document.getElementById('myCanvas');
    canvas.width = rect.width;
    canvas.height = rect.height;
  }).exec();
  update();
}

完整程式碼如下：

<script>
  let ctx = null;
  const data = [
    { color: '#0099CC', radius: 50, speed: 4, x: 0, y: 50 },
    { color: '#99CC00', radius: 70, speed: 3, x: 0, y: 100 },
    { color: '#FFBB33', radius: 60, speed: 5, x: 0, y: 150 },
    { color: '#FF4444', radius: 80, speed: 2, x: 0, y: 200 }
  ];

  function draw() {
    for (let i = 0; i < data.length; i++) {
      let item = data[i];
      ctx.beginPath();
      ctx.arc(item.x + item.radius, item.y + item.radius, item.radius, 0, Math.PI * 2, true)
      ctx.closePath()
      ctx.fillStyle = item.color;
      ctx.fill();
    }
    ctx.draw();
  }

  function update() {
    for (let i = 0; i < data.length; i++) {
      let item = data[i];
      item.x += item.speed;
      if (item.x + item.radius >= window.innerWidth) {
        item.speed = -item.speed;
      } else if (item.x - item.radius <= 0) {
        item.speed = -item.speed;
      }
    }
    draw();
    setTimeout(update, 1000 / 60); //每秒重绘60次
  }

  export default {
    onLoad() {
      ctx = uni.createCanvasContext('myCanvas');
      const query = uni.createSelectorQuery();
      query.select('#myCanvas').boundingClientRect(rect => {
        const canvas = document.getElementById('myCanvas');
        canvas.width = rect.width;
        canvas.height = rect.height;
      }).exec();
      update();
    },
  }
</script>

三、總結

透過上述步驟我們可以看到，借助uniapp的能力，我們可以很方便地實現canvas動畫效果，同時可以根據需求自訂動畫樣式，非常靈活、方便。值得一提的是，uniapp也提供了許多豐富的元件和插件，可以用來實現更複雜的動畫效果，是一款非常適合行動端應用開發的工具。

以上是uniapp 如何實現canvas動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！