Exemple de démarrage de VUE3 : création d'une animation de sprite simple-Voir.js-php.cn

Exemple de démarrage de VUE3 : création d'une animation de sprite simple

WBOY

Libérer： 2023-06-15 23:54:08

original

1427 Les gens l'ont consulté

Vue3 est un framework front-end très populaire qui est devenu de plus en plus populaire parmi les développeurs ces dernières années. Il est facile à apprendre et à utiliser, permettant aux développeurs front-end de créer rapidement des applications Web belles et efficaces. Cet article explique comment utiliser Vue3 pour créer une animation de sprite simple.

Qu'est-ce que l'animation de sprites ?

L'animation Sprite est une méthode de mise en œuvre d'animation très populaire dans le développement Web. Il assemble une série de petites images et présente des effets d'animation en modifiant le décalage et la transparence des images. Cet effet d'animation peut être vu à de nombreux endroits, comme les animations de personnages, le chargement d'animations dans les jeux, etc.

Préparation

Avant de commencer, nous devons préparer quelques ressources :

Fichier image Sprite

Tout d'abord, nous avons besoin d'une photo du sprite. Les sprites sont généralement constitués d'un certain nombre de petites images, chacune étant une image d'animation. Nous pouvons trouver des images de sprites gratuites en ligne, ou nous pouvons concevoir les nôtres.

Afin de créer notre projet Vue3 facilement et rapidement, nous devons installer Vue CLI sur l'ordinateur. Vue CLI est un système complet permettant de créer rapidement des projets basés sur Vue.js. Il fournit une série d'outils, de préréglages de construction et de plugins pour nous aider à développer, créer et déployer rapidement des applications Vue. Si vous n'avez pas installé Vue CLI, veuillez d'abord vous rendre sur le site officiel pour l'installer.

Création de projet

Une fois que nous avons toutes les ressources prêtes, nous pouvons commencer à créer notre projet Vue3.

Entrez la commande suivante dans le terminal pour créer un nouveau projet Vue3.

vue create sprite-animation

Copier après la connexion

Sélectionnez ensuite l'option "Par défaut ([Vue 3] babel, eslint)".

Une fois le projet créé, nous devons mettre l'image du sprite dans le projet.

Copiez l'image du sprite dans le dossier "public" du projet :

Créez un nouveau dossier "css" dans le dossier "public" et créez un nouveau fichier de style s'appelle "styles.css":

Dans le fichier "styles.css", nous utilisons l'image du sprite comme image d'arrière-plan et utilisons CSS pour définir le décalage de chaque image d'animation. et d'autres attributs :

.sprite {
  background-image: url(./sprite.png);
  background-size: 1000%;
  width: 100px;
  height: 100px;
  animation: play-sprite .8s steps(10);
  /* 每个动画包含有10帧 */
}

@keyframes play-sprite {
  from { background-position: 0 0; }
  to { background-position: -1000% 0; }
}

Copier après la connexion

Ensuite, nous introduisons ce fichier de style dans le fichier de composant Vue3 et composons l'animation du sprite :

<template>
  <div class="sprite-container">
    <div class="sprite"></div>
  </div>
</template>

<script>
import "../public/css/styles.css";

export default {
  name: "SpriteAnimation",
};
</script>

Copier après la connexion

De cette façon, nous réussissons à composer l'animation du sprite !

Comment afficher une animation ?

Maintenant que nous avons composant l'animation du sprite, montrons-la ci-dessous.

Dans le fichier "App.vue", nous devons insérer le composant "SpriteAnimation" dans la page. Nous ajoutons simplement ici un composant "AppHeader" et insérons le composant d'animation de sprite dans l'en-tête.

<template>
  <div id="app">
    <app-header />
    <div class="container">
      <SpriteAnimation />
      <router-view />
    </div>
  </div>
</template>

<script>
import AppHeader from "./components/AppHeader.vue";
import SpriteAnimation from "./components/SpriteAnimation.vue";

export default {
  name: "App",
  components: {
    AppHeader,
    SpriteAnimation,
  },
};
</script>

<style>
/* 样式省略 */
</style>

Copier après la connexion

À ce stade, nous avons terminé la création et l'affichage de l'animation du sprite ! Exécutez simplement la commande suivante et vous pourrez voir notre animation dans le navigateur.

npm run serve

Copier après la connexion

Summary

Ce qui précède est un exemple très simple, mais on peut déjà apprécier la puissance et la facilité d'utilisation de Vue3. Par rapport aux versions précédentes, Vue3 a considérablement amélioré les performances et la maintenabilité. Lorsque vous utilisez Vue3 pour développer des animations ou d'autres applications Web, n'oubliez pas de garder les étapes ci-dessus à l'esprit et vous pourrez rapidement développer des applications efficaces et esthétiques.

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!