Comment animer une image le long d'un chemin avec des courbes de Bézier

Mon objectif:

  • Déplacer/animer une image le long d'un chemin d'accès comme le dessin ci-dessous (Peut-être la connexion de courbes de bézier).
  • Doivent travailler dans IE7+, je ne sais pas quoi construire de multiples solutions.
  • Je peux mettre en pause/reprendre l'image en mouvement.
  • L'image va continuer à avancer sur le chemin (répéter).

le chemin d'accès http://i50.tinypic.com/dwwhhy.jpg

Ce que j'ai considéré comme

  • TOILE: pas pris en charge dans IE7+8, ne l'ai pas testé explorercanvas de façon encore! Prévoir un z-index de questions.
  • SVG, pas pris en charge dans IE7+8.
  • jQuery.chemin d'accès, un plugin qui s'étend de la fonction animate de jQuery. N'arrive pas à reprendre la partie, et je veux utiliser CSS transforme lors de la prise en charge.

Mon plan

  • Animer l'image avec CSS transformation 3D, CSS transformation 2d ou jQuery.animer (ce) et de requestAnimationFrame.
  • Calculer toutes les coordonnées et simple de déplacer l'image pixel par pixel.

Ma question

  • Mon plan sonore comme de la folie? De meilleures suggestions?
  • Envisagez-vous de certains problèmes de performances? Je risque de se retrouver avec 5K ou 10K coordonnées.
  • Connaissez-vous une façon intelligente, un programme, une fonction ou quelque chose de similaire pour calculer toutes les coordonnées?
Quelle est la taille de vos images? Avez-vous un exemple de chemin d'accès des données que vous allez utiliser?

OriginalL'auteur Bruno | 2012-11-28

  1. 9

    Je vous recommande d'utiliser GSAP : http://www.greensock.com/get-started-js/

    Avec qui vous pouvez gérer les délais, et ici est une courbe de bézier plugin : http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

    ce qui concerne

    I <3 greensock. Merci
    Moi aussi! amusez-vous
    lol, GSAP est le meilleur js animation lib en termes de perfs, de compatibilité (même ie6!) et la facilité d'utilisation.
    +1 pour la GSAP. Il a aussi quelques CDN hébergé Url qui comprend TweenMax, TimelineMax, CSSPlugin, EasePack, BezierPlugin et sans doute un peu plus communément utilisé. Donc 60 lignes de code js ou pas, vous pouvez vous attendre à la facilité d'utilisation et rapide, temps de téléchargement en considérant cette URL est hébergé pour HTML5, des bannières publicitaires, de sorte que la plupart des utilisateurs ont déjà mis en cache sur leurs navigateurs: s0.2mdn.net/ads/studio/cached_libs/...

    OriginalL'auteur xavier.seignard

  2. 14

    Il y a un petit script (SVG), juste pour l'animation, ce qui n'est pas dans les lignes droites,


    appelé pathAnimator (2kb), C'est très très petit et très efficace.

    Pas de jQuery nécessaire.

    Par exemple:

    var path = "M150 0 L75 200 L225 200 Z";         //an SVG path
    pathAnimator = new PathAnimator( path ),    //initiate a new pathAnimator object
    speed = 6,              //seconds that will take going through the whole path
    reverse = false,        //go back or forward along the path
    startOffset = 0,        //between 0% to 100%
    easing = function(t){ t*(2-t) };    //optional easing function


pathAnimator.start( speed, step, reverse, startOffset, finish, easing);

function step( point, angle ){
    //do something every "frame" with: point.x, point.y & angle
}

function finish(){
    //do something when animation is done
}

    (peut même devenir plus efficace à l'aide de fastdom)

    OriginalL'auteur vsync