Vue を使用して放物線アニメーションを含むページ デザインを実装するにはどうすればよいですか?

現代のフロントエンド開発では、ユーザー エクスペリエンスを向上させるためにアニメーションを使用することが無視できない部分になっています。放物線アニメーションもその 1 つで、ページに楽しくリラックスした雰囲気を与えることができ、ショッピング カートに商品を追加するなど、ユーザーの操作が必要なさまざまなシナリオで使用できます。この記事では、Vue を使用して放物線アニメーションを含むページ デザインを実装する方法を学びます。

まず第一に、放物線アニメーションの本質が何であるかを理解する必要があります。これには主に、アニメーション カーブとアニメーション パラメータという 2 つの重要な点が関係します。アニメーション カーブは、カーブ パスを指します。放物線アニメーションは、頂点から始まり、連続的に変化するカーブ パスです。実際には、二次関数 y = ax^2 bx c です。ここで、a、b、c は次のとおりです。アニメーションパラメータ。曲線パスの式は固定されておらず、必要に応じて自由に設定できます。

次に、このアニメーション効果の実装を開始する必要があります。

最初のステップは、必要な依存関係をインストールすることです。この例では、vue-router を使用してユーザー ルーティングを管理し、Tween.js を使用してアニメーション カーブを生成します。必要なコマンドは次のとおりです。

npm install vue-router
npm install tween.js

2 番目のステップは、基本的なレイアウトです。基本的なレイアウトを記述するには、Vue のテンプレート構文を使用する必要があります。以下に例を示します。

<template>
  <div class="container">
    <router-link to="/">首页</router-link>
    <router-view class="content"></router-view>
  </div>
</template>

このテンプレートでは、単純なナビゲーション リンクとルーティング ビューが表示されます。このビューは、ナビゲーション リンクをクリックして目的のコンテンツを表示すると切り替わります。

3 番目のステップは、アニメーション効果を追加することです。 tween.js ライブラリを使用して放物線パスを生成し、それをビュー上の要素に適用する関数をコンポーネントに追加する必要があります。実装コードは次のとおりです。

<script>
import * as THREE from 'three'
import { Tween } from 'tween.js'

export default {
  name: 'HomePage',
  data() {
    return {
      position: {x: 0, y: 0, z: 0},
      velocity: {x: 0, y: 0, z: 0},
      acceleration: {x: 0, y: -9.8, z: 0},
    }
  },
  mounted() {
    const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.z = 75

    const scene = new THREE.Scene()

    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)

    const geometry = new THREE.SphereGeometry(5, 32, 32)
    const material = new THREE.MeshBasicMaterial({ color: 0xffff00 })
    const sphere = new THREE.Mesh(geometry, material)
    sphere.position.set(-30, 40, 0)
    scene.add(sphere)

    const animate = () => {
      requestAnimationFrame(animate)

      this.velocity.x += this.acceleration.x * 0.01;
      this.velocity.y += this.acceleration.y * 0.01;
      this.velocity.z += this.acceleration.z * 0.01;

      this.position.x += this.velocity.x;
      this.position.y += this.velocity.y;
      this.position.z += this.velocity.z;

      sphere.position.set(this.position.x, this.position.y, this.position.z);

      renderer.render(scene, camera)
    }

    const animateAjax = ({ start, end }) => () => {
      const tween = new Tween(this.position)
      const control = { x: this.position.x, y: this.position.y }
      const speed = 2000

      tween.to(
        { x: end.left, y: end.top },
        Math.sqrt(Math.pow(control.x - end.left, 2) + Math.pow(control.y - end.top, 2)) / speed * 1000
      )

      tween.onUpdate(() => {
        sphere.position.set(this.position.x, this.position.y, this.position.z)
      })

      tween.start()
    }

    animate()
    this.animateAjax = animateAjax
  },
  methods: {
    handleClick(e) {
      const start = { left: e.pageX, top: window.innerHeight - e.pageY - 20 }
      const end = { left: window.innerWidth - 40, top: 40 }
      this.animateAjax({ start, end })()
    }
  }
}
</script>

このコードでは、球の初期位置、速度、加速度のデータ属性を定義し、マウントされたフック内に Three.js シーンを作成します。 animate 関数は、ブラウザーのレンダリング間隔中にループし、球を順次作成または破棄し、その位置を移動します。 handleClick 関数は、MouseEvent オブジェクトを唯一のパラメータとして受け取ります。このオブジェクトは、Tween オブジェクトを作成し、それを球の現在の位置から固定位置に移動するために使用され、それによって放物線状のアニメーション パスが生成されます。

最後のステップは、アニメーション効果を適用することです。 handleClick 関数をトリガーしてアニメーションを開始するには、クリック イベント リスナーをテンプレートに追加する必要があります。実装コードは次のとおりです。

<template>
  <div class="home">
    <router-link class="navbar" to="/">首页</router-link>
    <h1 class="title">抛物线小球</h1>
    <div class="content">
      <div class="sphere" @click="handleClick"></div>
    </div>
  </div>
</template>

このコードでは、テンプレートにボールとして div 要素を追加し、それにクリック イベント リスナーを追加しました。このようにして、ユーザーがボールをクリックすると、handleClick 関数が呼び出され、放物線アニメーションが開始されます。

上記の手順により、Vue を使用して放物線アニメーションを実装するページ デザイン プロセスが完了しました。実装では、tween.js ライブラリに基づいてアニメーション カーブを生成し、アニメーションを開始する handleClick 関数を追加する必要があります。テンプレートでは、ボールのクリック イベント リスナーを追加し、それに handleClick 関数を関連付ける必要があります。この記事があなたにインスピレーションを与え、Vue をより効果的に使用してページ デザインを実装するのに役立つことを願っています。

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