如何使用貝塞爾曲線沿着路徑為圖像設置動畫

Question

我的目標：

• 沿着如下圖所示的路徑移動/動畫圖像（可以連接貝塞爾曲線）。
• 必須在IE7 +中工作，不要構建多個解決方案。
• 我可以暫停/恢復運動圖像。
• 圖像將沿着路徑繼續移動（重復）。

我考慮過的

• CANVAS：IE7 + 8不支持，還沒有測試過explorercanvas！ 預見一些z-index問題。
• SVG，IE7 + 8不支持。
• jQuery.path，一個擴展jQuery動畫功能的插件。 無法弄清楚恢復部分，我想在支持時使用CSS轉換。

我的計划

• 使用CSS 3D變換，CSS 2d變換或jQuery.animate（支持的內容）和requestAnimationFrame為圖像設置動畫。
• 計算所有坐標並逐個像素地簡單移動圖像。

我的問題

• 我的計划聽起來像瘋了嗎？ 更好的建議？
• 你預見到一些性能問題嗎？ 我可能最終得到5K或10K坐標。
• 你知道一個聰明的方法，一個程序，一個函數或類似的東西來計算所有的坐標嗎？

Answer 1

有一個小腳本（基於SVG），只適用於不是直線的動畫，
叫做pathAnimator （2kb），它非常小而且效率很高。
不需要jQuery。

例如：

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
}

---

（使用fastdom甚至可以提高效率）

Answer 2

我建議你使用GSAP： http ： //www.greensock.com/get-started-js/

有了它你可以處理時間表，這是一個bezier插件： http ： //api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

問候