2013-04-05 4 views

ответ

1

@IMUXIxD Вы задаете действительно хороший вопрос, и ответ: нет, вы не должны аппаратно ускорять все, что может показаться, решить проблему, но на самом деле может вызвать несколько других проблем. Это также может вызывать странные проблемы с отображением, когда вы пытаетесь z-index items, поскольку аппаратный ускоряющий объект имеет тенденцию удалять их из DOM во время анимации.

Я написал обширную статью о моих пониманиях и тестах с аппаратным ускорением здесь http://blog.zindustriesonline.com/gpu-accelerated-animations-and-composite-layering/ у него также есть очень хорошее видео по этому вопросу от Мэтта Сили, инженера Netflix.

Надеюсь, это поможет вам лучше понять преимущества и недостатки использования аппаратного ускорения и наилучшие сценарии использования для использования.

+0

Так что используйте только 'transform: translate3d (0, 0, 0);' на элементах я буду анимировать? Как насчет элементов, которые я просто угасаю или сползаю? – IMUXIxD

+0

Fading не требует никакого 3D-ускорения вообще, так как скольжение идет, вам придется поиграть с тем, какие свойства лучше всего подходят для вас. Как только вы укажете translate3d, движок предполагает, что вы точно знаете, как вы хотите его обрабатывать, и бросает его на колени, если вы просто используете translateX или translateY, браузер достаточно умен, что он все равно будет управлять большой анимацией и перерисовывать. – Zanderi

+0

Проблема заключается в сложном слое, чем больше вы вынуждаете браузер перекрашивать, тем хуже становится производительность. В идеале вы хотите, чтобы наименьшее количество перерисовки было тем, что все эти цифры указаны в моем блоге. Для этого вы можете использовать другое свойство I.E. вам может понадобиться анимировать поле вместо translateX. Когда вы начнете играть с этими свойствами, вы заметите самые большие изменения на мобильных и планшетных устройствах. Иногда вам придется игнорировать эти правила, чтобы сделать функцию анимации в браузере webkit; в первую очередь браузеры для Android, а не хром/сафари – Zanderi

Смежные вопросы