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

Question

如何向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。）

.....

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

Answer 1

您在这里尚未提出非常集中的问题。 但是，看看书中的示例 ，这就是我的建议：

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

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

最后，KineticJS在哪里适合呢？ KineticJS是一个图形库，因此仅在这里用作示例中使用的本机HTML5 canvas代码的用户友好替代。 重点放在书籍代码中的context对象上。 您的目标是将其替换为KineticJS代码。

理想情况下，完成这些步骤后，您将能够提供代码片段来回答您自己的问题。 加油！