Comment utiliser Vue pour implémenter la conception de pages avec une animation parabolique ?

Dans le développement front-end moderne, l'utilisation de l'animation pour améliorer l'expérience utilisateur est devenue un élément incontournable. L'animation parabolique en fait partie, elle peut apporter une sensation amusante et détendue à la page et peut être utilisée dans divers scénarios nécessitant des opérations de l'utilisateur, telles que l'ajout d'articles à un panier. Dans cet article, nous apprendrons comment implémenter une conception de page avec animation parabolique à l'aide de Vue.

Tout d’abord, nous devons comprendre quelle est l’essence de l’animation parabolique. Cela implique principalement deux points clés : les courbes d'animation et les paramètres d'animation. La courbe d'animation fait référence à un chemin de courbe. L'animation parabolique est un chemin de courbe qui part du sommet et change continuellement. Il s'agit en fait d'une fonction quadratique y = ax^2 + bx + c, où a, b, c sont. paramètres d'animation. La formule du tracé de la courbe n'est pas fixe et peut être définie librement en fonction des besoins.

Ensuite, nous devons commencer à implémenter cet effet d'animation spécifiquement.

La première étape consiste à installer les dépendances nécessaires. Dans cet exemple, nous utiliserons vue-router pour gérer le routage utilisateur et Tween.js pour générer des courbes d'animation. Voici les commandes nécessaires :

npm install vue-router
npm install tween.js

La deuxième étape est la mise en page de base. Nous devons utiliser la syntaxe du modèle de Vue pour écrire la mise en page de base. Voici un exemple :

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

Dans ce modèle, nous pouvons voir un simple lien de navigation et une vue de routage. Cette vue changera lorsque vous cliquerez sur un lien de navigation pour afficher le contenu souhaité.

La troisième étape consiste à ajouter des effets d'animation. Nous devons ajouter une fonction à notre composant qui utilisera la bibliothèque tween.js pour générer un chemin de courbe parabolique et l'appliquer aux éléments de la vue. Voici le code d'implémentation :

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

Dans ce code, nous définissons un attribut de données pour la position initiale, la vitesse et l'accélération de la sphère, puis créons une scène Three.js dans le hook monté. La fonction d'animation bouclera pendant chaque intervalle de rendu du navigateur, créant ou détruisant séquentiellement la sphère et déplaçant sa position. La fonction handleClick recevra un objet MouseEvent comme seul paramètre, qui est utilisé pour créer un objet Tween et le déplacer de la position actuelle de la sphère vers une position fixe, générant ainsi un chemin d'animation parabolique.

La dernière étape consiste à appliquer des effets d'animation. Nous devons ajouter un écouteur d'événement click au modèle pour déclencher la fonction handleClick et démarrer l'animation. Voici le code d'implémentation :

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

Dans ce code, nous avons ajouté un élément div en tant que boule dans le modèle et y avons ajouté un écouteur d'événement de clic. De cette façon, lorsque l'utilisateur clique sur la balle, la fonction handleClick est appelée et l'animation parabolique est lancée.

Grâce aux étapes ci-dessus, nous avons terminé le processus de conception de page consistant à utiliser Vue pour implémenter l'animation parabolique. Dans l'implémentation, nous devons générer des courbes d'animation basées sur la bibliothèque tween.js et ajouter la fonction handleClick pour démarrer l'animation. Dans le modèle, nous devons ajouter un écouteur d'événement click pour la balle et lui associer la fonction handleClick. J'espère que cet article pourra vous inspirer et vous aider à mieux utiliser Vue pour implémenter la conception de pages.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!