jsfiddle hereАнимирование несколько экземпляров с холстом
Мне скучно на работе сегодня, так что я просто начал строить что-то с холстом, чтобы попытаться научить себя некоторые вещи. Я застрял на этой части и решил обратиться к сообществу SO вместо того, чтобы ударить головой о стену.
Основная идея - прослушивать клик, а затем создавать случайно окрашенный круг, где пользователь нажимает, оживляет до большего размера и исчезает.
Он отлично работает, когда вы просто щелкаете и позволяете ему исчезать. Проблема возникает, когда на холсте одновременно появляется более одного круга. Я могу сказать, что это происходит из-за того, как я делаю мой анимационный цикл, но для жизни я не могу понять, как это сделать лучше.
Должен ли я иметь цикл анимации отдельно от setInterval, который растет/исчезает в кругах? Если да, то что должен делать этот цикл? Я чувствую, что мне нужно отделить размещение/рост/выцветание кругов от фактического рендеринга.
EDIT: Я замечаю это только кажется, работает в Chrome (возможно сафари тоже)
Спасибо, что работало большое. Есть несколько частей модифицированного кода, которые меня немного путают, но я думаю, что я получаю то, что происходит по большей части. Обновлено здесь: http://jsfiddle.net/ybcHk/11/ – idrumgood
Обновленная версия - это нечто странное, Алиса в стране чудес. Я добавил комментарии к моей версии здесь: http://jsfiddle.net/ybcHk/12/; посмотрите, помогают ли они объяснить какие-то нечетные точки. – ellisbben
Perfect. Я понял все это. Я удалил часть с CirclesNext, и мой массив стал огромным через некоторое время. Я предполагаю, что вы сделали это, поэтому, если кто-то играл в течение 20 минут (... возможно, я), это не убьет память. – idrumgood