Ответы пользователя по тегу Анимация
  • В чем может быть проблема анимации на mac OS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Сразу бросается в глаза, что при скролле вы анимируете свойство top. При переходе между страницами в скриптах происходят постоянные обращения к свойствам inner*/outer*/offset*/client* (все минифицировано, не разобрать) а также изменения значений left, height и, возможно еще чего-то. Это все вызывает множественную перестройку макета страницы и проблемы с производительностью. Рекомендую почитать статью по теме.
    Ответ написан
  • С чего начать изучение webgl, чтобы сделать так?

    sfi0zy
    @sfi0zy Куратор тега JavaScript
    UI developer. Верстаю неверстаемое.
    Вся суть таких анимаций - много заранее заготовленных кадров, которые мы по очереди показываем. Чем больше кадров - тем плавнее анимация. Они могут быть в отдельных картинках или по много кадров в одной. На вашем сайте все это еще поделили - каждая часть бутылочки имеет свою последовательность кадров:
    Спойлер
    1ersu-v8gwpy6mxqyagwggfny0k.png

    Каких-то конкретных преимуществ этого подхода по сравнению с одним кадром на все я не вижу. Использовать ли для этого WebGL? Ну можно. Точно также, как и обычный canvas. Как выводить картинки на него вы легко загуглите, остается только посчитать координаты расположения кадров в картинке (по идее дизайнер должен их там аккуратно по сеточке расставлять) и выводить их по очереди.

    P.S.: По идее можно отрендерить видео и вместо ручного переключения кадров проматывать его в разные стороны с разной скоростью в зависимости от скролла. Но на практике что-то не видно, чтобы это массово делали, обычно используют именно отдельные кадры.
    Ответ написан
  • Как можно анимировать данные псевдоэллементы?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    С квадратом еще можно было бы пошаманить с градиентами, но "нарисовать" круг из одного псевдоэлемента на CSS не получится. Так что вам стоит смотреть в сторону SVG и анимирования свойства stroke-dashoffset. Почитать про это можно в статье.
    Ответ написан
  • Есть идеи как это реализовано?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Сама линия делается по вот такому принципу с помощью SVG:

    Появление иконок - так же. Заливка надписей с помощью линии - это прямо задача для SVG-масок. Дальше к этому прикручивается кастомный скролл, поскольку сайт нестандартный - проще руками его сделать, чем пытаться доделать какое-то стороннее решение. Плюс немного CSS-анимаций для всего остального. Дальше много абсолютного позиционирования чтобы это все подогнать. Как говорится, ябзаверстал.
    Ответ написан
  • Как сделать анимацию трансформирующую один элемент в другой?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

    По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:


    С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

    P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.
    Ответ написан
  • Что лучше использовать для анимаций css или js? И почему?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    но которую можно реализовать и с помощью css, и с помощью javascript...
    ваше мнение хотел услышать

    Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.

    В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.
    Ответ написан
  • Анимация пунктирной свг линии, возможно?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Можно поиграть с stroke-dasharray у этой линии (наводящий пример и статья вдогонку, чтобы понимать контекст).
    Ответ написан
  • Как сделать анимацию жидкости с помощью SVG?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Вот вам наглядный пример того, как все будет тормозить, вплоть до зависания страницы, если применить фильтры и все немного увеличить (и не говорите, что на вашем 12ядерномразогнанноммакпро не тормозит - у пользователя его не будет). Поэтому если выбор пал на SVG - анимируйте path, а потом заливайте его градиентом, как это и сделано на картинке. В простейшем виде можно сразу нарисовать десяток состояний каждой кляксы и последовать примерам из вот этой статьи.
    Ответ написан
  • Как обеспечить такую анимацию в CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    ...реализовать анимацию кнопок виджета по "траекториям"?


    Как сделать такую анимацию css?
    Ответ написан
  • Как сделать такую анимацию css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    На чистом CSS такое делать слишком долго. Проще взять связку SVG+JS. Рисуете для каждой точки path - путь, по которому она двигается, а затем на JS ее двигаете по этому пути. Есть много готовых решений, например вот простое демо на чистом JS, да и в библиотеках вроде anime.js есть такая функция.
    Ответ написан
  • Как анимировать SVG path через anime.js?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    проблема в том, что мне нужно рисовать сами буквы, а не их обводку, как это сделать?

    Вам нужно взять векторный графический редактор и нарисовать path`ы не по контуру ваших линий, образующих буквы, а вдоль них, по их середине (если относительно линии можно сказать "середина"), в том направлении, в котором буквы пишутся. Потом задать получившимся path`ам большое значение stroke-width и сделать то, что вы уже сделали с anime.js в вашем примере. Получится примерно то, что вы хотите увидеть. Также будет не лишним взглянуть на свойство stroke-linecap, чтобы добавить округлостей и сделать линию более естественной.

    PS.: Очевидная проблема такого подхода - сложно сделать именно такие скругления на краях букв, как вы нарисовали. Так что если вы хотите в браузере анимировать "рисование" того, что есть, единственный путь - анимация фона у уже имеющихся path-элементов. По сути нужно будет сделать все возможные фоны у каждой буквы по мере ее рисования. Начальный запрос в гугл - fill SVG path element with a background-image, дальше - CSS анимации. Это очень долго, сложно и будет сильно тормозить. В таком случае я бы склонился к тому, чтобы в Ae все нарисовать и гифкой вставить.
    Ответ написан
  • Анимация на css?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Как сделать на чистом css?

    Сергей говорит, что CSS не может отслеживать скролл и это действительно так. Его вариант решения задачи является общепринятым и я бы тоже использовал его. Но если вы хотите доказать, что у вас скилл CSS равен 95% - придется шаманить. Мысль следующая: если взять большой блок с кривым градиентом и аккуратно перекрыть его слоями, которые не будут скроллиться (position: sticky будет очень кстати), оставив небольшую видимую полоску, то можно получить занятный эффект зависимости содержимого полоски от этого самого скролла - codepen (будьте осторожны, проверено только в последних версиях хрома и ff). Понятно, что идея сырая, но если ее доработать, то можно будет запилить что-то похожее на вашу картинку.
    Ответ написан
  • Какую библиотеку для анимации вы используете постоянно?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    На постоянной основе - anime.js или делаю анимации на CSS, иногда использую D3.js.
    Ответ написан
  • Перебор с анимацией? Как сделать все стильно и останавливаться во время?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    Первый вариант вполне неплох. Максимум, что можно еще попробовать добавить - это легкое размыливание (буквально 1px) для текста, который сереет и уходит на задний план. Я бы на вашем месте доделал возможность адекватно перемещаться по странице с помощью tab (а то фокус куда-то улетает постоянно) и подумал, что делать с этой красотой на touch-устройствах (кнопка "читать дальше" под ховером - плохая идея с точки зрения удобства использования).
    Ответ написан
  • Как максимально хорошо научиться анимировать в Афтер Эффектс?

    sfi0zy
    @sfi0zy
    UI developer. Верстаю неверстаемое.
    Хочется анимировать свой макет, показав дизайнерские решения. Что можете сказать?

    (говорю с позиции человека, который потом все эти "решения" воплощает в жизнь): если вы будете что-то делать в After Effects, то должны будете сразу заказчику/начальнику сказать, что в реальной верстке это будет немного отличаться от нарисованного. А то потом начинается... Поскольку даже простые на первый взгляд штуки вроде этой или вот этой очень геморройно делать именно так, как их нарисовали. Так что для верстальщика может быть более чем достаточно покадровой схемы, нарисованной на бумаге с проставлеными размерами элементов. Насколько я видел, дизайнеры все равно с нее начинают.
    Ответ написан
  • Как зациклить несколько анимаций последовательно в CSS?

    sfi0zy
    @sfi0zy Куратор тега CSS
    UI developer. Верстаю неверстаемое.
    @keyframes red {
        0% { left: -100px; }
        50% { left: 110px; }
        100% { left: 110px; }
    } 
       
    @keyframes red2 {
        0% { left: -100px; }
        50% { left: -100px; }
        100% { left: 100px; }
    }


    Потом убираете animation-delay и добавляете inifinite вот туда:

    animation: red2 5s linear infinite;

    P.S.: лучше использовать transform: translateX(...), а не изменять значения left/right - вопрос производительности.
    Ответ написан