Comment implémenter une animation de canevas dans Uniapp

Avec le développement continu des applications mobiles, l'animation est devenue un élément essentiel des applications modernes. En tant que technologie de dessin fournie en HTML5, le canevas est largement utilisé pour obtenir divers effets d'animation complexes. Désormais, avec la popularité d'uniapp, nous pouvons également utiliser les puissantes capacités d'uniapp pour réaliser facilement des effets d'animation sur toile. Cet article présentera en détail comment uniapp implémente l'animation de canevas.

1. Apprenez à connaître Canvas

Canvas est une nouvelle fonctionnalité de HTML5. C'est une technologie de dessin qui peut nous aider à dessiner diverses formes, motifs, scènes complexes, etc. Par rapport aux opérations DOM, les performances de dessin de Canvas sont plus puissantes et permettent d'obtenir des effets d'animation plus complexes. La base du dessin sur toile est constituée de deux commandes : dessiner le chemin et remplir le chemin, qui sont implémentées sur la base de l'API JavaScript.

Les étapes pour implémenter canvas dans uniapp sont les suivantes :

1. Créez un canevas dans le projet uniapp, le code est le suivant :

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

2. Obtenez le contexte du canevas, le code est le suivant :

let ctx = uni.createCanvasContext('myCanvas')

3. Utilisez l'API JavaScript dans le contexte du canevas Implémentez des opérations de dessin.

Ci-dessous, nous présenterons les étapes spécifiques de la mise en œuvre de l'animation de canevas dans uniapp à l'aide d'un exemple de code.

2. Étapes de mise en œuvre

1. Définissez les données d'animation

Nous définissons d'abord les données d'animation, y compris la couleur, le rayon et la vitesse de déplacement de chaque cercle. Le code est le suivant :

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. Dessinez un cercle

. Tout d'abord, chaque cercle doit être dessiné à travers le contexte du canevas. Le code est le suivant :

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. Mettre à jour les données et redessiner

Ensuite, nous devons mettre à jour les données qui contrôlent l'animation du cercle et les redessiner dans le contexte du canevas. . Le code est le suivant :

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. Surveillance de la page

Enfin, nous surveillons les changements de taille du canevas dans le cycle de vie onLoad de la page, nous adaptons automatiquement à la largeur de l'écran et démarrons l'animation. :

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();
}

Le code complet est le suivant :

<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. Résumé

Passé À partir des étapes ci-dessus, nous pouvons voir qu'avec l'aide des capacités d'uniapp, nous pouvons facilement obtenir des effets d'animation sur toile, et en même temps, nous pouvons personnaliser le style d'animation en fonction des besoins, ce qui est très flexible et pratique. Il convient de mentionner qu'uniapp fournit également de nombreux composants et plug-ins riches, qui peuvent être utilisés pour réaliser des effets d'animation plus complexes. Il s'agit d'un outil très adapté au développement d'applications mobiles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!