Comment obtenir un fondu d'entrée et de sortie continu en javascript

Méthode d'implémentation : 1. Utilisez querySelector() pour obtenir l'objet élément spécifié ; 2. Utilisez l'instruction "element object.style.opacity = Math.sin(2 * Math.PI * time)" pour contrôler le fondu entrant. ou effet de fondu ; 3. Utilisez la récursivité pour faire un fondu entrant et sortant.

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Javascript implémente des fondus entrants et sortants continus

Il vous suffit de trouver une fonction périodique avec une portée de [0,1]. Utilisez la valeur de la fonction périodique comme valeur d'attribut d'opacité pour contrôler l'effet de fondu entrant ou sortant.

Utilisez la récursivité pour continuer à apparaître et à disparaître.

Code d'implémentation :

<h1 id="text">床前明月光，疑是地上霜。</h1>
<script type="text/javascript">
var duration = 3000;
var startTime = new Date();
var p = 0;
requestAnimationFrame(function f(){
  //获取到元素
  var el = document.querySelector("#text");

  var time = ( new Date - startTime ) / duration;
  el.style.opacity = Math.sin(2 * Math.PI * time);
  requestAnimationFrame(f);
});

Rendu :

[Apprentissage recommandé : Tutoriel avancé javascript]

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!