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 不再支持“旋转”属性。所以我有两个选择：

1）找出实现相同目标的替代方法

2）找到一份Raphael V1库的副本

任何人都可以帮助我解决这些选项中的任何一个（我更喜欢选项 1）。

谢谢！

4

1 回答 1

6

transform您现在需要在 v2中使用方法。它并没有太大的不同，请看这个小提琴：

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);
    });

我不知道您的动画的确切要求，但您可以看到它确实旋转等。要注意的一件事是您可以使用 R-90 和 r-90，查看element transform的文档。

于 2012-09-25T11:04:38.787 回答