Не удается добиться плавной анимации JavaScript

Я пробовал много разных фреймворков javascript, таких как jquery, даже специфичных для анимации, таких как $fx, и я не могу достичь уровня плавности, которого хочу достичь.

Есть два примера анимации, которые я видел в последнее время, которые очень плавные, либо на компьютере, либо на iPhone и iPad.

http://beta.jolicloud.com/ и http://www.apple.com/iphone/

Как они достигают такой плавной анимации?

Я делал очень простые, такие как простой текст, идущий от поля сверху: от 100 до 500 пикселей с помощью jquery или $fx, и это нервно...


person user1135079    schedule 06.01.2012    source источник
comment
это обе анимации CSS3, а не JS   -  person Mark Kahn    schedule 07.01.2012
comment
Плавность анимации во многом зависит от эффективности движка браузера и скорости компьютера. Ни один из них не находится под вашим контролем как разработчика.   -  person Blazemonger    schedule 07.01.2012
comment
mblaze: ты должен сделать это ответом.   -  person Diodeus - James MacFarlane    schedule 07.01.2012
comment
Еще одним важным аспектом, на который следует обратить внимание, является качество изображения. Более высокое качество изображения обратно пропорционально производительности анимации.   -  person FK82    schedule 07.01.2012


Ответы (3)


Оба этих сайта используют переходы CSS и анимации CSS, которые более плавные, чем анимация JS (анимация CSS основана на ключевых кадрах и перемещается гораздо более плавно. Анимация JS по сути просто< /em> ключевые кадры похожи на покадровую анимацию, так что это более нервно)

person Ansel Santosa    schedule 06.01.2012

Используйте jquery easing со своим скриптом для плавной анимации. http://gsgd.co.uk/sandbox/jquery/easing/

person Mandeep Pasbola    schedule 06.01.2012

Найдите http://jquerymobile.com/ для оптимизации переходов для мобильных устройств,

Кроме того, найдите http://api.jquery.com/animate/, чтобы перейти из одного состояния в другое. .

Есть свойства продолжительности и замедления для вашей "плавности" :)

person Luc Laverdure    schedule 06.01.2012