Анимация в JS. - есть ответ « Вопросы и ответы

Без имени, 260 просмотров

-1

Всем доброй ночи! Есть проблема. Я делаю змейку на JS. Собственно я ее уже сделал, но не нравится то что прорисовка происходит неплавно, а рывками, что соответствует ширине квадрата змейки.
Каждую итерацию (как при игровом режиме, так и в зависимости нажатия стрелок юзером) я двигаю блок(-и) таким образом.
this.head.css({'left': this.position_x, 'top': this.position_y});
Естественно все происходит рывками....

Я уже все перепробовал, от использовании функции анимэйт и плагинов до CSS -перемещении...все равно лажа....Хочется, чтобы она двигалась плавно...
http://thaifashion.ru/snake/index.html

Ответы:

для последующего сравнения

1. animate() может помочь (а почему нет?), но вызывает пересчет свойств элементов на каждый кадр, поэтому могут проявляться тормоза (рывки) + конечно же на него повлияет внезапная смена css-свойств.
2. css3? почему бы просто не установить css-свойство transition: all 0.5s ease или что-то подобное? работает сильно быстрее + браузер сам обработает все возможные внезапные изменения свойств.
3. но может быть, лучше отказаться изменения свойств top и left, а делать перемещение через transform: translate3d(x,y,0) — это может быть быстрее. Конечно, для плавного изменения все еще нужен transition. Меняем transform в JS, а браузер все дальше сделает за нас.

для последующего сравнения

Посмотрел чуток на код по приведенной ссылке. Стало все понятно.
У вас блоки (сегменты змейки) создаются на каждую позицию. При таком раскладе анимировать не выйдет толком, поскольку анимируется какой-то определенный элемент, а у вас они уничтожаются и создаются новые. Обходной путь: создавать элемент не на новой позиции (где он должен быть), а не предыдущей, после чего выполнять анимацию к реальной его позиции.

holden321

У Вас меняет позицию только голова, остальные остаются на месте: просто хвостовой удаляется и на место головы создается новый блок. Поэтому ни о какой анимации речи быть не может.

11 лет назад

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.