Vue を使用してレインボー チャート CSS アニメーションを実装するにはどうすればよいですか?

Vue は人気のある Javascript フレームワークであり、Web アプリケーション開発に推奨されるフレームワークの 1 つとなっています。その理由の 1 つは、Vue 開発者が CSS アニメーションと他の多くの強力なアニメーション ライブラリを簡単に使用して、素晴らしいユーザー エクスペリエンスを実現できることです。 Vue で虹グラフ CSS アニメーションを実装するのは難しそうに思えるかもしれませんが、この記事では簡単に実現できることを紹介します。ここではいくつかの手順と方法を紹介します。

ステップ 1: Vue CLI のインストール

Vue を使用して虹アニメーションの実装を開始するには、まず Vue CLI をインストールする必要があります。 Vue CLI は、新しい Vue プロジェクトを迅速に作成するために使用できるコマンド ライン インターフェイス ツールです。ターミナルに次のコマンドを入力して、Vue CLI をインストールできます:

npm install -g vue-cli

ステップ 2: 新しい Vue プロジェクトを作成する

Vue CLI をインストールした後、次のコマンドを使用して新しい Vue プロジェクト:

vue init webpack my-project

このコマンドは、Webpack テンプレートを使用して新しい Vue プロジェクトを生成し、「my-project」という名前のフォルダーを生成します。

ステップ 3: 必要なパッケージをインストールする

引き続きターミナルを使用し、プロジェクト フォルダー (cd my-project) に入ります。次のコマンドを使用して、必要な npm パッケージをインストールします:

npm install vue-lottie@0.2.6 animate.css@3.7.2

• vue-lottie: Lottie アニメーションの作成と管理に役立ちます
• animate.css : そのアニメーション ライブラリを使用して CSS アニメーション効果を追加します

ステップ 4: Lottie JSON ファイルを追加します

Lottie は、Adobe After Effects アニメーションをレンダリングするためのライブラリです。 Lottie を使用すると、開発者は Web アプリケーションで使用するために After Effects アニメーションを JSON ファイルにエクスポートできます。この例では、Lottie JSON ファイルを使用してレインボー チャートをアニメーション化します。 [LottieFiles](https://lottiefiles.com/)からは、Lottieの様々なアニメーションを無料でダウンロードできます。

ダウンロードした Lottie JSON ファイルを src/assets ディレクトリに保存します。

ステップ 5: Vue コンポーネントを作成する

「Rainbow.vue」という名前の新しい Vue コンポーネントを src/components ディレクトリに作成します。次のコードを Rainbow.vue ファイルに追加します。

<template>
  <div class="rainbow-container">
    <lottie-animation :animation-data="lottieAnimation" />
  </div>
</template>

<script>
import LottieAnimation from 'vue-lottie'
import rainbowAnimation from '@/assets/rainbow.json'
import 'animate.css/animate.css'

export default {
  name: 'Rainbow',
  components: {
    LottieAnimation
  },
  data() {
    return {
      lottieAnimation: null
    }
  },
  mounted() {
    this.lottieAnimation = rainbowAnimation
  }
}
</script>

<style lang="scss">
.rainbow-container {
  width: 100%;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .lottie-player {
    width: 50%;
    height: 50%;
    transform: scale(0.5);
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));

    &.animated {
      animation-duration: 7s;
      animation-iteration-count: infinite;
      animation-name: rainbow-animation;
    }
  }

  @keyframes rainbow-animation {
    0% {
      filter: drop-shadow(0px 0px 10px rgba(255, 0, 0, 0.8));
    }
    16% {
      filter: drop-shadow(0px 0px 10px rgba(255, 0, 0, 0.8));
    }
    33% {
      filter: drop-shadow(0px 0px 10px rgba(255, 165, 0, 0.8));
    }
    50% {
      filter: drop-shadow(0px 0px 10px rgba(255, 255, 0, 0.8));
    }
    66% {
      filter: drop-shadow(0px 0px 10px rgba(0, 128, 0, 0.8));
    }
    83% {
      filter: drop-shadow(0px 0px 10px rgba(0, 0, 255, 0.8));
    }
    100% {
      filter: drop-shadow(0px 0px 10px rgba(238, 130, 238, 0.8));
    }
  }
}
</style>

上記のコードでは、Lottie アニメーション コンポーネントを使用して Lottie アニメーションをレンダリングし、require 関数を使用してダウンロードした Lottie JSON ファイルを Vue に導入します。成分。また、animate.css ライブラリをコンポーネントに導入したため、すべての animate.css アニメーションを CSS で使用できるようになりました。

マウントされたライフサイクル フックに正しいアニメーションが割り当てられるように、lottieAnimation 宣言を空のオブジェクトとして指定し、Lottie アニメーション コンポーネントでアニメーション データ プロパティを指定します。最後に、「rainbow-animation」という名前の CSS アニメーションを作成し、それを Lottie アニメーション コンポーネントに適用します。

ステップ 6: App.vue にコンポーネントを追加する

これで、Rainbow コンポーネントをアプリケーションに追加できます。 App.vue ファイルを編集し、次のコードを追加します。

<template>
  <div id="app">
    <Rainbow />
  </div>
</template>

<script>
import Rainbow from '@/components/Rainbow.vue'

export default {
  name: 'App',
  components: {
    Rainbow
  }
}
</script>

ここでは、Rainbow コンポーネントをインポートし、#app で使用します。

ステップ 7: アプリケーションを実行する

これで、npm runserve コマンドを使用して、localhost:8080 でアプリケーションを実行できるようになります。

この URL をブラウザで開くと、美しい虹のアニメーション効果が表示されます。

概要

Vue を使用してレインボー チャート CSS アニメーションを実装するのは難しいように思えるかもしれませんが、Vue CLI といくつかのツールとライブラリを使用すると、簡単に実装できます。この記事では、Vue CLI といくつかの必要な npm パッケージをインストールし、LottieJSON ファイルと CSS アニメーションを Vue コンポーネントに追加し、それを App.vue ファイルで使用しました。アプリで素晴らしい虹のアニメーション効果を確認できるようになりました。

以上がVue を使用してレインボー チャート CSS アニメーションを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。