Как заанимировать фоновый градиент, что бы процессор не загрузило на 80+%?

Question

[Stepan S.]

Базовый шаблон: codepen.io/miloslovesky/pen/qdzGjB
Анимация на CSS: codepen.io/miloslovesky/pen/rVEgwP (грузит процессор)

Задача: что бы градиент двигался в одну сторону бесконечное количество раз и не грузил процессор

Comments

[Сергей Сергей]

картинку вращать?

[Stepan S.]

Сергей Сергей: это как-то не гибко

[gleendo]

Stepan Miloslavsky: А в каком контексте вы будете использовать такую анимацию градиента?

[Сергей Сергей]

Stepan Miloslavsky: ну как бы, баланс соблюдается: "гибко и энергоёмко" или "по-деревянному"; все просто. Да и картинку можно SVG ведь, будет "упруго".

[Stepan S.]

con_: В контексте фона сайта

[Stepan S.]

Сергей Сергей: я попробую, но откуда уверенность, что картинкой будет лучше?

[Stepan S.]

Сергей Сергей: Попробовал. С SVG даже анимацию не тенят, всё рывками

[Сергей Сергей]

Stepan Miloslavsky:
В давние времена, когда процессоры были одноядерными, а всякое видео собиралось вручную нарезкой и склейкой пленки, люди лишь мечтали об анимации на компьютерах. Шло время, технологии улучшались, анимация красивела, процессоры учились считать быстро. Но потом ученые умы придумали графический интерфейс, манипулятор "мышь", ИНТЕРНЕТ. Сначала научились рисовать текст красивыми шрифтами на каком-нибудь фоне, потом явились требующие постоянного пересчета Каскадные Списки Стилей и джаваскрипт. И к нашему времени браузеры стали отъедать столько ресурсов, сколько нет на космических кораблях прошлого века.
А дизайнеры? дизайнеры требуют красот!
И лепят инженеры-программисты браузерщики алгоритмы, которые впору писать системным программистам-драйверщикам. И тужатся процессоры под натиском инструкций, которые не параллелятся, которые считают одно и тоже, которые не могут в аппаратный ММХ. И все новомодные анимационные штучки в КСС заставляют процессор потеть. А применение вычисляемого градиента, да еще в анимации совсем тяжко.

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

[Stepan S.]

Сергей Сергей: Понадеемся на хорошее решение задачи, в рамках сегодняшнего дня

Answer 1

[Nikolay Talanov]

codepen.io/suez/pen/fbdd6928c67a3a7208c783baeed626a1 - что-то такое подходит? У меня загруженность проца на уровне 11% показывает, с вашим примером 65%.
Только это дело еще надо будет отпрофилировать с контентом поверх бэкграунда. Возможно придется заменить translate3d на обычный translateX, если отдельный слой столь большого размера будет слишком сильно влиять на производительность (в чем я сомневаюсь).

Comments

[Stepan S.]

У вас он вправо-влево ездит. А надо в одну строну

Answer 2

[Александр Таратин]

Переписать на webgl шейдер. Для отрисовки квадрата на весь экран даже движков не понадобиться подключать.