Comment créer un effet de rotation de cercle avec jquery

Dans la conception Web, les effets d'animation sont un élément très important, qui peuvent augmenter le plaisir et l'interactivité de la page. La rotation du cercle est l'un des effets d'animation classiques. Ce qui suit explique comment utiliser JQuery pour créer un effet d'animation de rotation de cercle.

1. Mise en page HTML

Tout d'abord, vous devez définir un élément conteneur dans le fichier HTML pour envelopper les éléments d'animation. Ajoutez un élément div à l'intérieur de l'élément conteneur en tant qu'élément animé.

<div class="container">
  <div class="circle"></div>
</div>

2. Création de styles CSS

Ensuite, vous devez ajouter des styles CSS aux éléments de conteneur et aux éléments d'animation. Pour l'élément conteneur, définissez sa largeur et sa hauteur à 100 % afin qu'il remplisse toute la page. Pour les éléments animés, définissez leur largeur et leur hauteur de manière égale pour leur donner un effet circulaire. En même temps, définissez sa position initiale et sa couleur.

.container{
  width: 100%;
  height: 100%;
}

.circle{
  width: 200px;
  height: 200px;
  background-color: #F44336;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
}

3. JQuery pour obtenir des effets d'animation

Une fois les paramètres HTML et CSS ci-dessus terminés, vous devez utiliser JQuery pour obtenir des effets d'animation. JQuery fournit une méthode animate(), qui peut réaliser l'effet d'animation des éléments. L'implémentation spécifique est la suivante :

$(document).ready(function(){
  animateCircle();
});

function animateCircle(){
  $('.circle').animate({deg: 360}, {
    duration: 2000,
    step: function(now){
      $(this).css({
        transform: 'rotate(' + now + 'deg)'
      });
    },
    complete: animateCircle
  });
}

Comme indiqué ci-dessus, définissez une fonction animateCircle() pour exécuter l'animation de rotation du cercle en boucle. Utilisez la méthode animate() pour définir les effets d'animation. Parmi eux, le premier paramètre deg est utilisé pour représenter l'angle de rotation du cercle, et la valeur initiale est 0. la durée représente la durée de l'animation, qui est de 2 000 millisecondes dans cet exemple. step fait référence à la fonction de rappel pendant l'animation. Elle sera appelée après la fin de chaque image de l'animation, calculera le nouvel angle en fonction de la valeur deg actuelle et fera pivoter l'élément vers le nouvel angle via la méthode css(). Enfin, complete représente la fonction de rappel une fois l'animation terminée, qui est utilisée pour continuer à exécuter l'animation de rotation du cercle en boucle.

4. Affichage de l'effet

Enfin, ouvrez le fichier HTML dans le navigateur et vous pourrez voir l'effet d'animation d'un cercle en rotation.

Voici les étapes à suivre pour utiliser JQuery pour créer un effet d'animation de rotation de cercle. Grâce à l'utilisation combinée de HTML, CSS et JQuery, des effets d'animation plus complexes peuvent être obtenus, ajoutant plus de plaisir aux pages Web.

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!