10

My goal:

  • Move/animate an image along a path like the drawing below (Could be connecting bezier curves).
  • Must work in IE7+, don't what to build multiple solutions.
  • I can pause/resume the moving image.
  • The image will keep moving along the path (repeat).

the path

What I have considered

  • CANVAS: not supported in IE7+8, haven't tested explorercanvas yet! Foresee some z-index issues.
  • SVG, not supported in IE7+8.
  • jQuery.path, a plugin that extends the jQuery animate function. Can't figure out the resume part and I want to use CSS transforms when supported.

My plan

  • Animate the image with CSS 3D transform, CSS 2d transform or jQuery.animate (what supported) and requestAnimationFrame.
  • Calculate all the coordinates and simple move the image pixel by pixel.

My question

  • Does my plan sound like madness? Better suggestions?
  • Do you foresee some performance issues? I might end up with 5K or 10K coordinates.
  • Do you know a smart way, a program, a function or anything similar to calculate all the coordinates?
Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Bruno
  • 352
  • 1
  • 4
  • 9

2 Answers2

15

There's a tiny script (SVG based), just for animation which isn't in straight lines,
called pathAnimator (2kb), It's very very small and very efficient.
No jQuery required.

For example:

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
}

(can even get more efficient using fastdom)

Community
  • 1
  • 1
vsync
  • 118,978
  • 58
  • 307
  • 400
9

I would recommend you to use GSAP : http://www.greensock.com/get-started-js/

With that you can handle timelines, and here is a bezier plugin : http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

regards

xavier.seignard
  • 11,254
  • 13
  • 51
  • 75
  • 7
    lol, GSAP is the best js animation lib in terms of perfs, compatibility (even ie6!) and ease of use. – xavier.seignard Apr 24 '13 at 20:09
  • +1 for GSAP. It also has a few CDN hosted URLs that includes TweenMax, TimelineMax, CSSPlugin, EasePack, **BezierPlugin** and probably a few more commonly used one. So 60 lines of js code or not, you can expect ease of use and fast download times considering this URL is hosted for HTML5 banner ads, so most users would already have it cached on their browsers: https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js – chamberlainpi Apr 26 '16 at 17:55