1. Accueil
  2. Question et réponse
  3. Sprite plusieurs fichiers gif avec l'information css

Sprite plusieurs fichiers gif avec l'information css

2016-05-14 2 views
0

J'ai donc un site avec beaucoup de fichiers gif (smileys pour être précis). Pour optimiser les performances de la charge, j'ai décidé de réduire le nombre de requêtes à un, en chargeant tous les gifs en un seul fichier.Sprite plusieurs fichiers gif avec l'information css

La meilleure option que j'ai trouvée est de créer un seul fichier de sprites. Il y a aussi un programme ImageMagic qui aide beaucoup et a wiki génial. Après bricoler quelques heures, voici ce que j'ai trouvé:

  1. J'ai besoin de garder l'animation, pas seulement d'avoir l'image statique comme résultat de sprite, de sorte que chaque gif sera stocké sous forme de plusieurs images, puis animé avec play et keyframes comme here
  2. Je peux facilement générer un fichier de sprites en utilisant montage *.gif sprites.png
  3. J'ai également besoin d'informations sur les coordonnées de début et de fin des images. Puisque mes fichiers gif ont chacun une hauteur et une largeur différentes, je serais victime de mort jusqu'à ce que j'aie fini d'entrer les dimensions manuellement. La meilleure option que j'ai trouvée est de générer un fichier html en utilisant ImageMagick avec les mêmes paramètres que png. Le fichier html contient une zone avec les coordonnées de début et de fin de chaque fichier gif que je peux utiliser pour créer des CSS. Un exemple: <area href="./base/0000.gif" shape="rect" coords="0,0,89,39" alt="" />
  4. paramètres de tile x1 ImageMagick montage crée une énorme image large (par exemple 200 gifs avec 20 chaque x 40px partials chaque = ~ 160000px x 40px) qui fait planter le navigateur. J'ai donc besoin de faire plusieurs lignes et colonnes ce qui complique mon calcul de CSS.
  5. Même en connaissant la position de début et de fin, j'ai encore besoin de faire un calcul manuel. De coordonnées je peux compter steps css pour animation (X2-X1/[gif.width] si les coordonnées Y sont dans une seule ligne), mais je ne sais toujours pas sa vitesse. De plus, si les partiels sur une image de sprite se trouvent sur des lignes différentes, cela complique la création d'une animation keyframes play que j'ai encore besoin de créer manuellement (ou en scriptant pour une quantité énorme de fichiers gif). Par exemple: enter image description here + enter image description here + enter image description here + montage ./*.gif -geometry +0+0 -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 out.png = enter image description here. Comme vous pouvez le voir, le premier smiley est placé sur 4 lignes. J'ai besoin d'une sorte de paramètre tile d'ImageMagick pour avoir un gif différent pour chaque ligne. Mes Gifs sont optimized pour utiliser le mode "combiner". Ce qui signifie que leurs partiels pourraient être de taille différente et manquer de parties de l'image complète. Par exemple: enter image description here se désassemble en tant que enter image description here.
  6. Pour résoudre l'étape 5, je peux convertir des gifs en ceux avec des calques au moyen de l'outil de conversion ImageStick. Voici un autre problème: convert -layers dispose input.gif output.gif produit des bogues. Par exemple enter image description here fichier résultant ne dispose pas des cadres: enter image description here La ligne ci-dessous est la version sprites de résultat enter image description here

Résumer mes Problèmes:

  • est-il un moyen plus facile de créer un fichier sprites de plusieurs gifs? Résoudre tous ces problèmes me donne mal à la tête. Il doit y avoir un outil magique qui prend soin de tout cela à la fois. Par exemple spritegen.website-performance, mais il ne crée que des images statiques et pas d'animations.
  • Comment disposer des couches d'un gif ne comportant pas les bogues décrits à l'étape 7 (See also)?
  • Comment générer un seul fichier de sprites en utilisant ImageMagick ou tout autre outil et avoir seulement 1 gif par ligne (ou par colonne) comme décrit à l'étape 5.
  • Existe-t-il un moyen de combiner plusieurs gifs dans un seul gif anime et positionne aussi l'image sur son fond comme les sprites?

Toute forme d'aide est appréciée. Même un lien vers un article ou un site qui permet de créer un fichier sprites + css avec animation serait super. Merci pour l'aide à l'avance!

Meilleures salutations,

Source

2016-05-14 deathangel908

Répondre

0

Grâce à ImageMagick forum j'ai finalement trouvé la réponse.

enter image description here + enter image description here + enter image description here +

convert -background none \ 
    \(smilie_yellow.gif -coalesce +append \) \ 
    \(smilie_green.gif -coalesce +append \) \ 
    \(smilie_red.gif -coalesce +append \) \ 
    -append -flatten 3_smilies.png

= enter image description here

Source

2016-05-18 11:51:42 deathangel908

 Questions connexes

  • Aucun problème connexe^_^