Comment puis-je animer si une séquence PNG à l'aide de jQuery (que ce soit par défilement ou déclenché l'animation)

De plus en plus et je vois bien un effet png sont chargés dans une série de DIVs (ou un div) et puis séquencé mais image par image, soit basées sur le bouton cliquez sur ou basées sur de défilement. J'ai essayé de regardé le code, et je comprends que javascript est en train de faire le gros du travail, mais je suis encore un peu perdu, existe-il des tutoriels sur cette technique? des exemples?

exemple d'animation (plusieurs div)
http://atanaiplus.cz/index_en.html:

exemple d'animation (un div):
http://www.hyundai-veloster.eu/

exemple de défilement de l'animation:
http://discover.store.sony.com/tablet/#design/ergonomics

OriginalL'auteur user379468 | 2012-03-12

  1. 9

    vous voulez juste pour échanger de l'attribut src à l'aide d'un setInterval minuterie

    var myAnim = setInterval(function(){
  $(".myImageHolder").attr('src', nextImage);
}, 42);

    L'astuce est de savoir comment vous générer nextImage. Cela dépend en grande partie sur les conventions de nommage de vos images, ou la direction dans laquelle vous souhaitez que l'animation à exécuter dans

    Mise à jour

    Ou utiliser un plugin

    oui, la chose à propos de la follette, c'est que l'image de la séquence est en fait une grande image, qui est déplacé autour pour créer une animation. Je ne pense vraiment pas à travailler pour une plus grande et plus complexe de la séquence d'images.
    Oui, la taille du fichier serait ÉNORME.
    eh bien, probablement le plus petit de façon cumulative de toutes les images

    OriginalL'auteur Mild Fuzz

  2. 1

    Peut-être à la place de la commutation entre les différentes images, utilisez la spriting technique décrite dans cette question: Comment afficher des images animées à partir d'image au format PNG à l'aide de javascript? [ comme gmail ]

    Je n'ai pas eu le rep de commentaires sur d'autres réponses encore, mais en réponse au problème de taille des fichiers: Si vous devez charger toutes les images de toute façon, vous êtes déjà engagés pour l'envoi de données en regroupant les images dans un sprite vous sauver au moins sur HTTP généraux. Vous obtenez également l'avantage d'être en mesure de démarrer l'animation dès que l'image se charge, de ne pas avoir à vérifier toutes les images séparément.
    C'est peut-être vrai, mais je pense qu'il y a d'autres raison pour laquelle il n'est pas optimale. Se déplaçant autour d'une image qui est de 10 000 par 10 000, c'est beaucoup plus cher pour le rendu que pour activer / désactiver la visibilité ou d'échanger le nom d'une image dans la div ...
    Vous devez peser de taille de fichier et le nombre de requêtes HTTP. Si vos images n'ont pas à être entièrement transaprent, vous pourriez sprite dans une grande JPEG....mais si ils ont besoin pour être en PNG-24, qui serait assez foutu énorme pour les combiner ensemble. Les requêtes HTTP peut-être plus la peine.

    OriginalL'auteur Zugbo