VUE3 Contoh Bermula: Membina Animasi Sprite Mudah

Vue3 ialah rangka kerja bahagian hadapan yang sangat popular, yang telah menjadi semakin popular di kalangan pembangun sejak beberapa tahun kebelakangan ini. Ia mudah dipelajari dan digunakan, membolehkan pembangun bahagian hadapan membina aplikasi web yang cantik dan cekap dengan cepat. Artikel ini akan memperkenalkan cara menggunakan Vue3 untuk membina animasi sprite mudah.

Apakah animasi sprite?

Animasi Sprite ialah kaedah pelaksanaan animasi yang sangat popular dalam pembangunan web. Ia menggabungkan satu siri gambar kecil dan mempersembahkan kesan animasi dengan menukar offset dan ketelusan gambar. Kesan animasi ini boleh dilihat di banyak tempat, seperti animasi watak, memuatkan animasi dalam permainan, dll.

Persediaan

Sebelum kita mula, kita perlu menyediakan beberapa sumber:

1. Fail imej Sprite

Pertama, kita memerlukan A gambar sprite. Sprite biasanya terdiri daripada beberapa gambar kecil, setiap satunya adalah bingkai animasi. Kami boleh mencari beberapa gambar sprite percuma dalam talian, atau kami boleh mereka bentuk kami sendiri.

2. Vue CLI

Untuk mencipta projek Vue3 kami dengan mudah dan cepat, kami perlu memasang Vue CLI pada komputer. Vue CLI ialah sistem lengkap untuk membina projek dengan cepat berdasarkan Vue.js. Ia menyediakan satu siri alatan, membina pratetap dan pemalam untuk membantu kami membangunkan, membina dan menggunakan aplikasi Vue dengan cepat. Jika anda belum memasang Vue CLI, sila pergi ke laman web rasmi untuk memasangnya terlebih dahulu.

Penciptaan Projek

Setelah kami mempunyai semua sumber sedia, kami boleh mula mencipta projek Vue3 kami.

Masukkan arahan berikut dalam terminal untuk mencipta projek Vue3 baharu.

vue create sprite-animation

Kemudian pilih pilihan "Lalai ([Vue 3] babel, eslint)".

Selepas projek dibuat, kita perlu meletakkan imej sprite ke dalam projek.

Salin imej sprite ke folder "awam" projek:

Buat folder "css" baharu dalam folder "awam" dan buat fail gaya baharu bernama Untuk "gaya. css":

Dalam fail "styles.css", kami menggunakan imej sprite sebagai imej latar belakang dan menggunakan CSS untuk menetapkan offset, lebar, tinggi dan atribut lain bagi setiap bingkai animasi:

.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; }
}

Kemudian kami memperkenalkan fail gaya ini ke dalam fail komponen Vue3 dan menkomponenkan animasi sprite:

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

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

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

Dengan cara ini, kami telah berjaya menyusun animasi sprite!

Bagaimana untuk memaparkan animasi?

Sekarang kami telah menyusun animasi sprite, kami akan menunjukkannya di bawah.

Dalam fail "App.vue", kita perlu memasukkan komponen "SpriteAnimation" ke dalam halaman. Kami hanya menambah komponen "AppHeader" di sini dan memasukkan komponen animasi sprite ke dalam pengepala.

<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>

Pada ketika ini, kami telah menyelesaikan penciptaan dan paparan animasi sprite! Hanya jalankan arahan berikut dan anda boleh melihat animasi kami dalam penyemak imbas.

npm run serve

Ringkasan

Di atas adalah contoh yang sangat mudah, tetapi kita sudah boleh menghargai kuasa dan kemudahan penggunaan Vue3. Berbanding dengan versi sebelumnya, Vue3 telah meningkatkan prestasi dan kebolehselenggaraan dengan ketara. Apabila menggunakan Vue3 untuk membangunkan animasi atau aplikasi web lain, ingatlah untuk mengingati langkah di atas dan anda boleh membangunkan aplikasi yang cekap dan cantik dengan cepat.

Atas ialah kandungan terperinci VUE3 Contoh Bermula: Membina Animasi Sprite Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!