How to animate an image along a path with Bezier curves

匿名 (未验证) 提交于 2019-12-03 01:48:02

问题:

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 http://i50.tinypic.com/dwwhhy.jpg

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?

回答1:

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



回答2:

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)



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!