Explication détaillée des deux méthodes de pause (transition, animation) en CSS3-tutoriel CSS-php.cn

Explication détaillée des deux méthodes de pause (transition, animation) en CSS3

零下一度

Libérer： 2017-05-18 14:38:41

original

8744 Les gens l'ont consulté

Deux façons de modifier les coordonnées :

1. Modifications traditionnelles des coordonnées supérieures et gauches

2. Transformer en CSS3 L'attribut

réalise l'effet de marche du personnage grâce à la combinaison de l'animation CSS3 et de la transition. D'une manière générale, l'état de mouvement doit être contrôlable, afin que nous puissions faciliter les opérations ultérieures. L'animation est utilisée pour réaliser le changement du mouvement du personnage, c'est-à-dire que la position de la carte des sprites est modifiée, et la transition consiste à réaliser le changement à gauche du personnage, c'est-à-dire que les coordonnées se déplacent vers la droite, le personnage avance , et l'arrière-plan recule.

Comment mettre en pause la transitionla transition, d'une manière générale, l'endroit où vous souhaitez faire une pause est le point cible fixé par le programme au début, donc c'est en fait Il n'est pas nécessaire de le contrôler, et il n'y a aucun moyen de le contrôler. Il s'agit d'un effet de transition
animation Le navigateur fournit uniquement un rappel pour la fin de l'animation. Bien sûr, il peut y avoir une solution de contournement, Faire un processus qui force la valeur de transition cible à changer Comment opérer :

$("button:last").click(function() {
        var left = $boy.css(&#39;left&#39;);
        // 强制做了一个改变目标left的处理
        // 动画是要运行10秒,所以此时动画还是没有结束的
        $boy.css(&#39;left&#39;,left);
        // 增加暂停的样式
        $boy.addClass(&#39;pauseWalk&#39;);
 });

Copier après la connexion

Pour arrêter la transition, laissez-le le forcer à être à la valeur actuelle de gauche.

Vous pouvez voir le bloc de code ci-dessus pour plus de détails. La transition dans la méthode pause est forcée de définir la coordonnée gauche pour obtenir un effet de pause. Cependant, cela pose problème. Le prochain démarrage doit attendre l'animation précédente. .le temps est fini.

Méthode de pause d'animation

Animation CSS3 directement Fournir un style d'état de lecture d'animation pour contrôler le traitement de la pause de l'animation. Ajoutez un style de pause de contrôle. Lors de l'écriture du style d'animation, faites particulièrement attention à la compatibilité des différents navigateurs. Ajoutez le préfixe correspondant

.pauseWalk {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
}

Copier après la connexion

. Il vous suffit d'utiliser l'animation dynamique sur l'élément de personnage d'animation correspondant. L'ajout et la suppression de ce style peuvent contrôler le démarrage et la pause de cet elfe.

[Recommandations associées]

Introduction de l'attribut animation-direction dans CSS3. en détail

Les 8 propriétés de l'animation CSS3 (Animation) qu'il faut maîtriser

Un exemple de tutoriel sur l'utilisation des attributs d'animation. pour implémenter une exécution différée entre les boucles

Partagez un exemple de surveillance d'un événement de fin d'animation CSS3.

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!