У меня здесь скользящий контент.

http://www.smallsharptools.com/downloads/jQuery/Slider/slider.html

Структура HTML проста. Существует внешний блок с фиксированной высотой и шириной, для которого задано значение скрытого переполнения. Затем есть внутренний контейнер с шириной, равной полной ширине содержимого внутри него, который представляет собой серию элементов div, отмеченных классом Item.

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

Мой вопрос: было бы более плавно, если бы я использовал другую технику, чтобы перемещать его вперед и назад? Будет ли абсолютное позиционирование более плавным или есть еще кое-что, что мне следует рассмотреть? Есть ли какие-то секреты плавной анимации, которых я просто еще не знаю?

10
Brennan 6 Май 2009 в 04:22

2 ответа

Лучший ответ

Маржа приведет к пересчету других элементов, потому что поле элемента влияет на положение других элементов вокруг него.

Абсолютное позиционирование (на собственном zIndex) все равно вызовет перерисовку других элементов, но будет менее затратным с точки зрения расчета объектов вокруг него.

Этот доклад дает хорошее представление о том, как работают внутренние компоненты браузера / dom.

http://www.youtube.com/watch?v=a2_6bGNZ7bA&feature=channel_page

7
Diodeus - James MacFarlane 6 Май 2009 в 02:52

У меня были хорошие результаты при использовании подключаемого модуля jQuery "Easing", документации здесь.

Это позволяет применять к элементу html различные сглаженные движения, такие как синус, отскок, упругость, ускорение и т. Д.

Он использует те же методы, которые вы упоминаете под капотом, но он позаботится о беспорядочном абсолютном / относительном позиционировании за вас. Он также кроссбраузерен и был оптимизирован для новых версий.

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

4
Ash 6 Май 2009 в 00:51