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

你在这里没有问到一个非常有针对性的问题。但是看看book example，这是我的建议：

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

然后，探索Javascript代码，让自己理解不同的函数在做什么。您需要特别关注的是drawScreen、update和render函数。这些函数中的每一个都有什么用途？

最后，KineticJS在哪里适合呢？KineticJS是一个图形库，所以这里只使用它作为示例中使用的原生HTML5 canvas代码的一个稍微更用户友好的替代品。关注图书代码中的context对象。您的目标是将其替换为KineticJS代码。

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