1

我有一个问题，我找不到任何解决方案。

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);
  1. 上变换用于将两个太阳转换到它们的位置。
  2. 通过动画中的变换，我尝试在当前位置缩放太阳。

发生的事情是太阳正在回到 0, 0 位置。

这是一个简化的示例：jsfiddle.net/vX4C9

4

1 回答 1

1

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

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

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

这个小提琴以适当的方式修复了您的示例，并在第一次翻译后放置的位置上缩放了圆圈。我冒昧地通过将缩放操作从s.8 .8-更改s1 1为s1 1-来强调缩放操作s2 2。

于 2013-08-01T16:45:43.577 回答