VUE3 入門例: 単純なスプライト アニメーションの構築

Vue3 は非常に人気のあるフロントエンド フレームワークであり、近年開発者の間でますます人気が高まっています。習得と使用が簡単なので、フロントエンド開発者は美しく効率的な Web アプリケーションを迅速に構築できます。この記事では、Vue3を使って簡単なスプライトアニメーションを作成する方法を紹介します。

スプライトアニメーションとは何ですか?

スプライト アニメーションは、Web 開発で非常に人気のあるアニメーション実装方法です。一連の小さな画像をつなぎ合わせ、画像のオフセットと透明度を変更することでアニメーション効果を表現します。このアニメーション効果は、キャラクターアニメーションやゲームのロードアニメーションなど、さまざまな場所で見ることができます。

準備

始める前に、いくつかのリソースを準備する必要があります:

1. スプライト画像ファイル

まず、A が必要です。スプライトの写真。スプライトは通常、多数の小さな画像で構成されており、それぞれがアニメーションのフレームです。オンラインで無料のスプライト画像を見つけることも、独自のスプライト画像をデザインすることもできます。

2. Vue CLI

Vue3 プロジェクトを簡単かつ迅速に作成するには、コンピューターに Vue CLI をインストールする必要があります。 Vue CLI は、Vue.js に基づいてプロジェクトを迅速に構築するための完全なシステムです。これは、Vue アプリケーションを迅速に開発、構築、デプロイするのに役立つ一連のツール、ビルド プリセット、プラグインを提供します。 Vue CLI をインストールしていない場合は、まず公式 Web サイトにアクセスしてインストールしてください。

プロジェクトの作成

すべてのリソースの準備ができたら、Vue3 プロジェクトの作成を開始できます。

ターミナルに次のコマンドを入力して、新しい Vue3 プロジェクトを作成します。

vue create sprite-animation

次に、「デフォルト ([Vue 3] babel、eslint)」オプションを選択します。

プロジェクトを作成したら、スプライト画像をプロジェクトに配置する必要があります。

スプライト イメージをプロジェクトの "public" フォルダーにコピーします。

"public" フォルダーに新しい "css" フォルダーを作成し、For "styles." という名前の新しいスタイル ファイルを作成します。 css":

「styles.css」ファイルでは、スプライト画像を背景画像として使用し、CSS を使用して各アニメーション フレームのオフセット、幅、高さ、その他の属性を設定します。

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

次に、このスタイル ファイルを Vue3 コンポーネント ファイルに導入し、スプライト アニメーションをコンポーネント化します。

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

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

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

このようにして、スプライト アニメーションのコンポーネント化に成功しました。

アニメーションを表示するにはどうすればよいですか?

スプライト アニメーションをコンポーネント化したので、それを以下に示します。

「App.vue」ファイルで、「SpriteAnimation」コンポーネントをページに挿入する必要があります。ここでは、「AppHeader」コンポーネントを追加し、ヘッダーにスプライト アニメーション コンポーネントを挿入するだけです。

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

これでスプライトアニメーションの作成と表示が完了しました。次のコマンドを実行するだけで、ブラウザでアニメーションを表示できます。

npm run serve

概要

上記は非常に単純な例ですが、Vue3 のパワーと使いやすさはすでに理解できます。以前のバージョンと比較して、Vue3 はパフォーマンスと保守性が大幅に向上しました。 Vue3 を使用してアニメーションやその他の Web アプリケーションを開発する場合は、上記の手順に留意してください。効率的で美しいアプリケーションを迅速に開発できます。

以上がVUE3 入門例: 単純なスプライト アニメーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。