我正在使用 Raphael JS 尝试围绕中心点下方的点旋转图像形状。如何才能做到这一点?
我已经尝试过以下方法,但它不起作用。
var playBBox = playButtonRef.getBBox();
var xPos = playBBox.x + playBBox.width/2;
var yPos = playBBox.y;
var animObject = Raphael.animation({
transform: playButtonRef.attr("transform") + "R60," + (this.cx - 25) + "," + this.cy
}, 3000);
animObject = animObject.repeat(10);
playButtonRef.animate(animObject);
我也在寻找一种将其旋转回原始位置的方法。如何让它追踪其路径?
- 要围绕指定点旋转,您可以使用
xPos
and yPos
您已经定义了,并通过增加 Y 值修改它们以引用中心下方的点。
- 要追溯其路径,您可以使用
callback
param 来调用额外的动画调用,该调用会将形状重置为其原始位置。
以下是如何让它发挥作用:
var playBBox = playButtonRef.getBBox();
var xPos = playBBox.x + (playBBox.width / 2);
var yPos = playBBox.y + 25;
var animObject = Raphael.animation({
transform: "R60," + xPos + "," + yPos
}, 3000, function() {
playButtonRef.animate({
transform: "R0," + xPos + "," + yPos
}, 3000);
});
playButtonRef.animate(animObject);
我还设置了一个jsFiddle 上的工作示例 http://jsfiddle.net/hE3Jk/演示它是如何完成的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)