Lorsque vous affichez des animations interactives dans les présentations ou les explications en classe, il est souvent difficile de prendre en compte l'interaction et les explications avec les diaporamas.

J'étais inquiet à ce sujet parce que je devais montrer aux étudiants une démonstration de particules, mais je ne voulais pas rester près de l'ordinateur et déplacer la souris.

Si vous n'interagissez pas avec l'IFRAME, vous ne verrez que des blancs. Ce n'est qu'en commen?ant à déplacer la souris ou le doigt que vous pouvez voir l'effet d'animation.

J'ai donc créé la même démo, mais j'ai ajouté du code pour simuler l'interaction utilisateur.

Bruit simple

L'astuce consiste à utiliser un algorithme pour générer des positions aléatoires "lisses". Si une fonction aléatoire normale est utilisée, la pseudo-souris sera complètement aléatoire dans chaque cadre. Ce dont nous avons besoin, c'est que la position de chaque trame est directement liée à la trame précédente. Heureusement, il existe une technique qui peut le faire: un bruit simple (ou plus souvent appelé le bruit Perlin).

Regardons cette image où la hauteur de chaque colonne est définie par la valeur aléatoire en haut et la valeur de l'algorithme de bruit simple ci-dessous.

Vous pouvez rapidement remarquer que le graphique inférieur semble plus fluide car la hauteur de chaque colonne est connectée à la colonne précédente. Ces graphiques ne montrent qu'une seule dimension (axe x, de gauche à droite), mais avec un bruit simple, vous pouvez obtenir des valeurs pour plusieurs dimensions. Dans ce cas, nous avons besoin de deux dimensions pour simuler les coordonnées x et y de la pseudo-souris.

Si vous voulez en savoir plus sur le fonctionnement du bruit simple, regardez la vidéo de Daniel Shiffman "I.5: Perlin Noise - La nature du code".

Obtenir les coordonnées du bruit

Pour faire fonctionner notre présentation, nous devons d'abord implémenter un script qui génère du bruit. Dans ce cas, j'utilise ce script de SEPH.

Une fois le script de bruit chargé, nous pouvons l'utiliser pour déplacer la souris à chaque trame.

J'utiliserai une image de souris comme démo, la définissez en position: fixed; et ajouter le .mouse de classe.Mouse, mais vous pouvez également animer d'autres effets pour votre projet.

Regardons le code:

 // obtient l'image de Dom const el = document.QuerySelector ('. Mouse');

// La fonction de rendu est appelée rendu de fonction (a) {
  // La variable a est le nombre de millisecondes écoulées depuis le démarrage du script // obtient la valeur de bruit basée sur le temps écoulé afin qu'une nouvelle valeur soit obtenue dans chaque trame // cet algorithme de bruit renvoie une valeur entre [-1, 1], nous devons donc le mapper à [0, 1] en ajoutant 1 et en divisant par 2
  const Noisex = (Noise.Simplex2 (0, a * 0,0005) 1) / 2;
  // Nous obtenons une autre valeur de bruit pour l'axe y, mais comme nous ne voulons pas la même valeur que x, nous devons utiliser une autre valeur pour le premier paramètre const Noisey = (Noise.Simplex2 (1, a * 0,0005) 1) / 2;

  // Convertir la valeur de bruit de [0, 1] à la taille de la fenêtre const x = noisex * window.innerwidth;
  const y = Noisey * window.innerHeight;

  // Appliquez les coordonnées x & y à notre élément el.style.transform = `tradlate ($ {x} px, $ {y} px)`;

  // Une fois que le navigateur est prêt, appelez la fonction de rendu, ce qui en fait une boucle infinie de demande de demandesframe (rendu);
}

// demande au navigateur d'appeler le rendu pour démarrer la requête Animation Frame (rendu);

Voici les résultats obtenus en utilisant le script ci-dessus:

Autoriser l'interaction

Avec le code actuel, nous ne pouvons plus interagir avec la démo. Ajoutons plus de code pour utiliser la position de la souris réelle lors de l'interaction avec la démo et passez à la pseudo-souris après l'arrêt de l'interaction.

 const el = document.QuerySelector ('. Mouse');
LET LASTMOVE = 0;

// fonction onMouseMove (e) {
  // obtient les coordonnées x et y x = e.clientx;
  y = e.clienty;

  // Enregistrer le dernier temps de mouvement lastmove = date.now ();
}

// Mette à jour la position de la souris en fonction de la fonction x & y updateMouse (x, y) {
  el.style.transform = `translate ($ {x} px, $ {y} px)`;
}

Fonction Render (a) {
  // Vérifiez si le dernier mouvement dépassait 500 ms avant (date.Now () - Lastmove> 500) {
    // Générez la position pseudo-souris // ...
    UpdateMouse (x, y);
  }
}

// écoutez la fenêtre des événements de souris.AddeventListener (?MouseMove?, OnMoumove);

Maintenant, si vous déplacez la souris, la pseudo-souris suivra votre souris. Si vous arrêtez de bouger pendant plus de 500 millisecondes, la pseudo-souris recommencera à bouger.

Mobile personnalisé

La vitesse de la souris peut être mise à jour en modifiant la valeur du troisième paramètre. Jusqu'à présent, nous avons réglé cette valeur en multipliant le temps écoulé par 0,0005, ce qui est égal à A / 2000.

 // Définissez le rapport de vitesse de la vitesse de const = a * 0,0005;
// Utiliser la vitesse const Noisex = (Noise.Simplex3 (1, 0, vitesse) 1) / 2;

Nous pouvons également augmenter l'aléatoire des changements directionnels en ajoutant plus de bruit de son emplacement.

 Soit Random = 0;
Fonction Render (a) {
  // ...
  // Mette à jour la valeur aléatoire aléatoire = 0,1;
  // Calculer x décalage aléatoire basé sur la largeur de la fenêtre const Randx = Noise.Simplex3 (1, 0, aléatoire) * Window.innerWidth * 0.1;
  // Calculez le décalage al aléatoire y basé sur la hauteur de la fenêtre const Randy = Noise.Simplex3 (3, 0, aléatoire) * window.innerHeight * 0.1;

  // Définir la valeur x & y basée sur (écran * écran *) const x = Noisex * innerwidth randx;
  Const y = Noisey * Innerheight Randy;
  // ...
}

Essayez de modifier la valeur d'entrée et voyez comment la vitesse et les valeurs calculées au hasard affectent le mouvement de la pseudo-souris.

Souris multiple

Puisque nous avons créé une pseudo-souris, pourquoi ne pas créer 500?

J'utilise cette astuce maintenant dans presque toutes les démos. Je pense que c'est cool de pouvoir montrer un projet sans utiliser la vidéo ou être obligé de déplacer la souris au hasard tout en parlant de la présentation.

Si vous avez des questions ou des commentaires, veuillez laisser un commentaire ci-dessous ou me contacter sur Twitter.

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!