Kineticjs：画布中图像的随机移动动画答案

【问题标题】：Kineticjs: Random moving animation of images in canvasKineticjs：画布中图像的随机移动动画
【发布时间】：2014-07-08 07:49:51
【问题描述】：

如何在 For 循环图像中添加随机移动动画，

我有这个图像代码：

var imageSRCC = ["images/image1.png","images/image2.png","images/image3.png"];

function Images(i,x,y) {

  var CreatImage = new Image();
  Image= new Kinetic.Image({
     x:x,
     y:y,
     image: CreatImage,
     width: 100,
     height: 200,
  });
  CreatImage.src = imageSRCC[i];    
  layer.add(Image);

}

for (var i =0; i <imageSRCC.length; i++) {

    x: Math.floor(Math.random()*2 + 15)
    y: Math.floor(Math.random()* 2 + 15)

    Images(i,x,y)
}

我想做这样的事情：

http://chimera.labs.oreilly.com/books/1234000001654/ch05.html#balls_with_simple_interactions

在上面的链接中，您可以看到示例向下滚动，您将看到（单击下面的“运行示例！”以尝试示例 5-7。）

.....

如果有人可以帮助我，我将非常感激。

【问题讨论】：

我没有看过你的书样，但你需要解决的第一个问题是：你的动画循环在哪里？这不是代码示例中的 for 循环。 KineticJS 提供了一个你可以使用的动画类，或者你可以简单地使用this classic example。动画循环到位后，您可以将随机值与 Kinetic 图像的 move 函数一起使用。
感谢 Klenwell，但我在 HTML5 游戏方面非常基础并试图解决问题，如果你能帮助我处理 Kineticjs 随机移动动画，那将是尊重。我正在尝试找出类似墙外弹跳和弹跳之类的东西。

标签： javascript animation kineticjs html5-animation

【解决方案1】：

你在这里没有问一个非常集中的问题。但是看看book example，这就是我的建议：

首先，创建一个运行本书中提供的示例的fiddle。这涉及的不仅仅是复制粘贴书中的代码。这样做将帮助您区分示例应用程序的 HTML5 和 Javascript 元素。 JSFiddle，如果您不熟悉它，它是在 StackOverflow 和其他地方演示代码的有用工具。

然后，探索 Javascript 代码，让自己了解不同的功能正在做什么。您需要特别关注的是drawScreen、update 和render 函数。这些函数的用途是什么？

最后，KineticJS 在哪里适合？ KineticJS 是一个图形库，因此它在这里仅用作对示例中使用的本机 HTML5 画布代码稍微更用户友好的替代品。关注本书代码中的context 对象。您的目标是用 KineticJS 代码替换它。

理想情况下，当您完成这些步骤后，您将能够提供一个代码 sn-p 来回答您自己的问题。有它！

【讨论】：