jQuery pour les Animations GIF

Je suis à la recherche d'utiliser jQuery pour éliminer le besoin de l'aide d'un GIF pour créer un assez simple animation.

Ce que je veux, c'est une image à quatre stades.
1) Rien à montrer
2) La première partie de l'image
3) la Deuxième partie de l'image
4) Troisième partie de l'image
- Recommencer

Je pensais que j'avais besoin de créer l'image étapes, puis utiliser un " remplacer l'image actuelle à la prochaine technique avec jQuery pour créer l'animation. Qui pourrait être assez facile avec des rappels.

La partie suivante est d'avoir cette animation apparaissent à plusieurs endroits après l'animation précédente avait fini de charger. Une fois de plus, pourrait être facile avec les callbacks.

J'étais au bout de quelques réflexions sur ce sujet. Est-il stupide de ne pas simplement utiliser GIF? Ou cela pourrait-il être fait avec jQuery?

OriginalL'auteur Kane | 2009-10-27

C'est beaucoup plus facile et maintient la chaîne de capacité:

JQuery:

$(document).ready(function(){
    //rotator - delay, children
    $('#slideshow').rotator(50, 'img');
});

Balisage:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="scripts/jquery.rotator.js"></script>

<style type="text/css">
#slideshow {
    position:absolute; //or whatever you need
    display:block;
    top:0px;
    left:0px;
}
#slideshow img {
    position:absolute;
    opacity:0;
}
</style>

<!-- SLIDESHOW -->
<div id="slideshow">
  <img src="images/1.png">
  <img src="images/2.png">
  <img src="images/3.png">
</div>

Plugin:

(function( $ ){
    $.fn.rotator = function(delay, child){
        //set curImage val
        var currImg = 0;
        var currIt = true;
        //set array of images
        var ss = $('#slideshow').children(child);
        var ssize = ss.size();
        setInterval(function() {
            if(currIt){
                $(ss[currImg]).css('opacity','1');
                currIt = !currIt;
            }else if (!currIt){
                $(ss[currImg]).css('opacity','0');
                $(ss[currImg+1]).css('opacity','1');
                currIt = !currIt;
                currImg++;
            }
            //reset
            if(currImg >= ssize){
                currImg = 0;
                $(ss[currImg]).css('opacity','1');
            }
        }, delay);
        return this;
    };
})(jQuery);

C'est une excellente solution, je suis en train de travailler sur un smilar projet et utilisé ce code, mais a couru dans un problème. J'ai exporté un 9 deuxième animation par image de la séquence et de la nécessité de cycle par le biais de 300 images. Cela fonctionne très bien, cependant le diaporama gal. Est-il possible de précharger les images de sorte que le diaporama commencera une fois que les images de la précharge?

OriginalL'auteur worked

1

Vérifier cette page pour une démo de l'arrière-plan de l'animation avec jquery et cette pour son tutoriel.

Sinan.

OriginalL'auteur Sinan
0

D'abord, vous pouvez utiliser l'arrière-plan de plusieurs div mettre la partie de l'image vous avez besoin

css_background-position

Ensuite, vous avez à montrer la div que vous avez besoin pour être affichées en fonction du type d'animation que vous avez besoin.

OriginalL'auteur andres descalzo
0

Si ça va être constante et non pas basé sur l'événement, je vous recommande d'utiliser des gif.

Si, toutefois, l'animation est en réponse à quelque chose qui se passe sur la page, ou si vous voulez seulement de démarrer une fois que tout est chargé, jquery est probablement la voie à suivre.

Vous devez juste être capable de changer la source de l'image (ou la position de décalage si vous êtes à l'aide d'une seule image) pour modifier l'image. Jetez un oeil à certains "pause" options en jQuery pour retarder des changements entre images.

Non testé exemple (dérivé de Simon de réponse dans le lien ci-dessus):
```
function chg1() { $('#myimage').attr('src', ''); }
function chg2() { $('#myimage').attr('src', 'image1src.jpg'); }
function chg3() { $('#myimage').attr('src', 'image2src.jpg'); }
function chg4() { $('#myimage').attr('src', 'image3src.jpg'); }

function StartAnimation() {
    setTimeout(chg1, 2000);  //blank after 2 seconds
    setTimeout(chg2, 4000);  //img 1 after 4 seconds
    setTimeout(chg3, 6000);  //img 2 after 6 seconds
    setTimeout(chg4, 8000);  //img 3 after 8 seconds
    setTimeout(StartAnimation, 8000);  //start again after 8 seconds
}

StartAnimation();  //start it off
```
regarde comme les appels à animate vont pile assez fine, mais les changements à la src, car ils ne se produisent pas comme un rappel pour vos animations, sont tous d'aller à feu instantanément l'un après l'autre?
vous avez tout à fait raison, animer ne bloque pas. Je vais modifier le code.
Oui, @Funka est droit. jQuery est asynchrone, donc vous aurez besoin d'utiliser des rappels à atteindre cette place.
Funka - j'ai mis à jour le script. Vous étiez tous les deux à droite, que l'appel est asynchrone. Je l'ai fait d'une manière différente maintenant.
Je voudrais aussi utiliser une boucle pour passer les images... juste définir les sources de l'image comme un tableau, puis itenerate à travers le tableau, à l'aide de jquery $attribut de données sur l'image, la définition de la clé du tableau ($el.données méthode accepte ints et d'autres types de données, et pas seulement des chaînes de caractères). Un exemple de ce comportement peut être vu sur lookoutforsmartgrowth.org/'s page d'accueil curseur sur l'image.

OriginalL'auteur Damovisa
0

Utiliser des GIFs animés - c'est ce qu'ils sont fait pour. Je suis sûr que c'est possible de pirater une solution à l'aide de JQuery, mais vous auriez à payer un coût en temps de développement et de complexité.

En outre, vous devez reconnaître qu'en allant avec une ambiance JQuery/CSS solution, vous faites une décision d'associer étroitement l'animation de la page que sa sur. Si quelqu'un veut inclure l'animation sur une autre page? Ils ont copier sur un tas de code au lieu d'un seul fichier GIF. Si quelqu'un veut l'inclure dans un courriel ou un Power-point de présentation? Ne peut pas être fait...

Gifs sont MOCHES et ils sont passé, pas de alphamap, avec de solides mat sur des arrière-plans transparents. avec bg positionnement de sprites css, vous pouvez faire beaucoup plus que ce que vous pouvez réaliser avec des gifs.
Si le fait d'avoir un fond transparent sur le dessus d'un non-solide arrière-plan est une considération importante dans ce cas, alors oui, allez-y avec le plus puissant JQuery sprite solution. Mais la chose à reconnaître, c'est que, ce faisant, vous payez un impôt supplémentaire de complexité. Pensez à l'entretien pauvre programmeur qui doit aller dans le code pour modifier le graphique dans une couple d'années. Est-il juste de supposer qu'ils ont une forte connaissance de JQuery et css sprites? Ils pourraient connaître ce genre de choses, mais je pense qu'il serait beaucoup plus agréable pour les laisser tomber juste dans un nouveau GIF et être fait avec elle.
yep t'as raison c'est plus de ressources que les gif, mais nous nous dirigeons vers 2010, ils devraient plutôt apprendre 🙂

OriginalL'auteur Spike Williams
0

Serait-il possible de combiner vos quatre images dans un sprite (1 réel graphique avec tous les quatre images & non-cumul)? À partir d'un point de vue des performances, le navigateur du client est de n'avoir à télécharger une seule image au lieu de faire 4 demandes pour chacun de vos quatre images.

La création de l'animation devrait être aussi simple que l'utilisation de la technique proposée ci-dessus par Damovisa, le faire seulement à l'aide de certains élément de bloc, la définition de cette seule image comme arrière-plan et la définition de la taille de l'élément à la taille d'une "tuile" de l'image unique, et de changer le background-position d'une propriété css. Je ne suis pas complètement sûr à ce sujet (merci de me corriger si je me trompe), mais il semble comme une opération moins cher de déplacer une image d'arrière-plan autour plutôt que de réellement échanger des quatre images différentes.

Aussi loin que la portabilité et la réutilisabilité, vous pouvez simplement créer un plugin jQuery pour être en mesure de l'utiliser à plusieurs endroits.

OriginalL'auteur jtrim

Vous devez vous connecter pour publier un commentaire.