1

曲線のパスに沿ってパス (実際には一連のパスですが、それについて説明します) をアニメーション化したいと考えています。

RaphaelJS 2 はanimateAlong、私が識別できなかった理由により、このメソッドを削除しました。Zevanによって抽象化された Raphael ドキュメントのgears demoを掘り下げると、次のようになりました。

//adding a custom attribute to Raphael
(function() {
  Raphael.fn.addGuides = function() {
    this.ca.guide = function(g) {
      return {
        guide: g
      };
    };
    this.ca.along = function(percent) {
      var g = this.attr("guide");
      var len = g.getTotalLength();
      var point = g.getPointAtLength(percent * len);
      var t = {
        transform: "t" + [point.x, point.y]
      };
      return t;
    };
  };
})();

var paper = Raphael("container", 600, 600);

paper.addGuides();

// the paths
var circ1 = paper.circle(50, 150, 40);
var circ2 = paper.circle(150, 150, 40);
var circ3 = paper.circle(250, 150, 40);
var circ4 = paper.circle(350, 150, 40);

var arc1 = paper.path("M179,204c22.667-7,37,5,38,9").attr({'stroke-width': '2', 'stroke': 'red'});

// the animation

// works but not at the right place
circ3.attr({guide : arc1, along : 1})
         .animate({along : 0}, 2000, "linear");

http://jsfiddle.net/hKGLG/4/

3 番目の円が赤いパスに沿ってアニメーション化されるようにします。現在アニメーション化されていますが、赤いパスから 3 番目の円の元の座標に等しい距離にあります。奇妙なことに、これはtranslate、alongオブジェクトの変換が相対 (小文字の "t") であっても絶対 (大文字の "T") であっても発生します。animateまた、呼び出しの直前に変換変換で微調整しても、常に同じ場所でアニメーション化されます。

どんな助けでも大歓迎です。ここベクトルランドでボートを降りたところです。ポインターは役に立ちます。動作するフィドルはさらに優れています。

4

1 に答える 1

5

あなたはただのホップであり、スキップして、あなたが望む機能から飛び降ります。ここでの混乱は、変換とオブジェクトプロパティ間の相互作用に関するものです。具体的には、変換によって元のオブジェクトプロパティが変更されないということです。平行移動は、円の元の座標を置き換えるのではなく、単に追加します。

解決策は非常に簡単です。あなたのalongメソッドで：

this.ca.along = function(percent) {
  var box = this.getBBox( false );  // determine the fundamental location of the object before transformation occurs
  var g = this.attr("guide");
  var len = g.getTotalLength();
  var point = g.getPointAtLength(percent * len);
  var t = {
    transform: "...T" + [point.x - ( box.x + ( box.width / 2 ) ), point.y - ( box.y + ( box.height / 2 ) )]  // subtract the center coordinates of the object from the translation offset at this point in the guide.
  };
  return t;

明らかに、ここには最適化の余地があります（つまり、すべての円を0,0で作成し、それらを必要な表示座標に変換して、多くの反復計算を回避することが理にかなっている場合があります）。しかし、それは機能的です... ここを参照してください。

もう1つの注意点：... T変換は、特定の円にすでに適用されている他の変換には影響しません。この実装は、他の変換とうまく連携することが保証されていません。

于 2012-11-08T21:59:59.357 に答える