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

Kineticjs: Random moving animation of images in canvas

本文关键字：随机 移动 动画 图像 布中 Kineticjs      更新时间：2023-09-26

如何为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

在上面的链接

中，您可以看到示例向下滚动，您将看到(单击"运行示例!)

…

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

你没有问一个很有针对性的问题。但是看看书的例子，这是我的建议:

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

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

最后，KineticJS适合在哪里?KineticJS是一个图形库，所以它在这里只是作为一个更友好的例子中使用的本地HTML5画布代码的替代品。关注图书代码中的context对象。你的目标是用KineticJS代码替换它。

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

相关文章：