同时进行旋转和平移,可使用animate
方法
var leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z");
leftRec.attr("fill","#f00");
leftRec.animate({transform: "T0,500R-90"}, 1000, "ease-in");
为了第一,然后翻译进行旋转,利用该回调在animate
方法
var leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z");
leftRec.attr("fill","#f00");
leftRec.animate({transform:"r-90,400,150"}, 1000, "ease-in", function() {
this.animate({
path: Raphael.transformPath('M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z', 'T-500,0')
}, 1000);
// The below approach could have worked in theory but probably the coordinate system change might
// tamper with the subsequent transform. I am not so sure.
// this.animate({transform: "T0,500"}, 1000)
});
在这两种情况下,形状垂直移动500px。
这可能不是最好的解决方案,如果有更好的方法来解决这个问题,请纠正/改进。
所以,你会想要形状旋转,向下移动屏幕或向下移动就足够了? –