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

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

WBOY

リリース： 2023-06-25 10:53:56

オリジナル

1603 人が閲覧しました

現代のフロントエンド開発では、ユーザーエクスペリエンスを向上させるためにアニメーションを使用することが無視できない部分になっています。放物線アニメーションもその 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 サイトの他の関連記事を参照してください。