ホームページ > 記事 > ウェブフロントエンド > Vue3のアニメーション機能を詳しく解説：かっこいいアニメーション効果を実現するアプリ

Vue3のアニメーション機能を詳しく解説：かっこいいアニメーション効果を実現するアプリ

WBOYオリジナル: 2023-06-18 23:34:131955ブラウズ

インターネットテクノロジーの継続的な発展に伴い、ユーザーエクスペリエンスを向上させるためにクールなアニメーション効果を表示する必要がある Web サイトやアプリケーションがますます増えています。最新の JavaScript フレームワークとして、Vue3 はアニメーション機能を含む多くの優れたツールキットを開発者に提供します。この記事では、Vue3のアニメーション機能の応用と実装方法、かっこいいアニメーション効果を実現する方法を詳しく紹介します。

はじめに

Vue3 は、Composition API を通じて次のような強力なアニメーション関数ライブラリを提供します。

useTransition :遷移関数
useAnimation : アニメーション関数
useTween : イージング関数
useSpring: Spring 関数

これらの関数を使用すると、状態が変化したときのグラデーション、スライド、回転、その他の効果など、さまざまな複雑なアニメーション効果を Web ページに簡単に実装できます。

useTransition 遷移関数

useTransition は Vue3 の遷移関数で、2 つの状態間で使用されます。次のような遷移を行います。表示から非表示へ、上から下へスライドインなど。その基本的な使用法は次のとおりです。

import { useTransition } from 'vue'

const transitions = useTransition(show, {
  // 定义三个阶段的动画
  enter: '',
  leave: '',
  appear: ''
})

ここで、show は、現在の状態を表示するかどうかを示すブール値です。 3 つのパラメータ enter、leave、Appearl は、3 段階で実行されるトランジションアニメーションを定義する文字列です。

簡単な例:

<template>
  <div class="container">
    <button @click="toggle">Toggle</button>
    <transition 
      appear
      v-for="msg in msgs"
      :key="msg.id"
      :css="false"
      :enter-class="'animate__animated animate__fadeInDown'"
      :leave-class="'animate__animated animate__fadeOutUp'"
    >
      <div class="alert" :class="'alert-' + msg.type">
        {{ msg.message }}
      </div>
    </transition>
  </div>
</template>

<script>
import { reactive, toRefs, ref, useTransition } from 'vue';

export default {
  setup() {
    const data = reactive({
      msgs: []
    })

    const toggle = () => {
      data.msgs.unshift({
        id: Math.random(),
        type: 'success',
        message: '这是一条消息'
      })
    }

    const transitions = useTransition(data.msgs, {
      enterActiveClass: 'animate__animated animate__fadeInDown',
      leaveActiveClass: 'animate__animated animate__fadeOutUp'
    })

    return {
      ...toRefs(data),
      transitions,
      toggle
    }
  }
}
</script>

「切り替え」ボタンをクリックして show 値の変更を制御すると、プロンプトボックス領域が表示または非表示になります。トランジション機能。この例では、animate.css ライブラリを使用してアニメーション効果を実現します。

useAnimation アニメーション関数

アニメーション関数はトランジション関数とは異なり、回転や拡大縮小などのさまざまな半径をカスタマイズできます。さまざまなアニメーション効果は、useAnimation を使用して定義できます。これは、次のパラメータを含む関数をパラメータとして受け取ります:

initial: アニメーションの開始時
#from
to
の初期状態: アニメーション期間
: アニメーション遅延時間
: イージング関数

import { useAnimation } from 'vue'

const animations = useAnimation(() => ({
  top: 0,
  left: 0,
  backgroundColor: 'red',
  width: '100px',
  height: '100px',
  translateY: 0,
  rotate: '0deg'
}), {
  from: {
    top: '100px',
    left: '100px',
    backgroundColor: 'blue',
    width: '50px',
    height: '50px',
    translateY: '200px',
    rotate: '-90deg'
  },
  to: {
    top: '200px',
    left: '200px',
    backgroundColor: 'black',
    width: '200px',
    height: '200px',
    translateY: '0px',
    rotate: '360deg'
  },
  duration: 3000,
  delay: 1000,
  ease: 'ease'
})

この例

initial

状態を小さな青い四角形から大きな黒い四角形に遷移させながら、そのプロパティの変更をアニメーション化するアニメーション関数を定義します。アニメーションは

setup

で設定されているため、テンプレートを通じてその値を直接取得できないことに注意してください。テンプレートに設定する特定の値を手動で導入する必要があります。アニメーションは次のように使用する必要があります: <pre class='brush:html;toolbar:false;'><template> <div :style="animations"></div> </template> <script> import { useAnimation } from 'vue'; export default { setup() { const animations = useAnimation(() => ({ top: 0, left: 0, backgroundColor: 'red', width: '100px', height: '100px', translateY: 0, rotate: '0deg' }), { from: { top: '100px', left: '100px', backgroundColor: 'blue', width: '50px', height: '50px', translateY: '200px', rotate: '-90deg' }, to: { top: '200px', left: '200px', backgroundColor: 'black', width: '200px', height: '200px', translateY: '0px', rotate: '360deg' }, duration: 3000, delay: 1000, ease: 'ease' }) return { animations } } } </script></pre>テンプレート内でアニメーションを必要とするプロパティ値を

:style

に渡して最終ターゲットを設定できます。

イージング関数

useTween

関数を提供します。基本的な使用法は次のとおりです。 <pre class='brush:javascript;toolbar:false;'>import { useTween } from 'vue' const tween = useTween(0, 100, { duration: 1000, delay: 0, ease: 'easeInQuad', onComplete: () => { console.log('Completed') } })</pre>この例では、

easeInQuad

イージング関数を使用して、指定された時間内に値を 0 から 100 に変換します。これは

useTween

を示す簡単な例です: <pre class='brush:html;toolbar:false;'><template> <div> <div :style="{ transform: 'translateX(' + xValue + 'px)' }">{{ xValue }}</div> <button @click="move">Move</button> </div> </template> <script> import { ref, useTween } from 'vue'; export default { setup() { const xValue = ref(0) const move = () => { useTween(0, 300, { duration: 1000, ease: 'easeOutElastic', onUpdate: (value) => { xValue.value = value } }) } return { xValue, move } } } </script></pre>この例では、

useTween

を xValue## に使用します # から移動します0 ～ 300。easeOutElastic イージング関数を使用してスプリング効果を作成します。 onUpdate コールバック関数は、value (スプリングアニメーションの最終値) を xValue に割り当て、それをテンプレート内の div にバインドします。

useSpring

は、スプリングアニメーションを実装するために使用される Vue3 の関数です。初期状態とターゲット状態を指定してアニメーションを作成し、スプリング効果を適用します。

import { useSpring } from 'vue'

const spring = useSpring({
  from: {
    opacity: 0,
    transform: 'translateX(-100px)'
  },
  to: {
    opacity: 1,
    transform: 'translateX(0px)'
  },
  config: {
    tension: 120,
    friction: 14,
    mass: 5
  }
})

この例では、要素を左から半透明から不透明にパンします。他のアニメーション関数と同様に、アニメーション効果を制御するために使用できるカスタマイズ オプションは他にもたくさんあります。

<template>
  <div :style="spring">
    <h1>这是一个标题</h1>
    <p>这是一段内容</p>
  </div>
</template>

<script>
import { useSpring } from 'vue';

export default {
  setup() {
    const spring = useSpring({
      from: {
        opacity: 0,
        transform: 'translateX(-100px)'
      },
      to: {
        opacity: 1,
        transform: 'translateX(0px)'
      },
      config: {
        tension: 120,
        friction: 14,
        mass: 5
      }
    })

    return {
      spring
    }
  }
}
</script>

テンプレートでは、

:style

属性を使用して、アニメーション要素にバインドされたスタイルを表します。この例では、スプリングアニメーションの状態を親

div に適用して、ページ全体でスプリングをアニメーション化する方法を示します。 概要

Vue3 は、開発者が複雑なアニメーション効果を迅速かつ簡単に理解できるようにする一連の優れたアニメーション関数を提供します。これらの機能を使用すると、さまざまなクールなアニメーション効果を実装して、Web アプリケーションのユーザーエクスペリエンスをさらに向上させることができます。これらの関数を使用するには、

関数で関数を呼び出し、その状態値をコンポーネントとテンプレートにバインドするだけです。さらに、これらの機能の構成オプションを必要に応じて拡張し、さまざまな種類のアニメーション効果を実装することができます。

以上がVue3のアニメーション機能を詳しく解説：かっこいいアニメーション効果を実現するアプリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Vue3のキープアライブ機能を詳しく解説：アプリケーションのパフォーマンスを最適化するアプリケーション次の記事：Vue3のキープアライブ機能を詳しく解説：アプリケーションのパフォーマンスを最適化するアプリケーション

続きを見る