【问题标题】:Troubleshooting Raphael translation animation拉斐尔翻译动画疑难解答
【发布时间】:2009-10-22 11:30:06
【问题描述】:

我正在尝试使用 Raphael 制作一个小游戏,只是想对我正在编写的一些代码提出一些建议。

这是我目前所拥有的,它只是一个在屏幕上移动圆圈的简单示例:

<script type="text/javascript" charset="utf-8">
window.onload = function () {
  var paper = Raphael(10, 50, 320, 200);
  var paper = Raphael(document.getElementById("holder"), 320, 200);
  var paper = Raphael("holder", 320, 200);

  var startx = 30;
  var starty = 30;
  var ANIM_STEP = 5;

  var d = paper.circle(startx,starty,20);
  d.attr("fill", "blue");
  document.onkeyup = function (e) {
    var keyid = e.keyCode;

    switch (keyid)
    {
      // right arrow key
      case 39:
        startx += ANIM_STEP;
        d.cx = d.cx || startx ;
        d.animate({cx: d.cx}, startx);
      break;
    }
  }
};
</script>

现在,我遇到的当前问题是它仅在第一次单击右箭头键时产生动画。我通过一些跟踪调试验证了“startx”的增量。

我从 Raphael circle example 开始,并从 ichart 中加入了一点点,所以我的方式可能不是最好的......我期待你的建议 :)

【问题讨论】:

    标签: javascript animation dom-events raphael


    【解决方案1】:

    天啊

    必须设置 d.cx = startx .... 有助于更新您的变量!

    【讨论】:

    • 我很好奇拉斐尔在比赛中的表现如何?我正在考虑用它来生成地图上的单位精灵。
    • @Donny:老实说,自从这个小演示之后,我就没有真正接触过 Raphael……我最近一直在使用 vanilla JavaScript 与 canvas 元素进行交互。
    猜你喜欢
    • 2016-06-15
    • 1970-01-01
    • 2013-06-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-06
    • 2014-08-29
    相关资源
    最近更新 更多