1

回転する星のアイコンをアニメートしようとしています。

var star = this._paper.path("M26.522,12.293l-5.024-0.73c-1.089-0.158-2.378-1.095-2.864-2.081l-2.249-4.554c-0.487-0.986-1.284-0.986-1.771,0l-2.247,4.554c-0.487,0.986-1.776,1.923-2.864,2.081l-5.026,0.73c-1.088,0.158-1.334,0.916-0.547,1.684l3.637,3.544c0.788,0.769,1.28,2.283,1.094,3.368l-0.858,5.004c-0.186,1.085,0.458,1.553,1.432,1.041l4.495-2.363c0.974-0.512,2.566-0.512,3.541,0l4.495,2.363c0.974,0.512,1.618,0.044,1.433-1.041l-0.859-5.004c-0.186-1.085,0.307-2.6,1.095-3.368l3.636-3.544C27.857,13.209,27.611,12.452,26.522,12.293zM22.037,16.089c-1.266,1.232-1.966,3.394-1.67,5.137l0.514,2.984l-2.679-1.409c-0.757-0.396-1.715-0.612-2.702-0.612s-1.945,0.216-2.7,0.61l-2.679,1.409l0.511-2.982c0.297-1.743-0.404-3.905-1.671-5.137l-2.166-2.112l2.995-0.435c1.754-0.255,3.592-1.591,4.373-3.175L15.5,7.652l1.342,2.716c0.781,1.583,2.617,2.92,4.369,3.173l2.992,0.435L22.037,16.089z")
.attr({ fill: "darkred", stroke: "none" })
.transform("t"+starX+","+starY);

var a0 = Raphael.animation({ transform: "r360"}, 2000);
star.animate(a0.repeat(Infinity));

翻訳を削除すると、素晴らしいアニメーションが得られます。しかし、翻訳すると、アニメーションは奇妙になります。

4

2 に答える 2

1

次のように、アニメーションの翻訳を考慮する必要があります。

var paper = Raphael(0,0,500,500);
var starX = 50;
var starY = 50;

// code for your path here as its rather long! Including your translate 
// using the starX and starY


// then the animation
var a0 = Raphael.animation({ transform: "t"+starX+","+starY+"r360"}, 2000);
star.animate(a0.repeat(Infinity));​

また、ここでjsfiddleの例を作成しました。

于 2012-09-20T10:39:25.127 に答える
1

アニメーションのパラメータには、変換も含める必要があります。これは、開始属性と終了属性の違いだけでなく、オブジェクトの終了属性であるためです。例を参照してください：http：//jsfiddle.net/b9akz/32/。

var paper = new Raphael('holder');
var starX = 100, starY = 100;
var star = paper.path("M26.522,12.293l-5.024-0.73c-1.089-0.158-2.378-1.095-2.864-2.081l-2.249-4.554c-0.487-0.986-1.284-0.986-1.771,0l-2.247,4.554c-0.487,0.986-1.776,1.923-2.864,2.081l-5.026,0.73c-1.088,0.158-1.334,0.916-0.547,1.684l3.637,3.544c0.788,0.769,1.28,2.283,1.094,3.368l-0.858,5.004c-0.186,1.085,0.458,1.553,1.432,1.041l4.495-2.363c0.974-0.512,2.566-0.512,3.541,0l4.495,2.363c0.974,0.512,1.618,0.044,1.433-1.041l-0.859-5.004c-0.186-1.085,0.307-2.6,1.095-3.368l3.636-3.544C27.857,13.209,27.611,12.452,26.522,12.293zM22.037,16.089c-1.266,1.232-1.966,3.394-1.67,5.137l0.514,2.984l-2.679-1.409c-0.757-0.396-1.715-0.612-2.702-0.612s-1.945,0.216-2.7,0.61l-2.679,1.409l0.511-2.982c0.297-1.743-0.404-3.905-1.671-5.137l-2.166-2.112l2.995-0.435c1.754-0.255,3.592-1.591,4.373-3.175L15.5,7.652l1.342,2.716c0.781,1.583,2.617,2.92,4.369,3.173l2.992,0.435L22.037,16.089z")
.attr({ fill: "darkred", stroke: "none" })
.translate(starX,starY);

var a0 = Raphael.animation({ transform: "t"+starX + "," + starY + " r360"}, 2000);
star.animate(a0.repeat(Infinity));​
于 2012-09-20T10:50:38.467 に答える