Как написать плавную веб-анимацию | ускоряем веб-анимацию | CSS + JS

[@deniskotov]

Офигеть. Я в восторге. Это максимально полезное видео. Спасибо🙏💕

[@michaelkamko]

Красавица и умничка❤))

[@webelart]

❤❤❤

[@mind150]

Кайф спасибо)))) Ждем какие-нибудь интересные кейсы анимаций, паттерны и что-то еще интересное!

[@_Froger_]

Полезная инфа, спасибо

[@Максим-ъ4ъ3ж]

Класс 🤤

[@kosha9951]

Спасибо за видео! Сразу исправила в своем проекте анимацию)

[@sergeys4732]

Было бы неплохо рассказать про composition, как происходит вынос на отдельный слой

[@space8143]

Молодец. Полезная информация!

[@gritsienkooleg3447]

Спасибо, полезнО!! Очень )

[@dimape.4180]

Спасибо!

[@egoist2956]

Лайк!

[@СергейСульженко-ф9я]

Спасибо, очень познавательно

[@Mike37373]

у вас есть видео где display:none на чистом js анимируется ? при клике на чтото, появляется и исчезает квадратик например. в интернете есть подобное, но там если быстро нажимать плавность пропадает

[@AlexandraKapit]

Cпасибо, за хаки с GPU!

[@webelart]

😘❤️

[@Владимир.П-е9о]

6:06 а это не совсем правда, все зависит от частоты развертки монитора и установок браузера. В хроме, например, на 144Гц мониторе так и будет 144 кадра в секунду, а следовательно функция raf тоже выполняется 144 раза. Это стоит учитывать, если скорость анимации зависит от числа прошедших кадров. 10:34 понимаю, что background-color просто для примера, но просто замечу, что все его задачи решаются через анимацию opacity какого-то отдельного дива залитым цветом. Кстати даже box-shadow через opacity будет круче, но при условии, что таких элементов на странице будет мало, а то даже невидимые элементы с box-shadow потребляют ресурсы. 13:37 про will-change, его лучше все таки использовать только в том случае, если действительно наблюдается на бенчмарках повышение производительности, иначе неправильное его использование сделает только хуже. Например, чтобы правильно его использовать, нужно добавлять это свойство не изначально, а за некоторое время до старта анимации (например, по ховеру, если анимация будет после клика. На тачах нет ховера, просто как пример), когда уверены, что анимация конкретного одного элемента точно будет. Если добавить по умолчанию, есть риск, что таких элементов будет много, да и браузер зря выделит ресурсы элементу, который не факт что будет анимироваться (про это вы добавили в конце). Я не придираюсь, просто решил дополнить :) Вы очень крутую тему поднимаете, спасибо большое! Очень мало фронтендеров заморачиваются по поводу плавности анимации, вешают transition: width и в путь. Анимации в вебе очень крутая задача для мозга, когда нужно с одной лишь парой transform+opacity реализовать сложные переходы. Привет от почти уже бывшего яндексоида бывшему яндексоиду :)

[@webelart]

1. По первому, что скажете относительно показателя fps в браузере у которого максимальное значение 60 кадров? Выше ни разу не видела. Следовательно и частота кадров в браузере не может превышать это значение. Либо вы не про браузер? 2. Opacity классное свойство. Но background-color тоже иногда нужен, как вы через opacity цвет с красного на зелёный поменяете? 3. Да will-change лучше использовать когда действительно активная анимация. Однако ваши примеры, что добавлять после клика, здесь вопрос почему? И есть ли доказательства из практики как влияло и как помогло? Привет, привет!! 😘

[@Владимир.П-е9о]

@@webelart 1) Решил перепроверить себя, и вот пруф) У меня 144Гц habrastorage.org/webt/rm/9z/ov/rm9zovbaa-0029ag9fl-erhknx4.png скрин сделан в хроме на винде, но на маке в хроме такой же результат я получал. Вот не уверен про сафари, надо будет проверить после отпуска. 2) Во, собрал демку codepen.io/VladIT4/pen/bGLEOpx визуально разницы нет, т.к. тот же самый принцип интерполяции цвета. Но если цветов больше чем 2, будут сложности. Есть недостаток - дополнительный элемент, об этом надо помнить, если кнопок с такой анимацией много на странице. 3) Наверное, примеров из практики у меня нет, мне ни разу не удалось его правильно заставить работать. И даже хуже, мои тезисы основаны на спецификации drafts.csswg.org/css-will-change/#give-time которая не факт что отражает действительное поведение в браузерах. т.е. я клоню к тому, что это свойство как черный ящик с некоторыми теоретическими рекомендациями, которые могут не работать в разных браузерах. Поэтому, если и использовать его, то после честного бенчмарка. Но если повесть его всего на один элемент на странице, думаю не страшно.

[@webelart]

@@Владимир.П-е9о 1. Офигеть, я даже не знаю где на маке эти гц увидеть в основных настройках только базовая информация. Ну и процессор M1 у меня. Про то, что может быть 144гц для меня это новое. 2. В демке вы по факту кладёте два элемента один с основным цветом, другой псевдо и сменяете. Мне нравится как анимация с opacity выглядит, даже взглядом заметно. Но да я поняла, не везде это можно сделать + даже если текст можно продублировать (допустим кнопка, то с иконками будет сложнее.) В общем интересный подход. Спасибо! По третьему - ок.

[@webelart]

​@@Владимир.П-е9о Интересная тема ещё сколько кадров может воспринять человеческий глаз. И если даже комп позволяет больше, то нужно ли это.. Есть пороги что 48 кадров более чем достаточно. Однако есть индивидуальные особенности зрения и максимумы с кадрами это где-то 100-150, но даже сложно представить сколько там деталей будет в этой анимации и действительно ли нужно к этому стремиться... Хотелось бы посмотреть сравнение 24, 60, 100 каких нибудь примеров. Взять пример для сравнения, 24 и 60 довольно круто уже. kzbin.info/www/bejne/b5m5dpSNZd57n9k На фильме и кол-ве деталей у меня даже голова кружится начинает :D

[@Владимир.П-е9о]

@@webelart 1) А нужно, чтобы монитор поддерживал выше частоту развертки. Вот скрин с моими мониторами, слева от ноутбука, справа внешний habrastorage.org/webt/82/td/nb/82tdnbh5zpaoe66d8llyfozint8.png монитор ноутбука только 60Гц рисует. 2) А там даже с иконками ок, при условии что подложка будет позади иконки svg. Если иконка фоном у кнопки, то да, придется еще элемент создавать для иконки. Способ не беспроблемный, это правда. Не всегда нужно заморачиваться.

[@hairy_nose]

Жаль не было примеров(

[@webelart]

Какие примеры были бы интересны для текущего видео?

[@ПавелМинич]

@@webelart Например, наглядно показать разницу в производительности при использовании разных способов анимации. Спасибо за полезный контент!

[@СергейМаркелов-м7м]

А подскажи, пожалуйста, правда ли, что при анимации через js лучше анимировать значение css переменной, чем непосредственно element.style.property = `${value}` ?

[@webelart]

css переменный - это те которые используются непосредственно в css файле? Ого, мне кажется я только с вашим комментарием узнала, что можно изменять через js css переменные. Выглядит интересно. Но ответить не смогу на вопрос. Текущие анимации пишу с изменением element.style.property. Ваше предложение нужно тестировать :))

[@Goodbish]

@@webelart Насколько я знаю, через js менять правила css нельзя. Через js можно давать новые свойства, вставляя в сам элемент или вставлять в элемент класс с нужными свойствами. Обычно всегда можно обойтись этими путями

[@AlekseyNaumov_734]

В мультипликации используют 12 картинок в секунду. Просто каждую картинку повторяют 2 раза.

[@ЕгорГречкинг]

Хороший канал. Кажется у вас раньше был другой. Вроде смотрел там ролики про git на несколько часов, а может мне кажется.

[@webelart]

Спасибо! Это мой первый канал на ютубе, про git точно не я рассказывала :)

[@nikitasafonkin3077]

нехватка ссылки на бесплатную скачку книги )

[@webelart]

Любой труд всегда лучше оплачивать. Это как обмен энергией. ❤️ Вы же любите за свою работу деньги получать? 😉 Ссылка на книгу на Амазоне goo.su/bkPH, там же есть и веб-версия. Относительно России и русского варианта книги, погуглите. С англ версией проще, в Гугл книжках можно купить, погуглите в общем.

[@agilkerimov]

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

[@webelart]

Следующее видео я выпускала с большим кол-вом практики kzbin.info/www/bejne/eovcn4Rjhr6GgLc ❤️

[@agilkerimov]

@@webelart отлично, спасибо за отклик. Так правда интересно и материалы усваиваются на порядок лучше. Удачи.