Optimisation des performances des animations CSS

1. Utilisez css, jquery, canvas pour créer des animations

1. Canvas

Avantages : bonnes performances, puissant, prend en charge la plupart des navigateurs (sauf IE6, IE7, IE8), les graphiques dessinés peuvent être directement enregistrés sous forme de graphiques .png ou .jpg

Inconvénients : s'appuyant sur HTML, les graphiques ne peuvent être dessinés que via des scripts et il n'y a pas d'API pour implémenter l'animation ; (en fonction des événements et des mises à jour du minuteur) ; étant donné que le texte affiché par programme sur le canevas est en fait un bitmap, les robots de recherche ignoreront entièrement le texte. Le contenu du texte n'est pas non plus reconnu par les lecteurs d'écran.

2, css3

Avantages : simple et séparée du contenu, l'animation css ne déclenche pas de layout et de paint (la modification de ces propriétés ne déclenchera pas de layout et de paint : backface-visibilité, opacité, perspective , perspective-origin, transform);

Inconvénients : il existe des problèmes de compatibilité avec les navigateurs, les téléphones Android peuvent rencontrer des retards et sont limités par le moteur de composition, qui est étroitement lié à la structure DOM de la page entière.

3. JQuery

Avantages : aucun problème de compatibilité

Inconvénients : repeindre et recomposer sont nécessaires pour chaque image (très chronophage) ;

Résumé : En termes d'effets d'animation mobile, l'utilisation de l'animation CSS3 est bien plus efficace que l'animation jquery. Les performances sont particulièrement évidentes sur les téléphones Android ! Par conséquent, les animations mobiles donnent la priorité aux animations CSS3, et jquery ne peut être utilisé que pour gérer simplement la logique de l'application. L'animation CSS3 est une solution générale pour ajouter des effets spéciaux à la mise en page du contenu, mais sur les navigateurs mobiles aux performances médiocres, elle est susceptible d'être limitée par les performances de mise en page et ne peut pas obtenir l'effet souhaité. Pour les scénarios spécifiques qui nécessitent des performances, tels que les jeux, le canevas sera grandement amélioré.

(Tutoriel recommandé : Tutoriel d'introduction CSS)

2. CSS3 se bloque sur le terminal mobile

L'animation produite par CSS3 fonctionne sur iOS 66, mais des décalages se produisent parfois sur Android. Vous pourriez aussi bien rechercher des problèmes à partir des points suivants.

a. Que cela provoque une mise en page

Si tel est le cas, rendez les éléments animés absolus ou fixes autant que possible pour éviter d'affecter l'arborescence du document afin de réduire la redistribution.

b. Qu'elle soit activée Accélération matérielle

"L'animation CSS3 est utilisée" et "l'accélération matérielle est activée" sont deux choses différentes, bien que la première puisse provoquer la seconde.
Il existe une panacée magique pour activer l'accélération matérielle dans webkit : opacity : 1 ou -webkit-backface-visibility : Hidden ;.

c. Qu'il ait des attributs coûteux (ombre CSS, dégradés, attachement d'arrière-plan : corrigé, etc.)

Si tel est le cas, les images sont également une option. Cela peut être considéré comme une optimisation qui échange de l’espace contre du temps.

d. Repeindre la zone

Si c'est le cas, vous devez réduire la zone d'animation. L'optimisation de cette étape est limitée ;

e. Essayez d'utiliser la transformation pour générer une animation et évitez d'utiliser la hauteur, la largeur, la marge, le remplissage, etc. ;

PS : grâce à la transformation, le navigateur n'a besoin de générer qu'une seule fois le bitmap de cet élément et de le soumettre au GPU pour traitement au démarrage de l'animation. Après cela, le navigateur n'a plus besoin d'effectuer de mise en page, de dessin ni de soumission d'opérations bitmap. En conséquence, le navigateur peut tirer pleinement parti des capacités du GPU pour dessiner rapidement des bitmaps dans différentes positions, effectuer une rotation ou une mise à l'échelle. En bref, l'animation de transformation est contrôlée par le GPU, prend en charge l'accélération matérielle et ne nécessite pas de rendu logiciel

3 Il y a un scintillement pendant le processus d'animation (se produit généralement au début de l'animation)

Solution :

.cube {
 
   -webkit-backface-visibility: hidden;
 
   -moz-backface-visibility: hidden;
 
   -ms-backface-visibility: hidden;
 
   backface-visibility: hidden;
 
   -webkit-perspective: 1000;
 
   -moz-perspective: 1000;
 
   -ms-perspective: 1000;
 
   perspective: 1000;
 
   /* Other transform properties here */
 
}

Dans les navigateurs basés sur des kits Web, une autre méthode efficace est :

.cube {
 
   -webkit-transform: translate3d(0, 0, 0);
 
   -moz-transform: translate3d(0, 0, 0);
 
   -ms-transform: translate3d(0, 0, 0);
 
   transform: translate3d(0, 0, 0);
 
  /* Other transform properties here */
 
}

Tutoriels vidéo associés recommandés : Tutoriel vidéo CSS

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!