0

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

......

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

4

1 回答 1

1

你在这里没有问一个非常集中的问题。但是看看本书的例子,这就是我的建议:

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

然后,探索 Javascript 代码,让自己理解不同的功能正在做什么。您需要特别关注的是drawScreenupdaterender函数。这些功能中的每一个的目的是什么?

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

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

于 2014-07-07T23:49:51.027 回答