Kineticjs: случайная движущаяся анимация изображений на холсте.

Как я могу добавить случайную движущуюся анимацию к изображениям цикла 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.)

.....

я буду очень благодарен, если кто-нибудь может помочь мне с этим.


javascript animation html5-animation kineticjs
person Salman Afzal    schedule 04.07.2014    source источник
comment
Я не смотрел пример из вашей книги, но первая проблема, которую вам нужно решить, это: где ваш цикл анимации? Это не цикл for в вашем примере кода. KineticJS предоставляет класс анимации, который вы можете использовать или просто использовать этот классический пример< /а>. Как только ваш цикл анимации будет готов, вы можете использовать свои случайные значения с функциями move ваших кинетических изображений.   -  person klenwell    schedule 06.07.2014
comment
Спасибо, Кленвелл, но я очень хорошо разбираюсь в играх HTML5 и пытаюсь решить проблему, если вы можете помочь мне с анимацией случайного движения Kineticjs, так что это будет уважительно. Я пытаюсь выяснить что-то вроде отскока вне стен и отскока друг от друга.   -  person Salman Afzal    schedule 08.07.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вы не задали очень целенаправленные вопросы здесь. Но, глядя на пример книги, я бы предложил следующее: :

Сначала создайте скрипту, которая запускает пример, представленный в книге. Это включает в себя нечто большее, чем просто копирование кода из книги. Это поможет вам различать элементы HTML5 и Javascript в примере приложения. JSFiddle, если вы с ним не знакомы, — полезный инструмент для демонстрации кода здесь, в StackOverflow и в других местах.

Затем изучите код Javascript и поймите, как работают различные функции. Особое внимание следует уделить функциям drawScreen, update и render. Каково назначение каждой из этих функций?

Наконец, какое место в этом занимает KineticJS? KineticJS — это графическая библиотека, поэтому здесь она используется только как немного более удобная замена собственного кода холста HTML5, использованного в примере. Сосредоточьтесь на объекте context в коде книги. Ваша цель — заменить это кодом KineticJS.

В идеале, проработав эти шаги, вы сможете предоставить фрагмент кода в ответ на свой вопрос. Имейте это!

person klenwell    schedule 07.07.2014