Résumé de l'utilisation des compétences d'animation javascript et css3 ensemble

Résumé de l'utilisation des compétences d'animation javascript et css3 ensemble_javascript

WBOY

Libérer： 2016-05-16 16:10:31

original

1174 Les gens l'ont consulté

Alors que Html5 et CSS3 sont progressivement devenus courants, je suis encore très habitué à utiliser js pour réaliser des animations simples. Parce que sur les navigateurs de bureau, tous ne prennent pas en charge CSS3. Les utilisateurs sont également très étranges. Tous les utilisateurs ne peuvent pas développer des habitudes d'utilisation. Il y a toujours beaucoup de gens qui pensent que win7.win8 n'est pas aussi utile que XP. Mais l’aspect téléphone mobile est très différent. La prise en charge du navigateur mobile pour HTML5 et CSS3 est toujours très bonne. Cependant, les capacités de traitement du matériel de téléphonie mobile sont très limitées. Aujourd'hui, alors que les téléphones mobiles quadricœurs et huit cœurs sont monnaie courante, il y a encore des gens comme moi qui utilisent des téléphones mobiles double cœur ou monocœur. Bien que js soit bon, je n'y suis pas beaucoup exposé, donc je ne peux pas bien ajuster le ressenti. Une simple diapositive de page fonctionne très bien sur un PC i7, mais sur mon téléphone dual-core, elle se fige, se fige, se fige et se fige. Très déprimant. Pour cette raison, je le cherche depuis longtemps et je lis beaucoup. Finalement, il n'y a pas si longtemps, j'ai trouvé une méthode relativement simple : utiliser du CSS3 pour réaliser une animation.

Dans le passé, en plus des fonctions d'animation et d'autres fonctions d'animation de Jquery, davantage de personnes utilisaient setTimeout et setInterval pour modifier cycliquement la marge, la largeur, le haut et d'autres attributs d'un élément. C'est précisément à cause de cela que je suis confus.

Tout d'abord, setTimeout et setInterval ne sont pas exécutés en continu si vous les définissez sur 0 ms. J'ai accidentellement découvert ce secret lors du débogage dans iscroll. Il s'avère que le calcul du délai de minuterie repose sur l'horloge intégrée du navigateur et que la précision de l'horloge dépend de la fréquence des mises à jour de l'horloge. L'intervalle de mise à jour pour IE8 et les versions précédentes d'IE est de 15,6 millisecondes. C'est fini, je veux qu'il effectue un déplacement de 1px en 10 ms, mais il n'y parvient pas à temps.

Et qu'est-il arrivé à la carte ? Coincé car le code n'est pas bien écrit. Après tout, js est monothread. Une fois les actions fastidieuses effectuées, l'interface utilisateur peut ne pas répondre. Bien que nous utilisions setTimeout, c'est précisément à cause de setTimeout que l'interface semble instable mais pas fluide. Parce qu'après l'exécution de setTimeout cette fois, une autre action fastidieuse est susceptible de se produire dans l'intervalle précédant la prochaine exécution, alors l'exécution de setTimeout sera retardée indéfiniment. Et alors ? Carte! Cependant, la raison suivante de la carte est de déclencher accidentellement la mise en page du navigateur (c'est-à-dire : le relais) lors de la modification de l'attribut d'origine. On dit que ce problème prend du temps, mais il peut être ignoré dans de nombreux cas. Mais bien souvent, cela ne peut être ignoré.

En plus des deux paragraphes ci-dessus, il y a un autre problème, c'est-à-dire que sur de nombreux téléphones mobiles, on a toujours l'impression qu'une image après l'autre, et une image peut être plus longue et l'autre plus courte. C'est vraiment un rythme qui peut rendre les gens paralysés. Pourquoi cela se produit-il ? Cela a toujours quelque chose à voir avec le délai de settimeout. Images perdues. Ce problème concerne la fréquence de rafraîchissement du moniteur. C'est tout simplement trop compliqué.

Au final, j'ai choisi CSS3, js modifie dynamiquement les attributs des éléments et utilise la transition pour contrôler le temps d'exécution de l'animation. Par exemple :

Copier le code Le code est le suivant :

js :

Copier le code Le code est le suivant :

$("#test").width(200);

De cette façon, la largeur de ce div deviendra 200px après 1 seconde. Ce n’est pas comme si Sun Wukong s’était transformé en pêche et avait soudainement grossi, il avançait lentement sans rester coincé. Et il y a un avantage à utiliser l'animation CSS, elle n'est pas affectée par les js fastidieux. Bien que le thread d'interface utilisateur et le thread js du navigateur s'excluent mutuellement, cela ne s'applique pas à l'animation CSS, et de nombreux navigateurs peuvent également activer l'accélération matérielle (comme Chrome). Bien que le relayage du navigateur ne soit généralement pas très évident, vous devriez essayer d'éviter le relayage à grande échelle. Ajoutez donc -webkit-transform:transformZ(0); ou -webkit-transform:transform3d(0,0,0); à l'élément animé afin que le navigateur restitue cette couche indépendamment. Même si un réaménagement est inévitable, la zone sera ainsi plus petite. Utiliser la traduction au lieu de la marge est en effet une décision très judicieuse.

Enfin, voici quelques propriétés couramment utilisées qui déclencheront le relais lorsque des changements se produisent :

Copier le code Le code est le suivant :

largeur 

hauteur 

​Rembourrage 

marge 

affichage 

​largeur de la bordure 

frontière 

​hauteur min

Ce qui précède correspond à tout le contenu décrit dans cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage du javascript et du CSS3. En même temps, veuillez ajouter toute lacune. Merci de votre compréhension.