uniappでキャンバスアニメーションを実装する方法

モバイル アプリケーションの継続的な開発により、アニメーションは最新のアプリケーションに不可欠な要素になりました。 Canvas は HTML5 で提供される描画技術であり、さまざまな複雑なアニメーション効果を実現するために広く使用されています。 uniapp の人気に伴い、uniapp の強力な機能を使用してキャンバス アニメーション効果を簡単に実現できるようになりました。この記事では、uniappがキャンバスアニメーションを実装する方法を詳しく紹介します。

1. キャンバスについて理解する

キャンバスは HTML5 の新機能で、さまざまな形状、パターン、複雑なシーンなどを描画するのに役立つ描画テクノロジです。 DOM 操作と比較して、キャンバスの描画パフォーマンスはより強力であり、より複雑なアニメーション効果を実現できます。キャンバス描画の基本は、描画パスと塗りつぶしパスの 2 つのコマンドであり、JavaScript API に基づいて実装されます。

uniapp にキャンバスを実装する手順は次のとおりです。

1. uniapp プロジェクトにキャンバスを作成します。コードは次のとおりです。

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

2. キャンバス コンテキストを取得します。コードは次のとおりです。

let ctx = uni.createCanvasContext('myCanvas')

3. JavaScript API を使用して、キャンバス コンテキストでの描画操作を実装します。

以下では、サンプルコードを通じて、uniapp でキャンバスアニメーションを実装する具体的な手順を紹介します。

2. 実装手順

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. 円を描く

最初に、キャンバス コンテキストを通じて各円を描く必要があります。コードは次のとおりです。

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. データの更新と再描画

次に、円形アニメーションを制御するデータを更新し、キャンバス コンテキストで再描画する必要があります。コードは次のとおりです:

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 ライフサイクルでのキャンバス サイズの変化を監視し、画面幅に自動的に適応して、アニメーションを開始します。コードは次のとおりです:

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>

3. 概要

上記の手順を通じて、uniapp の機能を利用していることがわかります。 、キャンバス アニメーション効果を簡単に実現でき、同時にニーズに応じてアニメーション スタイルをカスタマイズできるため、非常に柔軟で便利です。 uniapp は、より複雑なアニメーション効果を実現するために使用できる豊富なコンポーネントとプラグインも提供しており、モバイル アプリケーション開発に非常に適したツールであることにも注意してください。

以上がuniappでキャンバスアニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。