javascript animation lisse de X,Y, X1,Y1

Faire de l'animation en douceur sur les systèmes avec une variété de différentes capacités (de la CPU, de la puissance graphique, d'autres choses qui se passent sur l'ordinateur) n'est pas une tâche triviale. Une bonne mise en œuvre implique la mise en place d'une "interpolation" algorithme qui peut comprendre de manière adaptative (comme l'animation s'exécute) ce qui s'incrémente à utiliser dans l'animation afin de rester sur le calendrier et il doit être aussi lisse que possible.

La meilleure façon de le faire est de se tenir sur les épaules des autres et d'utiliser ce qui a été inventé avant. En cette journée et l'âge, je n'aurais jamais essayé d'écrire moi-même à partir de zéro. Il est là pour utilisation en CSS3 transitions/animations, mais ceux-là ne sont pas encore pris en charge partout. Il est là pour les utiliser ou de les analyser en jQuery et YUI3. Mon premier choix serait d'utiliser l'un des cadres qui possède un riche ensemble de fonctionnalités ici. Vous n'avez pas à utiliser le cadre pour quoi que ce soit d'autre, vous pouvez simplement utiliser pour l'animation si vous le souhaitez. YUI3 vous permettra même de construire une bibliothèque qui a le moins de code possible pour tout ce que vous voulez. jQuery n'est pas très grand pour commencer.

Si vous êtes toujours farouchement opposés à l'aide de l'une des bibliothèques, puis de télécharger la source pour les modules pertinents pour chaque bibliothèque et d'étudier comment ils le font. Construire un exemple d'application dans chaque étape et de par la façon dont il fonctionne, définition de points d'arrêt à des endroits intéressants. Qui sera le meilleur professeur et vous montrer comment construire un efficace de l'interpolation de l'algorithme qui peut s'adapter à la vitesse des capacités de l'ordinateur hôte.

Pour vous donner une idée de la façon dont une interpolation algorithme fonctionne pour un droit d'animation (linéaire, assouplissement), vous faites un calcul initial de ce que vous voulez que votre animation étape de la valeur pour le temps que vous voulez de l'animation pour l'exécuter. C'est probablement juste une supposition quant à ce que le système peut prendre en charge. Vous divisez le nombre d'étapes qui crée dans le temps de l'animation s'exécute et vous réglez une minuterie pour que la quantité de temps de sorte que vous savez quand exécuter l'étape suivante. Vous pouvez ensuite exécuter une ou deux étapes de l'animation et vous voyez combien de temps s'est effectivement écoulé. Si l'ordinateur ne peut pas suivre avec votre valeur d'une étape, vous allez être en retard, et vous devrez vous adapter et de choisir une plus grande étape.

Maintenant, si vous voulez faire quelque chose d'autre que linéaire d'assouplissement, il y a évidemment encore plus impliqués.

Firefox et Chrome ont également mis en place quelques nouvelles experiemental Api pour les aider avec une animation fluide. J'ai découvert moi-même lorsque l'on regarde le jQuery, source de car il utilise lorsqu'il est disponible. Dans google Chrome, il est appelé webkitRequestAnimationFrame et vous pouvez lire à ce sujet ici, dans un Firefox post de blog.

Si j'allais écrire à partir de zéro, je voudrais commencer avec quelque chose comme ceci:

function linearEase(start, end, percent) {
    return start + ((end - start) * percent);
}

function animateTo(settings) {
    var elem = settings.element;
    var ease = settings.ease;

    var start = { left: elem.offsetLeft, top: elem.offsetTop };

    var lastTime = new Date().getTime();
    var timeLeft = settings.totalTime;

    function update() {
        var currentTime = new Date().getTime();
        var elapsed = currentTime - lastTime;
        timeLeft -= elapsed;
        lastTime = currentTime;

        var percentDone = 1 - timeLeft/settings.totalTime;

        elem.style.top = ease(start.top, settings.top, percentDone) + "px" ;
        elem.style.left = ease(start.left, settings.left, percentDone) + "px" ;

        if(timeLeft > 0) {
            setTimeout(update, 33);
        }   
    }

    update();
}

Par exemple, pour déplacer une div (50,50) au cours des deux prochaines secondes.

var elem = document.getElementById("animatable");

setTimeout(function() {
    animateTo({
        element: elem, 
        left: 50, 
        top: 50, 
        totalTime: 2000,
        ease: linearEase
    })
}, 10);

Qui est assez habituel pour faire ce genre de choses. L'obtention de la position de l'élément et de définir le style des trucs qui pourrait être mieux mis en œuvre pour assurer. Mais dans l'abstraction d'un ease fonction rendra votre vie beaucoup plus facile dans le long terme. J'ai fourni un linéaire simple facilité, mais d'autres plus compliquées assouplissement des algorithmes permettrait de se conformer à cette même interface.

Une autre chose à noter est que les délais d'attente et les intervalles sont pas de garantie à exécuter à une heure définie, de sorte que son généralement préférable de régler le temps total que vous voulez de la transition à prendre, et ensuite de voir comment beaucoup de temps s'est écoulé depuis la dernière fois que vous avez rendus.

Aussi, si vous animez un tas d'éléments à la fois, je serais certainement refactoriser ce à un seul "rendu" en boucle. les appels à la animateTo de pousser les travailleurs dans une file d'attente de travailleurs, mais seulement setTimeout boucle qui calcule le temps écoulé puis invoque chaque travailleur, de sorte que vous n'avez pas un bazillion timeout fermetures flottant autour.

De toute façon, le violon ici