Au cours de la dernière semaine, j'ai aidé un ami à expérimenter avec SVG à base de feuilles sprite dans le navigateur. Nous avons voulu venir avec un flux de travail idéal pour préparer, publier et exécuter de haute qualité des graphiques animés dans le navigateur. Donc, idéalement avoir une seule source de données d'animation qui pourrait fonctionner pour les petits écrans de smartphone, les tablettes, les écrans de la rétine, et les navigateurs de bureau.
En théorie, (vectoriel) SVG doit être idéal pour cela, mais depuis SVG n'est généralement pas utilisé beaucoup - nous avons décidé de le tester. L'idée était de ne pas utiliser SVG, SMIL (donc pas de SVG d'animation), mais au lieu de créer une animation de sprite-feuille (comme vous le feriez normalement avec des données raster PNG/JPG) mais le faire avec de la pure vecteurs c'est à dire le format SVG. Sa a été un peu plus grand, mais si ça fonctionne, ce serait encore avec quelque chose des thats encore plus optimisé.
Plus image-par-image de vecteur d'animation pourrait faire de grandes choses pour notre méthode de travail - il nous permettant d'utiliser le Flash de l'éditeur pour faire des animations et de les exporter au format SVG feuilles sprite.
De toute façon, le résultat fonctionne étonnamment bien , mais échoue également dans certains secteurs (veuillez noter que, pour des fins de test, nous avons seulement travaillé avec Webkit, c'est à dire les navigateurs Safari, Chrome, Safari mobile sur iOS et Android ICS).
En CSS, il est assez facile de déclencher une accélération matérielle pour une feuille sprite comme ça (au moins dans les navigateurs modernes avec des images clés et des étapes) - il vous suffit de faire ceci:
background-image: url(my.svg);
-webkit-animation: walk 1s steps(12, end) infinite;
d'appel d'animation par image clé montré ici:
@-webkit-keyframes walk {
from { -webkit-transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(-100%, 0, 0); }
}
d'où l'utilisation de translate3d devrait laisser GPU coup de pied dans et le tout doit être accéléré par le matériel dans iOS mobile Safari et Android ICS navigateur.
Ce qui est assez étonnant compte tenu que c'est une sorte de brute-force technique et un assez grand vecteur d'animation (600x600px pour le test) - le tout de mouches. Mais ce n'est pas parfait - il scintille dans Safari avant de décoller. Et dans l'ICS navigateur son scintillement tout le temps donc ce n'est pas vraiment utilisable.
Nous avons donc essayé l'habitude des trucs pour se débarrasser de scintillement, tels que:
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
Mais cela ne fonctionne pas. Nous avons donc essayé de pixellisation SVG dynamiquement en mémoire et en l'utilisant comme une texture avec -webkit-transform: scale3d(1, 1, 0) mais cela n'a pas aidé à l'éther.
Enfin, nous avons juste remplacé le SVG avec un rendu PNG/JPG feuille sprite de la même taille de la pensée, le complexe vecteurs sont tout simplement trop beaucoup pour le navigateur, mais devinez quoi? C'est la même question, de sorte que son pas de rendu SVG à tous - ses un navigateur dessin en question. Une preuve de plus de qui est, si nous ralentir l'animation en bas à 1IPS - clignotement persiste encore.
L'image est trop grosse pour le GPU? Avons-nous atteint la limite de performance de ce que vous êtes en mesure de facilement dessiner/animer dans le navigateur (mobile en particulier)?
Je voudrais vraiment l'apprécier idées/hacks sur la façon de potentiellement se débarrasser de la lueur (surtout depuis son vraiment très rapide). C'est juste une technique prometteuse - haute performance navigateur animation qui s'adapte aux différentes tailles d'écran - l'HTML5 Saint Graal ;)
Avec quelques optimisations telles que
<svg preserveAspectRatio="xMinYMax slice" viewBox="0 0 600 50">
et un peu de CSS de la magie, nous sommes en mesure de SVG s'adapter à son conteneur parfaitement et modifier sa taille à partir d'une seule classe CSS. Il serait vraiment faire des merveilles - mais, hélas, le scintillement.
De toute façon - s'il vous plaît lire plus à ce sujet ici où vous êtes également en mesure de l'essayer.
