Question

基本上，我有这个场景，用Raphael：

创建

问题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()函数，在Raphael中则不然。我在api中读到了一个.animate（）函数，但由于我想动态操纵气球（和绳索），我不相信这是正确的方法（证明我错了）。

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

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

Answer 1

这是一个想法。我认为解决方案部分取决于您希望机芯的外观。 SVG＆amp; Raphael会在您更改任何属性（或动画/转换）后立即更新，因此通常您不必担心屏幕更新。（如果您需要更复杂的移动/动画，则可能需要使用更复杂的代码和计时。）

我已将两个元素放入另一个集合中，并对它们应用动画变换。有一个＆＃39;缓和＆＃39;功能我已经包含尝试减慢动画的结尾，所以它看起来更平滑。

代码的关键更改是......

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/

动画使用变换字符串＆＃34; t100,200＆＃34;例如，将元素移动100,200（或者坐标系统，如果您还没有意识到，我会快速阅读变换，只是让它们有点理解）。

我已经合并了2个动画，作为一个示例，展示如果你想要在彼此之后应用2个方向，你可以如何组合它们。这里是动画文档的链接，如果它有助于http://raphaeljs.com/reference.html#Element.animate

更新Raphael.js中的位置

1 个答案: