Недостаточно плавная анимация

[Zverushka]

http://jsfiddle.net/hj2Yk/

Можно ли сделать плавнее?

[Veseloff]

Использовать более быстрый компьютер или браузер?

[Great Rash]

Можно попробовать подключить видео-ускоритель (GPU) к рендеру. В CSS это можно сделать добавив элементу следующие стили:

-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);

[Zverushka]

Использовать более быстрый компьютер или браузер?

 

Машина итак неплохая. gtx 660 amd fx 4100 8гигов оперативы. В браузерах везде подергивания.

 

Можно попробовать подключить видео-ускоритель (GPU)

 

Хм - http://jsfiddle.net/hj2Yk/1/ тормоза те же, но почему-то круг пропал. Почему?

[Great Rash]

...но почему-то круг пропал. Почему?

А у меня в хроме наоборот появился

Почему вы спрашиваете... ответ простой - W3C Working Draft, 26 November 2013. Т.е. это не рекомендации а всего-лишь черновик стандарта. А это значит две вещи: первая - спека может в любой момент измениться, вторая - реализация фичи в разных браузерах может сильно отличаться. Кстати это не только к 3D-трансформациям относится.

Вывод: на продакшене вы юзаете эту фичу на свой страх и риск.

[Zverushka]

@Great Rash, а где у тебя не было круга? В первом варианте моем вместо круга квадрат?

[Great Rash]

В первом. Да в вашем варианте вместо круга квадрат был. Chrome, Версия 33.0.1750.117 m

[Zverushka]

А операционная система какая? У меня виндвос 8.1.

У меня тоже Версия 33.0.1750.117 m

 

Блин, можешь показать скриншот? Я не хочу в это верить =/... Я спецом анимацию с background position изменила на 2 слоя, нашла информацию, что так плавнее.

 

http://jsfiddle.net/hj2Yk/2/ - так круг?...

Edited February 28, 2014 by Zverushka

[Great Rash]

А операционная система какая?

Win 7 Professional

 

Блин, можешь показать скриншот? Я не хочу в это верить =/...

Наздоровье - http://hkar.ru/qa0L (грузиться долго будет, я зачем-то в png сохранил - 180 килобайт)

http://jsfiddle.net/hj2Yk/2/ - так круг?...

Ага, так круг.

[npofopr]

http://jsfiddle.net/hj2Yk/ - квадрат 

http://jsfiddle.net/hj2Yk/2/ - круг.

Тоже 8.1 Хром.

И в круге сильнее дергается)

[Zverushka]

Нда... Меня просто поражает как в одних и тех же браузерах но в разных ОС может отображаться все настолько по-разному!

[npofopr]

И да. У меня даже Версия 35.0.1862.2 dev-m

Винда обновленная)

[Zverushka]

Вот так совсем сильно тормозит?

http://jsfiddle.net/hj2Yk/3/

Хуже, чем с  top: анимацией или также?

Edited February 28, 2014 by Zverushka

[npofopr]

также

[Zverushka]

Беда...

Что же посоветуете?

[Great Rash]

Что же посоветуете?

1) забить

2) переделать на canvas

3) переделать на SVG (Raphael)

[Switch74]

квадрат анимация плавная

круг анимация не плавная

 

я бы посоветовал canvas должно быть попроще в плане обработки

[Zverushka]

Ммм, не совсем понимаю как канвас или свг связаны с анимацией?...

Можете привести пример?

[Great Rash]

Вот пример анимации на канвасе - http://sheepeuh.com/rain/

Вот еще - http://christmasexperiments.com/2013/23/

[Switch74]

опять я не успел
хорошие примерчики 

[Zverushka]

А при чем тут api webgl? Мне хром не дал загрузить - блокирует это.

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

Канвас же чисто рисует объекты, а анимация идет через javascript или как-то по-другому?

 

И не совсем понятно про свг - это же вроде как вообще статичный рисунок, который создается в формате свг средствами браузерами, при чем тут анимация? Хотя помню анимацию свг, но она шла по средством css - то есть это была в первую очередь css анимация.

 

Может я много прошу - но не могли бы вы написать код для кружка (я то уже все загрузила на готовый сайт), но мне просто интересно как это? Ведь задача тривиальная и по идее код для нее займет 5-10 минут. Я просто совсем не могу вникнуть, ну как этот "хеллоу ворд" сделать?

[Switch74]

canvas - контейнер в котором можно рисовать по средством js этим же js можно и анимировать, то, что нарисовано. Да вы правы, кода получается прилично, но эффекты интересные

предлагаю почитать http://habrahabr.ru/post/111308/, написать пример к сожалению нет времени

[Great Rash]

Второй пример сделан на бесплатном фреймворке под названием pixi.js (отсюда тонны кода). Тут туториал по быстрому старту. Ну и читайте документацию.

[Zverushka]

Если канвас и свг анимируются на javascript, то в чем разница между обычной джаваскрипт анимацией? Ведь можно также сделать анимацию на jqueryUI для простых слоев (ui плавнее эффекты есть, чем из обычного Jquery).

Edited March 3, 2014 by Zverushka

[Great Rash]

Анимация в jQuery оперирует CSS-свойствами DOM-нод. Когда у ноды меняется стиль это вызывает перерендер страницы. При постоянной перерисовке страницы (пока длится анимация) начинаются тормоза. При рисовании на канвасе перерендер происходит только внутри канваса, а не на всей странице поскольку свойства DOM-нод не меняются, а меняются только данные об изображении. Плюс в pixi есть алгоритм определения поддержки 3D-ускорения, т.е. если браузер поддерживает рендер с видеокарты, то будет задействована видеокарта. Поэтому анимация на канвасе должна быть быстрее анимации в jQuery.

[Libiros]

Решил внести свой вклад.

 

Получается, что за 7 секунд объект должен пройти 30px. Почему он проходит равные расстояния за слишком короткое время (что вызывает иллюзию торможения/дергания) я не знаю, т.к. не углублялся в прорисовку. Но есть смысл уменьшить время до 3 секунд.

 

Однако если уменьшать время нельзя и оно должно быть ровно 7 секунд. Тогда проблему возможно решить только увеличением расстояния, которое должен пройти объект. Путем нехитрых вычислений мои экстремумы равны 35px. (При 10px идеальная анимация производится в 2 секунды, но можно поставить и 3)

@-webkit-keyframes circle-move {  0% {    -webkit-transform: translateY(0);    transform: translateY(0);  }  25% {    -webkit-transform: translateY(-35px);    transform: translateY(-35px);  }  75% {    -webkit-transform: translateY(35px);    transform: translateY(35px);  }  100% {    -webkit-transform: translateY(0);    transform: translateY(0);  }}

Но тогда не подходит картинка (слишком мала). Но это можно решить, увеличив картинку или изменив ее. Скажем, увеличить невидимую часть картинки, а видимую оставить прежней. Тогда проблема решится очень просто.

 

Как здесь недостатки?

 

Придется увеличивать или вообще изменять картинку с оригинальной, это не всегда хорошо.

 

Какие достоинства?

 

Не нужно писать лишние .js, jquery скрипты. Не нужно не то, чтобы использовать, а даже употреблять такие слова как webgl, 3d-ускорение и прочее.

 

Я бы решил эту проблему именно увеличением в размерах основной картинки и небольшим изменением видимой ее части.

Edited March 3, 2014 by Libiros