Question

我正在使用拉斐尔。这是我想用动画旋转的tetris块的代码：

function ele(id) {
        return document.getElementById(id);
    }

    window.onload = function() {
        var paper = new Raphael(ele('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',
            stroke: '#3b4449',
            'stroke-width':10,
            'stroke-linejoin':'round',
            rotation:-90, //**This is where the problem is**
            title:'This is a tetris block'
        });

        tetronimo.animate({
            rotation:360 //**This is where the problem is**
        }, 2000, 'bounce');
    }

此代码也可以在本教程中找到：http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/

除了onload之外没有其他事件触发动画，但是当页面加载时不会执行任何动画。我也尝试过使用Raphael的变换方法：

tetronimo.attr({
            gradient: '90-#526c7a-#64a0c1',
            stroke: '#3b4449',
            'stroke-width':10,
            'stroke-linejoin':'round',
            transform:'r90',
            title:'This is a tetris block'
        });
tetronimo.animate({
            transform:'r360'
        }, 2000, 'bounce');

但这也行不通。想法？

Answer 1

根据this answer，用Raphael 2.0删除了轮换。

我在Raphael playground page上尝试了transform示例，它对我有用

旋转未被识别为attr（）属性

1 个答案: