javascript - 更新 Raphael.js 中的位置

Question

基本上，我有这个场景，是用 Raphael 创建的:

有一个jsfiddle的问题here .

所以，我的计划是让用户切断其中一根绳子来创建动画并在气球飞起和场景变化的同时打开各种新内容...... 我不知道是否应该将完整的代码粘贴给您，我只是在这里尝试一下:

window.onload = function() {

  //initialisierung raphael
  var r = Raphael("Scene", "100%", "100%"),
    discattr = {
      fill: "#fff",
      stroke: "none"
    };

  //variablen zum verschieben und für positionierung
  var verschiebungX = 0;
  var verschiebungY = 0;

  //höhe auf welcher die ballons hängen
  var ballonHohe = 500;

  //die nägel
  nagel1 = new Array(225, 735);
  nagel2 = new Array(500, 735);
  nagel3 = new Array(775, 735);

  //wind offset
  var windOffset = 10;

  //die bilder einlesen und auf ihr plätze legen
  var bg = r.image("img/bg.jpg", 0, -800 + verschiebungY, "100%", "200%");
  bg.attr({
    "clip-rect": "0,0, 100% , 100%"
  });

  var brett = r.image("img/holz.png", 0, 700 + verschiebungY, "100%", "20%");
  brett.attr({
    "clip-rect": "0,0, 100% , 100%"
  });



  r.text(310, 20, "Welcome to LuckyCrew").attr({
    fill: "#fff",
    "font-size": 16
  });

  var foo = 0;

  //das BallonObject
  Raphael.fn.ball = function(x, y, r, hue) {
    hue = hue || 0;
    return this.set(
      this.ellipse(x, y, r, r * 1.15).attr({
        fill: "r(.5,.9)hsb(" + hue + ", 1, .75)-hsb(" + hue + ", .5, .25)",
        stroke: "none"
      }),
      this.ellipse(x, y, r - r / 5, (r - r / 20) * 1.15).attr({
        stroke: "none",
        fill: "r(.5,.1)#ccc-#ccc",
        opacity: 0
      })
    );
  };

  //das seilObject
  function curve(x, y, ax, ay, bx, by, zx, zy, color) {
    var path = [
        ["M", x, y],
        ["C", ax, ay, bx, by, zx, zy]
      ],
      path2 = [
        ["M", x, y],
        ["L", ax, ay],
        ["M", bx, by],
        ["L", zx, zy]
      ],
      curve = r.path(path).attr({
        stroke: color || Raphael.getColor(),
        "stroke-width": 4,
        "stroke-linecap": "round"
      });
  }

  //die seile
  var firstCurve = curve(
    (nagel1[0] + (windOffset * 2)) + verschiebungX, ballonHohe + verschiebungY, (nagel1[0] + (windOffset * 1.5)) + verschiebungX, ballonHohe + 100 + verschiebungY, (nagel1[0] + windOffset) + verschiebungX, 650 + verschiebungY,
    nagel1[0] + verschiebungX, nagel1[1] + verschiebungY,
    "hsb(0, 0, 0)");

  var secondCurve = curve(
    (nagel2[0] + (windOffset * 2)) + verschiebungX, ballonHohe + verschiebungY, (nagel2[0] + (windOffset * 1.5)) + verschiebungX, ballonHohe + 100 + verschiebungY, (nagel2[0] + windOffset) + verschiebungX, 650 + verschiebungY,
    nagel2[0] + verschiebungX, nagel2[1] + verschiebungY,
    "hsb(0, 0, 0)");

  var thirdCurve = curve(
    (nagel3[0] + (windOffset * 2)) + verschiebungX, ballonHohe + verschiebungY, (nagel3[0] + (windOffset * 1.5)) + verschiebungX, ballonHohe + 100 + verschiebungY, (nagel3[0] + windOffset) + verschiebungX, 650 + verschiebungY,
    nagel3[0] + verschiebungX, nagel3[1] + verschiebungY,
    "hsb(0, 0, 0)");

  //die bälle
  r.ball(nagel1[0] + (windOffset * 2) + verschiebungX, (ballonHohe - 115) + verschiebungY, 100, Math.random());

  r.ball(nagel2[0] + (windOffset * 2) + verschiebungX, (ballonHohe - 115) + verschiebungY, 100, Math.random());

  r.ball(nagel3[0] + (windOffset * 2) + verschiebungX, (ballonHohe - 115) + verschiebungY, 100, Math.random());


  //die nägel auf die fäden hämmern
  var nagel1 = r.image("img/nagel.png", nagel1[0] - 25, nagel1[1] - 10 + verschiebungY, 50, 50);
  nagel1.attr({
    "clip-rect": "0,0, 100% , 100%"
  });

  var nagel2 = r.image("img/nagel.png", nagel2[0] - 25, nagel2[1] - 10 + verschiebungY, 50, 50);
  nagel2.attr({
    "clip-rect": "0,0, 100% , 100%"
  });

  var nagel3 = r.image("img/nagel.png", nagel3[0] - 25, nagel3[1] - 10 + verschiebungY, 50, 50);
  nagel3.attr({
    "clip-rect": "0,0, 100% , 100%"
  });


  var test = r.ellipse(50, 50, 40, 20);

  r.ball(50, 40, 20, Math.random());

};

在XNA或Processing中，您有一个Update()和draw()函数，在Java中您有一个repaint()功能，但拉斐尔的作品却并非如此。我在 api 中读到了有关 .animate() 函数的信息，但由于我想动态操作气球(和绳索)，我不认为这是正确的方法(证明我错了)。

我的问题是如何重新加载场景或至少更新它......

编辑: 我还尝试使用对象创建变量并在函数中调用它们的创建，然后更改参数并重复，但这似乎也不起作用。在这种情况下，对象毕竟没有被创建。

Answer 1

这是一个想法。我认为解决方案部分取决于您希望运动的外观。一旦您更改任何属性(或动画/变换)，SVG 和 Raphael 就会更新，因此通常您不必担心屏幕更新。 (如果您需要更复杂的运动/动画，您可能需要使用更复杂的代码和计时)。

我已将这两个元素放入另一个集合中，并对它们应用动画变换。我添加了一个“缓动”功能来尝试在末尾放慢动画速度，使其看起来更平滑。

代码的主要更改是......

var ball = r.ball(100 + (windOffset * 2), 
 (250 - 115), 100, Math.random()); //the height of rope top - radius

var set = r.set(ball, firstCurve);

set.animate({ 'transform':  "t" + windOffset +",-100" }, 2000, "<>", function() {
    set.animate({ "transform" : "t0,-200" }, 2000, "<>" )} );

正在工作 jsfiddle... http://jsfiddle.net/5BgDe/29/

动画使用变换字符串，例如“t100,200”会将元素移动 100,200(或坐标系，如果您还不知道的话，我会快速阅读变换，这样它们才有意义一点)。

我组合了 2 个动画，只是作为一个示例来展示如果您想要相继应用 2 个方向，如何组合它们。如果有帮助的话，这里还有一个动画文档的链接http://raphaeljs.com/reference.html#Element.animate