Поворот элементов не гладкий
Я работаю над игрой 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;
Кто-нибудь знает, что еще я могу сделать, чтобы улучшить анимацию? Похоже, что простая и однократная анимация в порядке с кордорой, но когда нам нужно постоянно активировать некоторый элемент, производительность не очень хорошая.
Вы смотрите на этот другой вопрос? CSS3 Spin Animation
Это то же самое?
Мое предложение: используйте холст.
Но, чтобы придерживаться существующей кодовой базы:
Возможно, вы сможете сгладить ситуацию, поставив ее в ограничительную коробку с достаточным пространством, чтобы не переваривать всю страницу при ее повороте (длина страницы/ширина не изменяется при вращении). Использование холста и webgl сделало бы вещи более гладкими.
Кроме того, для обработки любых тяжелых тиков (вычисление того, куда должны идти вещи, пути к путешествию и т.д.), Используйте веб-исполнителя, которому вы отправляете объекты (не публикуйте как json args). Используйте одиночные аргументы для отправки postMessage как объект). Таким образом, поток рендеринга не должен ждать, пока вычисления будут продолжать вращаться, и могут просто перемещать пути, чтобы перемещаться с элементами, когда это было сделано.
Кроме того, сохраняйте ссылки на свои объекты. не используйте повторно document.getElementById. используйте document.getElementById один раз и сохраните ссылку и передайте ее.
Вы можете попробовать другие библиотеки, которые были оптимизированы для домашних анимаций. Я вообще не работал с одним, поэтому я не могу сказать, есть ли значительное увеличение производительности, но все же они звучат многообещающе:
Я слышал хорошие вещи об этом: Velocity
