Ищу инструмент который может генерировать нужные ускорения и тайминги для web-анимаций

Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті

Добрый день.

Сразу говорю Adobe Edge Animate CC, Hype for Mac, Web Designer от google, AI2Canvas и т.д. — не подходят.
Т.к. они генерируют ключевые кадры для анимируемого объекта между начальным и конечным состояниями, с одной из предустановленных временных функций. Да, некоторые могут сгенерировать анимируемый путь по кривой Безье, но это всё не то.

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

Что я имею ввиду. Часто бывает что в голове чётко представляешь себе нужное ускорение/замедление, без проблем можешь его воспроизвести жестом, но как начинаешь подбирать это цифрами — может уйти до пары дней, и всё-равно результат неудовлетворительный.

В идеале я ищу нечто такое:
— есть некая зона с объектом внутри;
— я нажимаю допустим пробел и включается запись;
— мышкой захватываю объект и делаю рукой нужное мне ускорение этого объекта как бы в реальном времени;
— отпускаю пробел — запись заканчивается;
— на выходе генерируется файл с нужными мне функциями, изингами, задержками, безье и т.д., код которых я уже могу использовать в своём проекте.

— а если оно ещё запомнит и путь перемещаемого объекта — то вообще красота, но это не так важно, как сами ускорения.

— результирующий код может быть хоть в css, хоть в js — я уже там разберусь что конкретно мне нужно вытащить и как это использовать.

Подскажите, пожалуйста, есть ли в природе что-то подобное? Может не обязательно в таком виде, может это быть вообще другой какой-то инструмент для других задач, главное чтоб одним из «побочных» действий этого инструмента была возможность вытащить нужные мне данные по ускорениям/замедлениям.

Спасибо!

👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Сделал небольшой «ресёрч», может кому интересно будет..))

Вобщем, на самом деле я не совсем точно сформулировал свою просьбу в топике. Т.к. в итоге хотел использовать именно и только css-анимации, надеясь вытащить нужные мне данные из инструмента который я ищу.
И как и ожидалось, я не до конца раскурил кривые Безье в css.. оказалось в стилях можно описать кривую Безье только кубическую (третьего порядка), я же почему-то думал что там можно описать любую «волнистую жесть» и оно мне всё воспроизведёт.

Соответственно из-за этого фундаментального незнания искал не там. Вобщем, начал копать дальше и нашёл отличную статью, где человек в конце в пяти шагах сформулировал именно то что нужно medium.com/...s-79225c1d767e#.ec31ljd23

Итого, мифический инструмент (пусть будет toolX), который я искал должен был уметь делать следующее:

1) * допустим с помощью того же greensock.com/customease рисуем нужную кривую и скармливаем её toolX;
2) toolX анализирует график и разбивает его на ключевые @keyframes (по минимальным и максимальным точкам по оси Y — экстремумы в математике если я не ошибаюсь);
3) между этими кадрами берёт кусок кривой и уже по ней строит кривую Безье третьего порядка для каждого ключевого кадра;
4) на выходе выдаёт готовый css;

* - в идеале, чтоб можно было включить некий таймлайн для записи, а мышкой водишь только вверх-вниз, при этом рисуется кривая в реальном времени (автоматом сглаживая дёрганья руки и другие погрешности)

неплохая идея для стартап.. велосипеда, надо будет попробовать запилить (подозреваю математики будет много..))

Кароче, как и писали ранее, что не стоит заморачиваться и на самом деле нужных-популярных паттернов для простых анимаций не так уж и много, и все их можно брать например на таких сервисах www.theappguruz.com/...-tools/web/CSSAnimations

PS в процессе гугления было найдено несколько интересных вещей:
cssanimate.com
vimeo.com/185587462
jeremyckahn.github.io/stylie — с багами

www.apetrus.com/animdemo/index.html — посмотреть как строятся функции изингов. меняя параметры можно подбирать свое
timotheegroleau.com/...ng_function_generator.htm — сделан на флеше и для флеша (его некоторых фреймфорков) но можно интерполировать
clockmaker.jp/...2010/06/easing-generator — то же, что и предыдущее но интерфейс поудобнее и кривую руками можно перетаскивать (нужен Adobe AIR).
matthewlein.com/ceaser какой то css генератор но кривую можно только по краям изменять.
robertpenner.com/easing — функциии изинга
greensock.com/customease — смотрим видео
ну и поиск по «easing generator/custom»

Некоторое знал давно, а некоторые ссылки просто ВАУ для меня! Поковыряю после нового года. Спасибо большое!

а если оно ещё запомнит и путь перемещаемого объекта — то вообще красота, но это не так важно, как сами ускорения
Такое под мышь не делают, потому что мышь слишком неточный инструмент ввода для таких задач. Откройте любой графический редактор, выберите кисть, и попробуйте нарисовать красивую дугу. Выйдет криво в любом случае.

Пусть автоматом сглаживает..)) а степень сглаживания регулировать в настройках)

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

IMHO то что тебе надо — так это разработать несколько привычных шаблонов, и втупую их копипастить. Поверь, их будет совсем немного: линейное движение, пара кривых безье, ну и градация по таймингам. Если ты собираешься скормить это браузеру, то ограничься точками 0%,50% — этого вполне достаточно.

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

Мой совет — просто сделай себе панель инструментов, где будешь менять эти свойства динамически, то есть тупо вбивая цифру и подбирая. Либо же скрипт чтобы без перезагрузки переподхватывал нужный CSS, где будешь писать фрагмент над которым в текущий момент работаешь — и повесь на кнопку. Написал цифру — тыц кнопку — работает. Понравилось — правишь дальше, не понравилось — прикинул насколько не понравилось, применил — и вуаля.
Да, это велосипед. Но искать существующий IMHO будет дольше, просто потому что анимацией лучше не злоупотреблядь, а значит вряд ли такое автоматизировали. Разве только в играх, но там свои технологии, свои фреймворки.

— это может быть не обязательно веб-морда) браузер понятное дело врятли точно отследить все.

— шаблоны есть, в основном выдираю отсюда www.justinaguilar.com/animations/index.html и правлю под себя

— с путями вообще не сложно, тем более есть инструменты.

Мой совет — просто сделай себе панель инструментов, где будешь менять эти свойства динамически, то есть тупо вбивая цифру и подбирая. Либо же скрипт чтобы без перезагрузки переподхватывал нужный CSS, где будешь писать фрагмент над которым в текущий момент работаешь — и повесь на кнопку. Написал цифру — тыц кнопку — работает. Понравилось — правишь дальше, не понравилось — прикинул насколько не понравилось, применил — и вуаля.
— этим собственно и занимаюсь — ПОДБИРАНИЕМ цифр, чего и хотелось бы исбежать.
Банально, чтоб подобрать пульсирующую анимацию стрелки вниз (та которая указывает чтоб скролили вниз), потратил на подбор несколько часов в несколько заходов, надоело:

стрелка{
animation: arrowMove 7s infinite linear;
}

@keyframes arrowMove {
0%, 6%, 12%, 100% {
transform: translateY(0px);
}
3%, 9% {
transform: translateY(10px);
}
}

Нашёл один урок по Adobe After Effects www.youtube.com/watch?v=pujBtRxvKEg
вот хотелось бы такое колебание смоделировать мышкой — а оно бы мне выдало все ключевые кадры и изинги..))
Там в комментах посоветовали некий Graph editor - может это то что нужно?

Несколько ЧАСОВ? В одном окошке исправил, в другом ткнул обновить, счастье есть. Как по мне, так просто не разобрался с кривыми Безье, вот пытаешься подобрать linear. Практически всё мигающее, особенно дышащее — это кривые Безье.

Кстати, рекомендую не 7s, а 6s. Тогда с большей вероятностью частота приближается к частоте дыхания, и элемент оказывает гипнотизирующий эффект.

На стрелке, я так понимаю, она делает 2 прыжка вниз и замирает вверху? Мне кажется, не прав, замирание нужно в конечной точке, то есть нижней если это скролл вниз. К тому же такая анимация — чересчур агрессивна для такого нецелевого действия, как проскролить, имеет смысл разве только если это какое-то обучение в игре. Такую агрессию обычно только кнопке «купить» можно делать, и то не каждой, а там где есть способ быстро убедить купить сейчас. Попробуй у примеру анимировать не только положение, но и прозрачность. То есть чтобы кнопка мягко возникала, падала вниз и там тухла. Так проще и естественнее, не будет раздражать, особенно если максимальную opacity поставишь не более 0.9 — это позволит не заморачиваться с гарантированным местом под неё, а рисовать прямо по контенту.

PS. Ради теста сделай себе пустую html-страницу тупо с текстом типа LoremIpsum, и сделай её локально. То есть чтобы ни от каких серверов не зависела и очень быстро перезагружалась как файл, и подхватывала твой локальный файл со стилями. Положи её прямо в проект, просто исключи из конечной сборки.

Даже F5 не тыкал, browser-sync сам делает)
утрирую конечно на счёт несколько часов, просто несколько заходов было (мож полтора часа в сумме с учётом поиска иконки, её кастомизации и моей прокрастинации)

что касается агрессии у данной анимации, то я не весь код привёл. Про анимацию прозрачности в яблочко — она там тоже присутствует.)) К тому же стоит задержка в пять сек, т.е. эту стрелку пользователь увидит через пять сек после загрузки страницы (если по каким-то причинам «фтыкает» на первом экране дольше.). Также сама двойная пульсация происходит в течении примерно .8s, при этом длительность всей анимации равна 7s, соответственно стрелка замирает на 6.2s — более чем достаточно чтоб не напрягать (т.к. более пяти секунд на первом экране делать особо нечего — там имиджевая функция).

И именно на этот момент ушло много времени — т.е. прикинуть что длительность всей анимации составляет 7s, что равно 100%, и потом руками подбирать оставшиеся проценты, чтоб пульсация была только в начале и не напряжной.

И вот совет — поменять общую длительность на 6s — опять же это всё потянет за собой перерасчёт процентов ключевых кадров, чего я собственно и пытаюсь избежать (т.е. найти что-то что смогло бы это делать за меня). Понятно что в данном случае можно быстро подобрать, но при более сложных сценариях — в уме много просчитывать и прикидывать придётся.

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

Недостаточно наработанных шаблонов. Их не так и много нужно, оно всё примитивное. Едва ли больше 5 штук наберётся. Так что если даже по 1.5 часа на каждый (учитывая прокрастинацию), то это уже меньше чем потратил бы на изучение софта.

Надеюсь, тебе известно правило «Кради как художник»? Иначе говоря, если где-то увидел — тупо себе скопировал-вставил в шаблоны, с упоминанием ГДЕ ВЗЯЛ, чтобы потом посмотреть если что не так работает как ожидалось. И всё. Таких задач мелочных на деле просто таки туева хуча. И кем-то когда-то они уже решены.

Adobe After Effects.

Если потом все анимации будут в web, можете сразу делать с GSAP, они несколько недель назад выпустили плагин для кастомных easing функций: greensock.com/ease-visualizer (последняя вкладка Custom)

Спасибо за наводку по After Effects. забыл как-то про него. Но посмотрев бегло обзоры — там всё тоже самое, руками расставляешь ключевые кадры и тайминги подбираешь на глаз нравиться / не нравиться.

Вас же не устраивало:

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

Согласен, скорее всего так и есть

Підписатись на коментарі