3

こんにちは、このページにあるこのチュートリアルに従っています: http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

私がテストしているコードは次のとおりです。

window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr(
    {
        gradient: '90-#526c7a-#64a0c1',
                    rotation: -90,
        stroke: '#3b4449',
        'stroke-width': 10,
        'stroke-linejoin': 'round'
    }
);

tetronimo.animate({rotation: 360, 'stroke-width': 1}, 2000, 'bounce', function() {
/* callback after original animation finishes */
this.animate({
    rotation: -90,
    stroke: '#3b4449',
    'stroke-width': 10
}, 1000);
    });

}

アニメーションはストローク幅では機能しますが、回転では機能しません。いくつかの調査の後、バージョン 2 では「回転」属性がサポートされなくなっていることがわかりました。そのため、2 つのオプションがあります。

1) 同じ目標を達成する別の方法を考え出す

2) Raphael V1 ライブラリのコピーを見つける

これらのオプションのいずれかを手伝ってくれる人はいますか (私の好みはオプション 1 です)。

ありがとう！

4

1 に答える 1

6

transformv2では今メソッドを使用する必要があります。それほど違いはありません。このフィドルを参照してください。

http://jsfiddle.net/58yqW/3/

    var paper = new Raphael(document.getElementById('canvas'), 500, 500);
    var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
    tetronimo.attr(
      {
        gradient: '90-#526c7a-#64a0c1',
        'transform':"r-90",
        stroke: '#3b4449',
        'stroke-width': 10,
        'stroke-linejoin': 'round'
      }
    );

    tetronimo.animate({'transform':"r360", 'stroke-width': 1}, 2000, 'bounce',       function() {
    this.animate({
        'transform':"r-90",
        stroke: '#3b4449',
        'stroke-width': 10
       }, 1000);
    });

アニメーションの正確な要件はわかりませんが、回転などが行われていることがわかります。注意すべき点の1つは、R-90とr-90を使用できることです。要素変換のドキュメントを確認してください。

于 2012-09-25T11:04:38.787 に答える