Question

我遇到了问题，我找不到任何解决办法。

var sunSmallSet = RAF.paper.set();
var sunSet = RAF.paper.set();
RAF.paper.importSVG(RAFSVG.sunsmall(), sunSmallSet);
RAF.paper.importSVG(RAFSVG.sunfull(), sunSet);

sunSmallSet.transform("t62, 62");
sunSet.transform("t62, 62");

var anim = Raphael.animation({transform: "s0.8 0.8"}, "2000", function(){
    sunSet.animate(animBack);
});
var animBack = Raphael.animation({transform: "s1 1"}, "2000", function(){
    sunSet.animate(anim);
});

sunSet.animate(anim);

上部变换用于将太阳转换为其位置。
通过动画中的变换，我尝试在当前位置缩放太阳。

太阳正在回到0,0位置。

以下是一个简化示例：jsfiddle.net/vX4C9

Answer 1

当您查看Raphael Element.transform documentation时，您将了解到您用于动画的转换是在目标上执行的累积操作集，每次再次转换时都会重置这些累积操作。这意味着，一旦您应用了一个转换（即t62 62），您将使用下一个转换（s.8 .8）覆盖它。

如果您不想将圆圈移回原始位置，则需要添加已执行的翻译。这可以通过将t62 62添加到您的动画中来完成，如下所示：

var anim = Raphael.animation({transform: "t62 62 s.8 .8"}, "2000", function(){
  circle.animate(animBack);
});

This fiddle以适当的方式修复您的示例，并在第一次翻译后将圆圈放在它所放置的位置上。我冒昧地强调规模操作，将其从s.8 .8 - s1 1更改为s1 1 - s2 2。

拉斐尔位置元素正确并在那里扩展

1 个答案: