Плавная анимация на iPhone и iPad

[deepsweet]

КСС :(

[DmitryBaranovskiy]

Ага, и Ява-скрипт.

Откуда это берётся?

[homm]

Из индийского океана. А вот почему с большой буквы — не понятно.

[marcus]

Меня больше удивляет откуда взялось слово «таблицы» в Cascading Style Sheets ;-) А в технических статьях следует писать по-английски, это я погорячился.

[Stalker_RED]

да, лучше уж КТС

[Nutochka]

Просто и понятно. Кириллицей лучше не написать.

[Evengard]

ЦСС лучше

[Nutochka]

Но всё-равно неправильно. Правильно — «СиЭсЭс». Так зачем делать замечание, если сами пишем неправильно?

[romik]

Что интересно, на андроиде (тоже ведь WebKit) страничка JQuery с анимациями не тормозит.
А вот на вашем демо третий вариант (Animation based on translate3d with preset) действительно лучше остальных смотрится, может быть потому, что первые два варианта почему-то выделяются при клике, а третий — нет.

[marcus]

Как доберусь до андроида — обязательно его поковыряю. А как на нем вот эта галерея работает, не могли бы сказать? На айфоне жутко.

[romik]

Так себе работает, вместо плавной анимации видно около 5 кадров. Не уверен, считается ли это за «жутко» :-)

[jaleel]

на N1 все нормально.

[Gilberg]

Может мы с вами разными андройдами пользуемся? У меня лично страница с jquery тормозит(htc wildfire, android 2.2.1, webkit 3.1) — не так сильно, что бы вызывало трудности при просмотре, но достаточно, что бы раздражать.
В первом тесте(Animation examples for iPhone/iPad) первый пример двигается рывками, второй выглядит приятно, третий идет также как в обычном браузере
Второй тест провален полностью. Картинки открываются с задержкой(анимация не отрисовывается вовсе)

Но работа проделана отличная.

[Shirixae]

HTC HD2, 2.2, root, wk 3.1 — летает.

[romik]

Разными, у меня Desire — он побыстрее будет.

[xqz_me]

Что интересно, не тормозит она и на WP7. 5 кадров в секунду, иногда — больше, без «залипаний». А вот Ваши примеры не работают, видимо мобильный IE не достаточно html5.

[DmitryBaranovskiy]

Мобильный IE не достаточно webkit. Да и HTML5 тоже. Это всё-таки IE7+, даже не IE8.

[xqz_me]

Зато работает так быстро, что всё остальное ему можно простить. Пока страничка автора — первая встретившая мне, которую он отобразил некорректно.

[mchl]

я как раз разрабатываю анимацию сворачивания-разворачивания сложной страницы, перегруженной графикой, и должен сказать что обычный jquery slide тормозит не только на мобильниках, но иногда и на писюках, причем довольно мощных. в последних версиях браузеров (те что беты или еще не распространены) все конечно шикарно, но…
и пришли мои мысли к такому же решению, только вот пока руки не дошли попробовать
а есть ли что-то похожее для фф, даже в ксс3, его же держит частично и третья версия?

[marcus]

-moz-translateX и -moz-transition есть в FF4. В 3.6 нет transition, придется делать явой.

[Nutochka]

Скажите, а как с помощью Java сделать то, что описано в топике?

[Xao]

тут отдельная статья нужна

[Nutochka]

«Чем отличается Java от JavaScript»?

[akira]

translate3d использует аппаратное ускорение.

«We use webkit-transforms with translate3d because these animations will be hardware accelerated, and therefore significantly faster than changing the top value.»

code.google.com/intl/ru-RU/mobile/articles/webapp_fixed_ui.html

[rwz]

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

scripty2.com/

[termi]

Спасибо большое за ссылку. Очень интересная библиотека, но, к сожалению, не вполне production-ready.
Сожалею, но:

В Chrome загрузка одного ядра процессора держится постоянно на 100%
В Opera какие-то проблемы с динамическими CSS-свойствами :(

Библиотека интересная и можно многое почерпнуть, но пока остаюсь со своими велосипедами весом всего 8KiB

[mchl]

спасибо!