Анимация фона

[Vlad]

Сделал вот такой пример. Почему-то время движения субъективно различается в браузерах. В хроме быстрее, в IE и Firefox медленнее. Почему так может быть?

 

http://jsfiddle.net/04yvqa25/

 

Если движения сразу не видно, надо чуток подождать.

[satantx]

Сам и ответил на вопрос: потому что разные браузеры. Например, на слабом компьютере такая анимация медленней идёт на хроме, нежели в Firefox. Т.е. всё зависит от браузера и самого компьютера. Постоянно с этим на работе сталкиваюсь, когда менеджер говорит, анимация слайдера очень медленная, хотя у меня "летает", просто у нее слабый комп и другой браузер.

[afdw]

По идее, скорость работы компьютера должна влиять на FPS, а не на продолжительность анимации.

[Sergik+]

Интересно если скорость анимации 1 секунда как она может быть быстрее или медленей ?

Вопрос не совсем корректен, скорее как выше написано фпс страдает а не скорость никак,

сколько анимашек не делал не замечал разницы.

[Switch74]

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

Например ИЕ и Фаерфокс как правило подтормаживали, по сравнению с Хромом и Оперой

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

[Sergik+]

Если это так то это самый бредовый алгоритм какой только можно было придумать.

[Switch74]

здесь больше не от алгоритма зависит, а от языка и системы, представьте что вам нужно переместить плавно один объект из точки А в точку Б (естесно что делаем все это на JS, который однопоточный и в браузере, который дает приоритет на не свернутую активную вкладку)

вариантов алгоритмов может быть много, но почти везде смысл в следующем:

у нас есть 1сек=1000мс на анимацию и расстояние между точками А и Б в 1000px

логично каждую 1мс менять положение передвигаемого объекта на 1px или например каждые 10мс на 10px (получится разная степерь плавности передвижения), но не забываем, что у нас на выполнение одного действия (перерисовки объекта по другим координатам) затрачивается определенное время, которое рассчитать практически не реально, т.к. на него влияет: производительность системы, способы браузера вывода на экран информации, работа других скриптов (т.к. они тоже будут требовать ресурсы компьютера и не забываем, что js однопоточный).

Как вариант можно делать расчеты во время анимации (сколько времени прошло с последнего действия и сколько его осталось), но на это так же будет уходить время что может привести к банальному мгновенному перемещению объекта из точки А в точку Б, но зато за время приближенное к 1сек.

[Sergik+]

Я могу конечно заблуждаться но насколько я знаю css анимация никак с js не связана

(отсюда как раз заблуждение что она быстрее). Последний месяц упорно занимаюсь

изучением анимации в том числе svg и очень интересует мнение форумчан.

Хотя если использовать gsap думаю там таких проблем не будет.

Кстати многие вещи попросту не сделать с помощью css анимации.

Edited March 9, 2015 by Sergik+

[Switch74]

аа... сорри, что-то меня на js анимацию переключило

[Vlad]

Мне почему-то кажется, что дело не в скорости обработки, шары движутся примерно одинаково, а в том, что исходные координаты различаются, в одном браузере путь длиннее выходит.

[Sergik+]

Мне почему-то кажется, что дело не в скорости обработки, шары движутся примерно одинаково, а в том, что исходные координаты различаются, в одном браузере путь длиннее выходит.

Там другая известная проблема, разная скорость загрузки в gpu в различных браузерах

(по простому задержка первоначальная при загрузке).

 

Придумал как проверить теорию, пишем небольшой скриптик который запускает анимацию

в определенное время и вуаля пускаем скрипт в 3-4 браузерах и будет сразу видно есть ли

разница.

Edited March 9, 2015 by Sergik+

[SelenIT]

 

-webkit-animation: ball 40s linear infinite;

    animation: ball 240s linear infinite;

и с координатами в @-webkit-keyframes и @keyframes значения для двух фонов перепутаны местами... тест на внимательность?

[Vlad]

Блин, а мы тут спорим, думаем, почему различается. И тут пришёл Илья и всё объяснил.

[afdw]

[SelenIT]

Заодно получили еще одно доказательство, что ручная/предварительная расстановка префиксов — зло. Слава роботам типа Автопрефиксера!