Поворот элементов не гладкий

55
5

Я работаю над игрой HTML5, и он постоянно вращает элемент div и добавляет к нему элементы.

Я замечаю, что вращение не так гладко и регулярно, как должно быть, иногда можно заметить небольшие прыжки.

Я использовал setInterval с поворотным преобразованием для создания эффекта, но он был действительно плохим и неустойчивым. Затем я изменил код, чтобы использовать requestAnimationFrame, который намного лучше, но все еще не идеален, и ограничивает контроль скорости.

Я также использую этот CSS-код для передачи обработки анимации на GPU:

transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000;

-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

Кто-нибудь знает, что еще я могу сделать, чтобы улучшить анимацию? Похоже, что простая и однократная анимация в порядке с кордорой, но когда нам нужно постоянно активировать некоторый элемент, производительность не очень хорошая.

спросил(а) 2015-05-26T12:12:00+03:00 5 лет, 2 месяца назад
1
Решение
55

Вы смотрите на этот другой вопрос? CSS3 Spin Animation

Это то же самое?

ответил(а) 2015-05-26T12:23:00+03:00 5 лет, 2 месяца назад
40

Мое предложение: используйте холст.

Но, чтобы придерживаться существующей кодовой базы:

Возможно, вы сможете сгладить ситуацию, поставив ее в ограничительную коробку с достаточным пространством, чтобы не переваривать всю страницу при ее повороте (длина страницы/ширина не изменяется при вращении). Использование холста и webgl сделало бы вещи более гладкими.


Кроме того, для обработки любых тяжелых тиков (вычисление того, куда должны идти вещи, пути к путешествию и т.д.), Используйте веб-исполнителя, которому вы отправляете объекты (не публикуйте как json args). Используйте одиночные аргументы для отправки postMessage как объект). Таким образом, поток рендеринга не должен ждать, пока вычисления будут продолжать вращаться, и могут просто перемещать пути, чтобы перемещаться с элементами, когда это было сделано.

Кроме того, сохраняйте ссылки на свои объекты. не используйте повторно document.getElementById. используйте document.getElementById один раз и сохраните ссылку и передайте ее.

ответил(а) 2015-05-26T12:20:00+03:00 5 лет, 2 месяца назад
39

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

Я слышал хорошие вещи об этом: Velocity

ответил(а) 2015-05-26T12:19:00+03:00 5 лет, 2 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема