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

在上面的链接中你可以看到示例scrollldown，你会看到（点击下面的“运行示例！”来试验例5-7。）

.....

如果有人能帮助我，我将非常感谢。

Answer 1

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

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

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

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

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

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

1 个答案: