我正在使用拉斐尔。这是我想用动画旋转的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');
但这也行不通。想法?