Как сделать плавную анимацию текста при наведении?
Всё бы хорошо, но после того, как я перестаю наводить на текст, анимация резко пропадает.
Суть в том, что при наведении анимация должна медленно выполнятся и после того, как я отвёл мышку она должна так же медленно уходить
- Вопрос задан более года назад
- 212 просмотров
Комментировать
Решения вопроса 1
Web developer
.example < /* color: #c4674d; */ transition: color 0.3s; >.example:hover
Ответ написан более года назад
Нравится 1 1 комментарий
thesirvlad @thesirvlad Автор вопроса
*Facepalm* Спасибо большое!)
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +1 ещё
Как стилизовать данный элемент?
- 1 подписчик
- 7 минут назад
- 9 просмотров
Как создать ультра-плавные анимации в плагине Figma Motion
И как поделиться ими с сообществом и разработчиками. Каждый UX / UI дизайнер приходит к моменту, когда ему нужно анимировать свой дизайн. И какие инструменты следует выбрать для добавления в интерфейс взаимодействий, потрясающих эффектов или анимации персонажа для мобильной игры? Я покажу вам интересный плагин для Figma, который поможет сделать все вышеперечисленное. Он называется Motion. Мы быстро рассмотрим его интерфейс, изучим основы анимации и даже сделаем кое-что интересное.
1. Начало
Прежде всего мы должны его установить. Откройте Figma и перейдите в раздел Community. Community Наберите «Motion» в строке поиска вверху страницы и нажмите вкладку «Plugins» в результатах. Теперь просто нажмите кнопку «Install». Давайте добавим новый файл Figma. В раскрывающемся меню выберите Plugins / Motion. Первый запуск Мы только что запустили Motion. Мы готовы перейти к следующему этапу.
2. Обзор
Прежде чем использовать новый инструмент, мы должны научиться с ним работать. Давайте быстро разберем его интерфейс. Похоже на интерфейс Figma, не так ли? Это хорошо для новых пользователей. У нас есть вкладки вверху, которые представляют собой наши анимации, панель инструментов внизу, панель слева и временная шкала с ключевыми кадрами. Вы можете добавить анимацию для любого файла. Вкладки Давайте быстро посмотрим на ряд кнопок панели инструментов. Подробнее о них мы поговорим позже. Панель инструментов Автообновление ключевых кадров (Auto update keyframes). Автообновление ключевых кадров Превью fps: 24 или 60. Превью fps: 24 или 60 Повтор: без повтора / повтор / повтор и пауза. Повтор: без повтора / повтор / повтор и пауза Воспроизвести / Остановить. Воспроизвести / Остановить Текущая временная позиция / общее время анимации Текущая временная позиция / общее время На левой панели мы можем искать слои по имени и / или фильтровать слои по ключевым кадрам. Если в Figma ничего не выбрано, мы можем видеть слои файла, но без подслоев. Это сделано для тяжелых файлов, которые могут тормозить. Просто найдите нужные слои или выберите слои в Figma, и список покажет вам все подслои. Левая панель На панели временной шкалы мы увидим все ключевые кадры выбранного слоя. Панель временной шкалы Добавить ключевой кадр. Добавить ключевой кадр в текущую позицию Экспорт. С его помощью вы можете экспортировать любой слой в GIF, Sprite, Frames или CSS. Эскпорт GIF, Sprite, Frames или CSS Если вы работаете в команде, каждый человек, имеющий доступ к файлу и запускающий Motion, увидит вашу анимацию. Это хорошо для совместной работы с другими дизайнерами и разработчиками, которые будут реализовывать ваши анимации в коде. Двойной клик по любому ключевому кадру откроет панель ключевых кадров, где вы можете установить точку поворота, значение и функцию плавности. Панель ключевых кадров
3. Ваша первая анимация
От теории к практике. Создадим фрейм и прямоугольник внутри него. Размеры и цвета пока не имеют значения. Поместите прямоугольник ближе к левому углу фрейма, чтобы справа было немного места для его перемещения. Теперь перейдите в Motion и нажмите кнопку «Add keyframe» в свойстве X. Наша анимация продлится 500 мс. Переместите розовый маркер шкалы времени в положение 500 мс (0,5 с). Переместите прямоугольник вправо, перейдите в Motion и снова нажмите кнопку «Add keyframe». На этом все. Нажмите Play и посмотрите свою первую анимацию. Поздравляю! С помощью этих приемов вы можете оживить все свойства, которые видите. Не стесняйтесь изменять свойства Y, ширины (Width), высоты (Height), радиуса скругления (Corner radius), вращения (Rotation), непрозрачности (Opacity) и заливки (Fill). Довольно просто, не правда?
4. Основы
Давайте продолжим и углубимся в детали.
4.1. Точка вращения (rotation point)
Прежде всего мы должны понять, что такое точка вращения (поворота) или точка привязки (anchor point). Предположим, у нас есть фрейм и прямоугольник внутри него. Прямоугольник: width = 100, height = 100, x = 100, y = 100, rotation = 0 °. Перейдите в Motion и добавьте ключевой кадр для свойства X. Дважды кликните по новому ключевому кадру. Теперь мы видим панель ключевых кадров с некоторыми свойствами. Здесь вы можете настроить точку вращения или точку привязки, значение свойства (property value) и функцию плавности (easing function). В панели свойств Figma мы задали значение X равным 100, но здесь мы видим 150. Почему? X = 150 на панели ключевых кадров X = 100 на панели свойств Причина тому – точка вращения, которая устанавливается по центру по осям X и Y. Итак, ее позиция: X + (Width / 2) = 100 + (100/2) = 150. Если вы хотите получить те же значения, что и в Figma, вы должны выбрать в качестве точки поворота верхний левый угол. Но не торопитесь! Давайте переместим наш прямоугольник на 100 вправо по оси X и повернем на -45 °. Нажмите на Play и посмотрите, как он движется и вращается. Но что, если мы изменим точку вращения на верхний левый угол? Не имеет значения, на каком ключевом кадре вы измените точку вращения. Он общий для всех ключевых кадров слоя. Прямоугольник будет двигаться и вращаться относительно левого верхнего угла слоя. Перемещение и поворот относительно верхнего левого угла Еще несколько примеров. Центральная точка вращения Точка вращения, расположенная вверху слева Точка вращения, расположенная внизу справа Figma показывает вам значения X и Y согласно левому верхнему углу точки вращения слоя, а значение Rotation – согласно центральной точки. Вы должны помнить об этом, когда что-то анимируете. Но в большинстве случаев вам не нужно менять его в Motion.
4.2. Функции плавности (Easing functions)
- Линейная (Linear)
- Ease-in – ускорение на старте
- Ease-out – замедление в конце
- Ease-in-out – ускорение на старте и замедление в конце.
Здесь есть еще один параметр – Шаги (Steps). Он немедленно изменит значения без какого-либо перехода.
Давай попробуем. У нас все еще есть прямоугольник, перемещающийся из левой части фрейма в правую. Выберите конечный ключевой кадр и откройте панель ключевых кадров. Измените функции плавности и посмотрите результат.
Ease-in – ускорение на старте
Ease-out – замедление в конце
Ease-in-out – ускорение на старте и замедление в конце
Steps – немедленное изменение
4.3. Копировать / Вставить
Можно легко копировать и вставлять ключевые кадры. Выберите ключевые кадры, нажмите Ctrl/Cmd + C или нажмите «Copy» в раскрывающемся меню выбранных ключевых кадров. После этого вы можете вставить их на любой слой. Это очень полезно, когда вы аналогичным образом анимируете ряд слоев.
4.4. Отменить / Повторить
Конечно, вы можете отменить и повторить любые изменения в анимации. Вам помогут сочетания клавиш Ctrl / Cmd + Z для отмены и Ctrl / Cmd + Y для повтора.
4.5. Автообновление ключевых кадров
Если эта кнопка активна, значения ключевых кадров будут автоматически обновляться в соответствии с текущей временной позицией после того, как Motion будет сфокусирован. У вас есть задержка в 1 секунду после того, как окно плагина сфокусировано, чтобы отключить его, или нажмите кнопку Play и расфокусируйте окно.
Итак, вы можете добавить ключевые кадры, перейти к их временной позиции, внести в слои изменения в Figma и просто сфокусировать окно плагина. Motion все сделает.
4.6. Превью fps
Вы можете установить, сколько кадров вы будете видеть в реальном времени в Figma: 24 или 60. Вы можете изменить это значение с 60 на 24, если анимация лагает. Не волнуйтесь, это не повлияет на экспорт.
4.7. Повтор
Вам доступны 3 варианта
- Без повтора (No repeat)
- Повтор (Repeat)
- Повтор и пауза (Repeat and pause)
Последний вариант довольно интересный. Он будет делать паузу на 1 секунду в конце анимации и только после этого повторять ее. Иногда, при повторе анимации вы не можете увидеть ее конечный результат. Поэтому вам может понадобиться пауза перед началом нового цикла анимации. Конечно, вы можете добавить дополнительные ключевые кадры на желаемый период, но вместо этого Motion дает вам функцию – Repeat and pause.
5. Давайте сделаем это
Давайте сделаем 3 анимации с помощью этого плагина. Они довольно просты, но начинать надо всегда с основ.
5.1. Загрузчик (Loader)
Добавьте новый файл Figma. Создайте фрейм: width = 300, height = 300. Создайте прямоугольник: width = 200, height = 20, x = 50, y = 50.
Выделите прямоугольник. Перейдите в Motion и добавьте ключевой кадр для ширины (Width) при временной позиции 0 мс и еще один для временной позиции 500 мс.
Убедитесь, что включена функция Auto update keyframes. Перейдите во временную позицию 0 мс и измените ширину прямоугольника на 0 в Figma. Вы заметите, что она будет установлена на 1. Минимальное значение – 0,01, но пока достаточно 1. Перейдите в Motion, и через 1 секунду он сообщит вам, что 1 ключевой кадр был обновлен.
Ваша анимация будет выглядеть более естественно, если вы установите плавность Ease—out. Выберите конечный ключевой кадр, дважды щелкните по нему, чтобы открыть панель ключевых кадров. Вы увидите функцию плавности Linear. Измените ее на Ease—out.
Нажмите Play.
Теперь перейдите к 500 мс. В этом положении наш прямоугольник широкий, поэтому мы можем легко с ним взаимодействовать. Нам нужно скопировать прямоугольник, повернуть его на -90 ° и разместить как на изображении.
Нажмите Play.
Почему второй прямоугольник не анимирован? Ключевые кадры исходного слоя не будут автоматически скопированы в новый. Итак, нам нужно скопировать ключевые кадры первого прямоугольника и вставить их во второй.
Выделите первый прямоугольник, перейдите в Motion, выберите ключевые кадры и нажмите Ctrl/Cmd + C или выберите «Copy» в раскрывающемся меню любого ключевого кадра.
Теперь выберите наш второй прямоугольник, перейдите в Motion и нажмите Ctrl / Cmd + V или выберите «Paste» из раскрывающегося меню в любом месте временной шкалы. Будут вставлены два ключевых кадра.
Всего за несколько кликов мышью мы получили 2 анимированных прямоугольника. Довольно просто.
Давайте скопируем второй прямоугольник, повернем его, скопируем ключевые кадры из предыдущего и вставим их в новый. После этого повторите те же действия с последним прямоугольником. У вас должно получиться что-то вроде этого:
Мы использовали небольшую хитрость. Конечно, можно делать прямоугольники. Для горизонтального можно анимировать ширину (Width), а для вертикального – высоту (Height). Но мы сделали это быстрее и проще.
5.2. Прыгающий круг
Теперь сделаем простую анимацию прыгающего круга. Добавьте новый файл Figma. Создайте фрейм: width = 300, height = 300. Создайте круг: width = 100, height = 100, x = 100, y = 100.
Перейдите в Motion и добавьте два ключевых кадра для Y и высоты на временной позиции 0 мс и 500 мс.
Выберите конечный ключевой кадр Y и измените его значение на 275, повторите то же самое для высоты со значением 50. Нажмите Play.
Смотрится не очень естественно. Итак, наш круг должен двигаться вниз, затем касаться дна и только после этого менять высоту.
Добавьте еще один ключевой кадр для высоты на временной позиции 700 мс со значением 50. Измените предыдущий ключевой кадр для высоты на 100.
Выглядит лучше, но не очень хорошо. Добавьте еще один ключевой кадр на временной позиции 700 мс с Y равным 275 и измените предыдущий на 250.
Нажмите Play.
Теперь мы должны изменить функцию плавности с Linear на Ease-out для последних ключевых кадров Y и Height.
Нажмите Play.
Выглядит лучше, но очень медленно. Давай увеличим скорость. Переместите ключевые кадры ближе к началу. Анимация будет работать быстрее. Вы можете перемещать ключевые кадры клавишами влево / вправо на 100 мс. Если удерживать Shift, то ключевые кадры переместятся на 500 мс, а Ctrl / Cmd – на 10 мс.
Нажмите Play.
Теперь переместим круг в исходное положение. Добавьте ключевые кадры на временной позиции 500 мс для Y и Height со значениями 150 и 100 соответственно с помощью функций плавности Ease—out .
Нажмите Play.
Довольно красивый прыгающий круг. Не стесняйтесь сделать его более естественным. Вы можете добавить несколько прыжков, постепенно уменьшая высоту прыжка. Попробуйте сами.
5.3. Сообщение
Давайте анимируем всплывающее сообщение. Создайте фрейм, прямоугольник и текст. Размеры пока не имеют значения. Чтобы анимировать их все вместе, мы должны сгруппировать прямоугольник и текст или поместить их в новый фрейм.
Хорошо, если вы поместите их в новый фрейм. В следующей статье вы узнаете, почему лучше использовать фреймы вместо групп.
Перейдите в Motion, добавьте ключевые кадры для Y и Opacity на 0 мс и 500 мс.
Установите значение 0 мс, переместите фрейм на 30 и измените его непрозрачность (opacity) на 0%. Убедитесь, что функция Auto update keyframes активирована. Перейдите в Motion и подождите 1 секунду, пока не обновятся ключевые кадры. Теперь перейдите к 500 мс и измените функцию плавности ключевых кадров на Ease—out.
Нажмите Play.
Получилось хорошее всплывающее сообщение.
6. Заключение
Сегодня мы узнали много нового об анимации в Figma. Теперь у вас есть время попрактиковаться и создать классную анимацию. В следующий раз вы узнаете, как поделиться проектом с сообществом и разработчиками, как экспортировать анимацию в GIF, спрайты, фреймы или CSS. Конечно, я покажу несколько новых приемов и объясню, почему вы должны использовать фреймы вместо групп.
Как сделать покадровую анимацию более плавной? 12 профессиональных советов и приемов
Мне нравится создавать бесплатный контент, полный советов для моих читателей, вас. Я не принимаю платное спонсорство, мое мнение принадлежит мне, но если вы сочтете мои рекомендации полезными и в конечном итоге купите что-то, что вам нравится, по одной из моих ссылок, я мог бы получить комиссию без каких-либо дополнительных затрат для вас.
Вы создали свой собственный остановить движение анимации только чтобы обнаружить, что это немного рывками и не так гладко, как хотелось бы?
По мере того, как вы изучаете свой остановить движение анимационное видео не будет похоже на фильм Уоллеса и Громита, и это нормально!
Но вы также не хотите, чтобы ваш конечный продукт выглядел как ожившие грубые детские рисунки — есть способы сделать вашу покадровую анимацию более плавной.
Итак, не нужно паниковать, есть несколько вещей, которые вы можете сделать, чтобы исправить прерывистую покадровую анимацию. Немного поработав и немного потренировавшись, вы сможете сделать свою анимацию более плавной.
Лучший способ сделать покадровую анимацию более плавной — использовать меньшие пошаговые движения, а также делать больше кадров в секунду. Это означает, что в каждом кадре будет меньше движения, и при воспроизведении он будет выглядеть более плавным. Чем больше кадров, тем плавнее будет выглядеть.
Есть несколько способов улучшить вашу технику, и вы также можете использовать программное обеспечение, которое поможет вам создать более плавную анимацию.
Существует множество различных программ покадровой анимации, и они могут сделать покадровое видео профессиональным.
Playmobil petting zoo stop motion
Please enable JavaScript
Продолжайте читать, чтобы узнать больше!
- 1 Способы сделать покадровую анимацию более плавной
- 1.1 Меньшие пошаговые движения
- 1.2 Легкость и легкость
- 1.3 Сквош и растянуть
- 1.4 Добавление предвкушения
- 1.5 Смягчение движения дугами
- 1.6 Использование центра масс объекта
- 1.7 Использование палочки для маха
- 1.8 Дайте отдых вашим рукам
- 1.9 Использование программного обеспечения
- 1.10 Добавление эффектов в пост-продакшн
- 1.11 Использование различных методов: интерполяция
- 1.12 Освещение
Способы сделать покадровую анимацию более плавной
Покадровая анимация может выглядеть немного прерывистой или дерганой, особенно если вы новичок в технике.
Просто зайдите на YouTube в эти дни, и вы увидите множество прерывистых покадровых анимаций, которым не хватает плавности профессиональных анимаций.
Начало работы с собственными покадровыми раскадровками
Подпишитесь на нашу рассылку и получите бесплатную загрузку с тремя раскадровками. Начните оживлять свои истории!
Мы будем использовать только ваш адрес электронной почты для нашей рассылки и уважать ваши политикой конфиденциальности.
Одна из причин, по которой люди борются, заключается в том, что они делают недостаточно снимков, поэтому им не хватает необходимых кадров.
Но отрывистое видео отвлекает от просмотра анимации и просмотра сказки.
Сделать стоп-кадр более плавным очень просто.
Потратив немного больше времени и внимания, вы получите результаты, которые не только удовлетворят вас, но и сделают анимацию более привлекательной для просмотра вашей аудиторией.
Плавная покадровая анимация привлечет больше зрителей и фанатов.
Итак, как создать плавную покадровую анимацию?
Меньшие пошаговые движения
Решение простое: делайте меньшие пошаговые движения и делайте больше снимков в секунду. Это приводит к большему количеству кадров в секунду и меньшему количеству движения в каждом кадре.
Съемка сцены может занять немного больше времени, но оно того стоит, когда вы увидите конечный результат.
Профессиональные аниматоры покадровой анимации постоянно используют эту технику, и это одна из причин, почему их анимации выглядят такими плавными.
Частота кадров — это количество кадров (или изображений), отображаемых в секунду в анимации.
Чем выше частота кадров, тем плавнее будет выглядеть анимация. Для покадровой анимации обычно используется частота кадров 12-24 кадра в секунду.
Это может показаться большим, но это необходимо для создания плавной анимации.
Если вы новичок в покадровой съемке, начните с более низкой частоты кадров, а затем увеличивайте ее по мере того, как вы осваиваете эту технику.
Вы всегда можете снять лишние кадры, а затем удалить ненужные позже в процессе редактирования.
Чем больше фотографий, тем лучше, особенно если это не первая ваша анимация и вы знаете, что делаете.
Означает ли более высокая частота кадров более плавную анимацию?
Вот о чем сложно подумать.
То, что у вас больше кадров в секунду, не обязательно означает, что ваша анимация будет более плавной.
Вероятно, так и будет, но вы должны учитывать расстояние между кадрами.
Кадры темпа очень важны и могут подбросить идею «больше кадров = более плавные движения».
Если вы пытаетесь создать более плавное волнообразное движение (давайте представим твоя фигурка лего машет), вы можете использовать меньше кадров, которые разнесены дальше друг от друга, чтобы создать плавное действие.
Если вы используете больше кадров, расположенных близко друг к другу, вы можете получить более прерывистую волну.
То же самое касается других движений, таких как ходьба персонажа, бег или езда на велосипеде.
Дело в том, что вам нужно поэкспериментировать с темпом ваших кадров. Тем не менее, лучше иметь много кадров, которые вы можете использовать в целом.
Легкость и легкость
Еще одна важная часть развития плавности — следовать принципу «Легко и легко».
Легкость означает замедление или медленное начало анимации с последующим ускорением. Таким образом, кадры сгруппированы ближе друг к другу в начале, а затем дальше друг от друга.
Замедление — это когда стоп-кадр начинается быстро, но затем замедляется или замедляется.
Это означает, что когда объект движется, он ускоряется, когда начинает двигаться, а затем замедляется, когда собирается остановиться.
Подводя итог, вы даете своей марионетке/объекту больше кадров как в начале, так и в конце движения. Таким образом, ваше движение на экране будет медленным, быстрым, медленным.
Хитрость в том, чтобы сделать более плавную покадровую анимацию, заключается в контроле крошечных приращений во время замедления и замедления.
Если вы изготовление глиняной анимации, например, можно сделать так, чтобы глиняная марионетка двигалась плавно, используя более мелкие приращения.
Вы можете сделать свои кадры настолько короткими или длинными, насколько хотите, но чем короче интервал, тем более плавным он будет выглядеть.
Если вы посмотрите на персонажа из «Уоллеса и Громита», вы заметите, что движения рук или ног контролируются, а не внезапные толчки.
Именно это придает анимации естественный и реалистичный вид. Это результат того, что аниматор сосредоточился на процессе «упрощения и облегчения».
Посмотрите это видео, чтобы узнать, как контролировать свои движения, чтобы создавать плавные покадровые видеоролики:
Это также очень полезно для покадровой анимации, потому что дает вам больше контроля над вашими движениями.
Когда вы двигаете свою марионетку, держите палочку мала в другой руке и положите ее конец на стол.
Это придаст вам больше стабильности и поможет делать более плавные движения.
Кроме того, эта палочка mahl может помочь вам добиться плавного покадрового движения, потому что вы можете делать очень маленькие движения, достигая небольших пространств, не перемещая свои объекты непреднамеренно.
Палочка mahl также помогает вам делать только устойчивые движения.
Дайте отдых вашим рукам
Чем стабильнее ваша рука, тем плавнее будет ваша покадровая анимация.
Вам нужно держать руку ровно, пока вы снимаете изображения по одному кадру за раз. Но ваша рука также должна быть устойчивой, когда вы перемещаете свои объекты и марионетки небольшими шагами.
Поскольку вам нужно двигать свою фигуру для каждой сцены, ваша рука и пальцы должны быть устойчивыми, если вы хотите получить гладкий конечный результат.
Если ваша рука находится в воздухе, она движется больше, чем если бы она лежала на твердой поверхности. Поэтому во время работы лучше положить на что-нибудь руку или пальцы.
Использовать штатив (здесь мы рассмотрели отличные варианты) если у вас возникли проблемы с тем, чтобы держать руку неподвижно или даже использовать зажим, чтобы закрепить камеру.
Важно, чтобы вы не оказывали слишком большого давления, когда делаете снимок.
Немного движения — это нормально, но старайтесь постоянно держать камеру неподвижно, чтобы избавиться от размытости.
Поэтому при съемке аккуратно нажимайте на кнопку и так же осторожно перемещайте фигурки.
Использование программного обеспечения
Как я упоминал ранее, существует ряд программ, которые могут помочь вам создать более плавную покадровую анимацию.
Студия покадровой анимации Pro — это один из вариантов, который включает в себя ряд функций, помогающих создавать плавную покадровую анимацию.
Специальное программное обеспечение для покадровой анимации дает вам больше возможностей и, таким образом, вы можете создавать более качественную покадровую анимацию.
Программное обеспечение для редактирования позволяет добавлять дополнительные кадры и использует интерполяцию для сглаживания анимации.
Это может помочь устранить любые резкие движения и придать вашей анимации более совершенный вид.
Stop Motion Studio Pro также включает в себя ряд других полезных функций, таких как возможность добавлять звуковые эффекты и музыку, создавать заголовки и титры, а также экспортировать анимацию в формате HD.
Есть ряд других программ доступны, которые также могут помочь вам создать плавную покадровую анимацию.
Stop Motion Pro, iStopMotion и Dragonframe — популярные варианты, предлагающие функции, аналогичные Stop Motion Studio Pro.
Добавление эффектов в пост-продакшн
Вы также можете добавлять эффекты к покадровой анимации в пост-продакшн. Это может помочь сгладить любые шероховатости и придать вашей анимации более совершенный вид.
Есть все виды Визуальные эффекты аниматоры используют для улучшения своей работы.
Некоторыми из наиболее распространенных эффектов, используемых при постобработке покадровой анимации, являются цветокоррекция, цветокоррекция и насыщенность.
Эти эффекты могут помочь выровнять цвета в вашей анимации и сделать ее более цельной.
Вы также можете использовать другие эффекты, такие как размытие, чтобы сгладить резкие движения.
Это может быть полезно, если вы не можете устранить все неровности и толчки в анимации во время съемок.
Это можно сделать в ряде различных редактирование видео программы, такие как iMovie, Final Cut Pro или Adobe Premiere.
Добавление эффектов в постобработку может помочь сгладить любые шероховатости и придать анимации более совершенный вид.
Однако важно отметить, что этот метод может занять много времени и может потребовать проб и ошибок, прежде чем вы получите желаемые результаты.
Использование различных методов: интерполяция
Существует ряд приемов, которые можно использовать, чтобы сделать покадровую анимацию более плавной.
Добавление дополнительных кадров и использование интерполяции может помочь сгладить вашу анимацию и придать ей более плавный вид.
Есть много способов сделать это: вы можете использовать различное программное обеспечение или добавлять эффекты на этапе постобработки.
Вы также можете использовать различные методы для сглаживания анимации, такие как добавление кадров и использование интерполяции.
Интерполяция — это метод, который часто используется в покадровой анимации. Это включает в себя создание новых кадров, которые вставляются между существующими.
По сути, вы создаете новые кадры, которые находятся между существующими.
Это поможет сгладить резкие движения и сделать вашу анимацию более плавной.
Я рекомендую сделать больше снимков, чем вам может понадобиться, а затем выбрать лучшие для использования. Таким образом, вы можете получить более плавную анимацию.
Освещение
Я знаю, что поначалу кажется, что освещение не имеет большого значения для плавности покадровой анимации.
Но, честно говоря, освещение играет жизненно важную роль в плавности стоп-кадра.
Если вы хотите, чтобы ваша покадровая анимация была максимально плавной, вам нужно убедиться, что освещение равномерно на протяжении всей анимации.
Это можно сделать с помощью софтбокса или диффузора. Это поможет смягчить свет и уменьшить резкие тени.
Равномерное освещение является ключом к плавной покадровой анимации.
Избегайте использования естественного света при покадровой съемке, потому что он постоянно меняется. Это может привести к тому, что ваша анимация будет выглядеть неровной и прерывистой.
Освещение является жизненно важным элементом плавности покадровой анимации, поэтому используйте искусственное освещение и избегайте съемки вблизи окон.
Итак, ключ в том, что если вы хотите плавную анимацию, обязательно используйте постоянный искусственный свет.
Навынос
Независимо от того, решите ли вы использовать программное обеспечение для редактирования, эффекты постобработки или интерполяцию, есть несколько способов сделать покадровую анимацию более плавной.
Но все начинается с самого начала, когда вы снимаете каждый кадр — ваши движения должны быть небольшими шагами, и вам нужно следить за тем, чтобы ваша фигура двигалась плавно между каждым кадром, чтобы избежать рывков.
Вы также должны знать об освещении, чтобы оно было одинаковым на протяжении всей анимации.
Эти шаги помогут вам воплотить в жизнь ваш покадровый проект без резких и прерывистых результатов.
Привет, я Ким, мама и энтузиаст покадровой анимации с опытом создания медиа и веб-разработки. У меня огромная страсть к рисованию и анимации, и теперь я с головой погружаюсь в мир покадровой анимации. В моем блоге я делюсь своими знаниями с вами, ребята.
Привет, я Ким, мама и энтузиаст покадровой анимации с опытом создания медиа и веб-разработки. У меня огромная страсть к рисованию и анимации, и теперь я с головой погружаюсь в мир покадровой анимации. В моем блоге я делюсь своими знаниями с вами, ребята.
Подписаться на рассылку
И получите бесплатные раскадровки, которые помогут вам рассказать потрясающие истории!
Мы будем использовать только ваш адрес электронной почты для нашей рассылки и уважать ваши политикой конфиденциальности.
Хотите быть в курсе последних событий?
Подпишитесь сейчас и получите бесплатная раскадровка для вашей следующей покадровой анимации!
Мы будем использовать только ваш адрес электронной почты для нашей рассылки и уважать ваши политикой конфиденциальности.
10 принципов создания плавной веб-анимации
Мы не хотим внушить людям ощущение зависимости от какого-то невероятного плагина JavaScript, способного волшебным образом создавать яркие анимации. Секрет успеха намного проще.
Индикатор прокрутки статьи
10 принципов создания плавной веб-анимации
Нет никакой особой «фишки» в создании масштабной анимации. Хотя нет, есть: нужно потратить немало времени на её оптимизацию и тестирование. Так после нескольких лет экспериментов, постоянно упираясь в пределы производительности браузеров, мы вывели серию принципов дизайна и кодинга, которые позволят любому желающему украсить свой проект эффектной и производительной анимацией. Их использование позволит вам получить плавную работу страниц в десктопных и мобильных браузерах. И самое главное – всё это делается и обслуживается весьма просто.
Технология и реализация будут немного отличаться для каждого конкретного случая, но мы уверены, что наши общие принципы окажутся полезными практически в любой ситуации.
Что такое анимация?
Анимации существовали ещё до появления Интернета. Для создания лучших из них можно потратить всю жизнь на обучение. Тем не менее, в этом деле тоже существуют закономерности. Мы обсудим некоторые типичные и не очень проблемы, с которыми сталкиваются дизайнеры при создании анимации для размещения в вэбе.
Для получения плавной анимации с 60 fps каждый кадр должен обрабатываться менее чем за 16 мс! Это малый промежуток времени, поэтому необходимо найти очень эффективные способы рендеринга каждого кадра для высокой производительности анимации.
Существует множество способов реализации веб-анимации. Например, кинолента существовала ещё до появления Интернета. Суть её в том, что вручную прорисованные кадры с минимальным различием демонстрировались несколько раз в секунду, создавая таким образом иллюзию движения у зрителя.
Twitter недавно использовали этот простой подход для их новой анимации сердца, прокручивая в заданной последовательности 26 кадров.
Полученная таким образом анимация слишком сложна в реализации и, на самом деле, недостаточно плавная.
Во многих случаях выгоднее использовать свойство CSS «transition» для автоматической анимации элемента при его изменении. Эта техника известна также как «tweening» и подразумевает создание анимации с автоматическим построением промежуточных изображений. Допустим, мы имеем 2 изображения одного объекта в различных положениях. Эффекты перехода CSS помогут создать анимацию изменения его состояния. Их использование выгодно тем, что можно в любой момент сбросить или обратить всю логику анимации. Это идеальный подход из разряда «установил и забыл». Отлично работает, к примеру, с различными интро-последовательностями или простыми взаимодействиями вроде активации анимации при наведении мыши.
Также анимация, построенная в CSS на ключевых кадрах, может служить идеальным фоном для выбранных областей страницы. К примеру, кольца из логотипа «Гироскопа» постоянно вращаются. Такой подход хорошо использовать для анимации движения различных механизмов.
Итак, с вводной закругляемся и переходим к основной части поста. Дадим несколько советов, которые помогут значительно повысить производительность и качество вашей анимации. Надеемся, они вам помогут.
#1 Не изменяйте никакие свойства кроме непрозрачности (opacity) и преобразования (transform)
Даже если вам кажется, что так будет лучше, всё равно не стоит этого делать!
Следование этому базовому принципу повысит эффективность работы на 80%, даже в мобильном сегменте. Наверняка, вы уже слышали об этом раньше. Идея не оригинальная, но ей редко следуют. Она является веб-эквивалентом «ешьте здоровую пищу и выполняйте физические упражнения». Все слышали, знают, что это правильно, но мало кто соблюдает.
На самом деле, к использованию этого принципа довольно просто привыкнуть. Особую выгоду это принесёт тем, кто ранее делал анимации при помощи традиционных свойств CSS.
Например, если вам нужно сделать объект меньше, вы можете использовать свойство трансформации scale вместо изменения ширины/высоты. Если вам нужно переместить элемент, то не стоит возиться с изменением значений отступов, ведь такая анимация потребует перестройки макета страницы при каждом кадре. Лучше используйте простые свойства трансформаций для этого: transform: translateX или transform: translateY.
Почему это работает?
Для человека, меняющего ширину, отступы и другие подобные параметры использование свойств трансформации может и не выглядеть выдающейся идеей. Визуально результат ведь схож. Но с точки зрения затрат вычислительной мощи компьютера, который будет всё это обсчитывать, использование transform выглядит в разы лучше.
Разработчики браузеров проделали огромную работу для оптимизации таких операций. Трансформации действительно эффективны, они экономят ресурсы видеокарт, отбрасывая необходимость повторного рендеринга элемента.
Можно сойти с ума, ожидая загрузки такой страницы: все углы скруглены, используются изображения, на всё положены тени и для полного счастья добавлено динамическое размытие элементов. Если такое происходит 1 раз, то несколько лишних миллисекунд ожидания роли не сыграют. Но как только весь контент будет выведен на экран, вы больше не захотите ждать пересчёта каких-либо значений для изменения страницы.
#2 Скрывайте контент на виду.
Используйте «pointer-events» в CSS: значение «none» наряду с нулевой непрозрачностью для сокрытия элементов
Данный метод плохо работает в старых браузерах, но если вы проектируете для webkit или других современных браузерных движков, то он сделает вашу жизнь намного проще.
В далёкие времена, когда анимации обрабатывались при помощи jQuery animate(), основная сложность при работе с эффектом fade заключалась в необходимости переключения значения свойства display: активировать none для прекращения эффекта в нужный момент. Слишком рано и анимация не будет завершена, слишком поздно и вы получаете невидимый элемент с нулевым значением opacity, перекрывающий страницу. Требовался обратный отклик для очистки экрана после завершения анимации.
Свойство CSS «pointer-events» (существует давно, но почему-то используют его нечасто) служит для того, чтобы сделать вещи нечувствительными к кликам мышью и другим взаимодействиям. Так, будто их вообще нет на странице. Это свойство может быть легко включено/выключено посредством CSS. При работе оно не прерывает анимацию и не влияет на рендеринг/видимость элементов.
Комбинируя эту вещь с нулевым значением opacity, мы получаем тот же эффект, что даёт «display: none», но без влияния на производительность при запуске новых циклов рендеринга анимации. Если необходимо скрыть элемент из поля зрения, я обычно выставляю нулевую непрозрачность и выключаю pointer-events. После этого могу забыть о нём, зная, что всё можно легко вернуть обратно и ничего не будет мешать производительности страницы.
Этот приём особенно хорошо работает с элементами, имеющими абсолютное позиционирование, поскольку в таком случае вы можете быть уверены в том, что они не оказывают никакого влияния на все остальные участки макета и элементы страницы.
Также это даёт вам намного большую свободу действий, поскольку выбор времени начала/прекращения анимации в таком случае может быть и не очень точным. Даже если вы немного ошибётесь с таймингами, ничего страшного не произойдёт. Пользователь просто не сможет ничего нажать до того, как анимация завершится. Всё будет идти так, как вы задумали.
#3 Не нужно анимировать всё подряд одновременно.
Либо же используйте принцип хореографии.
Одна анимация может быть плавной сама по себе, но, если одновременно отрабатывается несколько эффектов, это может испортить всю картину и снизить производительность. Создать плавно работающую демку очень просто, зато обеспечить приемлемый уровень производительности в составе целого сайта намного сложнее. Поэтому очень важно планировать появление анимации должным образом.
Вы захотите выстроить тайминги таким образом, чтобы все анимации запускались в разное время. Обычно 2-3 анимации могут работать без задержек одновременно, особенно если они стартуют с небольшим разбросом по времени. Более 3 одновременных (на глаз, но не по существу — минимальный разброс по времени должен быть) запусков почти наверняка вызовут лаги на экране.
Если на странице больше одной анимации, вам важно понять концепцию хореографии. Казалось бы, причём здесь танцевальный термин? Но понимание его сути в данном контексте очень важно для успешной анимации интерфейсов: вещи должны приходить на экран из правильного направления и в нужные моменты. Несмотря на то, что все они работают по отдельности, для зрителя они должны выглядеть как части одного хорошо спроектированного механизма.
Материал-дизайн от Google имеет некоторые интересные наработки по этому вопросу. Это, конечно, не единственно правильный путь, но он даёт пищу для размышлений и тестирования.
#4 Небольшое увеличение задержки перехода позволяет легко следовать принципу хореографии
Хореография анимации очень важна, и её качественная постановка потребует большого количества экспериментов. Тем не менее, код для реализации задумки вряд ли получится очень сложным.
Я обычно заменяю один класс на родительском элементе (чаще всего на body) для того, чтобы вызвать кучу переходов, каждый из которых имеет свой параметр задержки (transition-delay). Делается это для того, чтобы каждый элемент появлялся в нужное мне время. С точки зрения кодинга вам стоит беспокоиться о значении лишь одной переменной вместо поддержания десятков таймингов в JavaScript.
Раскачивая одновременно серию элементов, можно довольно просто скомпоновать их хореографию. Это мощный подход, потому что всё это одновременно и выглядит хорошо, и работает быстро, лишь помните, что только 2-3 анимации можно запускать одновременно, и всё будет хорошо. Нужно распространить их на странице так, чтобы каждая отрабатывалась плавно и своевременно. Сет ваших анимаций должен восприниматься зрителем как непрерывный поток, а не цепочка разрозненных элементов. Единая плавная сцена.
Пример кода
Есть несколько простых методов, которые позволят раскачивать ваши элементы. Они являются очень удобными, особенно если вы используете длинную цепочку анимаций. Если цепочка включает менее 10 элементов, то я обычно указываю значения задержек в CSS. Это самый простой способ реализации.
Для более длинных последовательностей или очень динамично изменяющихся элементов тайминги могут устанавливаться динамически для всех элементов путём изменения значений переменных.
Как правило, используются 2 переменные: ваша базовая задержка и задержка по времени между каждым элементом. Такой баланс отыскать довольно сложно, но если вы попадёте на правильный набор чисел, то всё будет отлично.
#5 Используйте общий множитель для разработки в slow motion
И ускорьте всё это позже.
В дизайне анимации тайминг является нашим всем. 20% работы кроется в создании самих анимаций, а остальные 80% — в нахождении правильных параметров и таймингов для получения чётко синхронизированной и плавной сцены.
Особенно это актуально при работе над хореографией обширного множества элементов и попытках выжать максимум производительности. После замедления анимаций с такими сценами станет работать намного проще.
Если вы используете Javascript или какой-нибудь CSS-препроцессор вроде SASS, код должен быть достаточно простым для построения правильной структуры переменных.
Вы должны убедиться в удобстве кодовой конструкции, чтобы без проблем тестировать различные скорости и тайминги. Например, если анимация заикается даже на 1/10 скорости, вы, скорее всего, делаете что-то в корне неправильно. Если она идёт гладко при растяжении в 50 раз, то вопрос сводится к нахождению максимальной скорости, при которой она сможет плавно работать. Довольно трудно заметить проблемы на полной скорости, но если вы снизите её, то все они станут весьма очевидными.
Для настройки очень сложных анимаций либо же при поиске узких мест в производительности отслеживание процесса в замедленном темпе будет очень полезным.
Идея заключается в том, чтобы упаковать много красивых деталей в сцену при замедленной демонстрации, после чего ускорить всё это дело так, чтобы анимации выглядели идеально. Это очень тонкая работа, зато пользователи оценят детализацию и плавность происходящего на экране.
Эта фишка является действующей частью OS X: когда вы сворачиваете окно с программой, видите анимацию в замедленном темпе.
#6 Возьмите видео с записью вашего интерфейса и прокрутите, от третьего лица вы сможете увидеть больше
Иногда взгляд со стороны помогает видеть вещи более ясно, и видео является отличным способом добиться этого.
Некоторые люди создают видео в After Effects, после чего пробуют реализовать полученное на сайте. Я часто делаю с точностью до наоборот, пытаясь сделать хорошее видео на основе пользовательского интерфейса сайта.
Однажды я был настолько впечатлён полученным от работы результатом, что решил поделиться с друзьями видео с его записью. Тем не менее, при повторном просмотре мною была замечена куча вещей, далёких от восхищения. Были лаги, да и тайминги выставлены немного неверно. Это меня смутило, и вместо того, чтобы разослать видео, я принялся доводить результат до ума. Работы там оставалось немало.
В режиме реального времени довольно просто можно упустить какие-то моменты. Зато просмотр анимации в записи на медленной скорости снова и снова поможет выявить даже самые мелкие проблемы. При таком подходе всё становится очевидным.
Просмотр замедленных видео с моих страниц и корректировка проблемных участков стали важной частью моей работы. Можно, конечно, всё списывать на медленные браузеры, но зачастую, после тестирования и проведения оптимизации анимации начинают работать как по маслу. То есть всё решаемо при грамотном подходе.
Если после просмотров и правок меня ничего не смущает, и я могу со спокойной совестью поделиться таким видео с коллегами и друзьями, значит, проект готов к релизу.
#7 Активность Сети может привести к лагам.
Вам нужно предварительно загрузить или блокировать большие HTTP-запросы
Изображения выступают в этом плане решающим фактором, особенно если они большие по весу (к примеру, тяжёлый фон), или тонна маленьких (загрузка 50-100 аватаров, допустим), или просто большое количество контента (длинная страница с кучей картинок).
Во время первой загрузки страницы тонны вещей инициализируются и загружаются. Объявления, модули и другие сценарии 3 очереди загрузки ещё сильнее усугубляют ситуацию. Иногда задержка воспроизведения анимаций всего лишь на несколько сотен миллисекунд после загрузки остальных элементов страницы способна совершить чудо. Вы получите значительный прирост производительности.
Не стоит задействовать мега-оптимизацию без явной необходимости, хотя тяжёлая страница может потребовать установки очень точных задержек и таймингов анимации для плавной работы. В общем, нужно для начала загрузить настолько малое количество данных, насколько это возможно, потом подключить анимацию, а уже после неё продолжить загрузку остальной части тяжёлого контента страницы.
На страницах с большим количеством данных работа по оптимизации может занять немало времени. Анимация, работающая хорошо со статическим контентом, может начать сильно тормозить и разваливаться при одновременной загрузке с реальными данными. Если что-то выглядит вполне плавно работающим, но в некоторые моменты начинает лагать по неясной причине, следует проверить сетевую активность. Возможно, в эти моменты ваш канал занят другими загрузками. Убедитесь, что ваша сеть не выполняет несколько одновременных больших загрузок.
#8 Не нужно менять стандартную прокрутку.
Идея замены скролла может показаться классной, но это не так на самом деле.
Скроллинг на основе анимации популярен уже несколько лет, особенно если он сделан с применением параллакса и других спецэффектов. О его полезности можно спорить долго, а вот способы технической реализации такой задумки есть удачные и не очень.
Умеренно эффективным способом создания вещей из этой категории является определение оптимального шага прокрутки и выделение его в отдельное событие (event). Если же вы не знаете, что делаете, то лучше вообще не использовать такой скроллинг. Здесь легко ошибиться, да и поддерживать нормальный уровень производительности на страницах со сложным скроллингом – довольно хлопотное занятие.
Ещё худшей затеей выглядит замена стандартного скролла на так называемый scrolljacking (контент изменяется в такт прокрутке, пример – сайт Apple). Не делайте этого. Реализовать удачно такой эффект сложно, да и не всем пользователям он понравится.
Если у вас есть определённый опыт и желание создать свой скроллбар, сделайте его облегчённый прототип и протестируйте на работоспособность, прежде чем тратить время на полную разработку.
#9 Почаще тестируйте свои проекты на мобильных устройствах.
Большинство веб-сайтов созданы на ПК. Чаще всего они тестируются на той же машине, на которой их разработали. Таким образом, мобильная версия сайта и производительность анимаций отходят на задний план. Некоторые технологии создания анимации (к примеру, canvas) не будут нормально работать на мобильных платформах.
Тем не менее, если анимация будет сделана и оптимизирована должным образом, то полученный от неё мобильный опыт использования может превосходить по качеству десктопный. Мобильная оптимизация раньше была очень сложной темой, но новые iPhone работают быстрее большинства ноутбуков. Если вы станете следовать приведённым выше советам, то сможете добиться внушительной производительности ваших анимаций и на мобильных устройствах.
Мобильная версия сайта – большая и очень важная его часть. Это может показаться странным, но я рекомендую в течение недели просматривать ваш сайт исключительно с телефона или планшета. В идеале вы не должны чувствовать, что получили наказание из-за невозможности добраться до десктопа. Если всё работает быстро, плавно и без нарушений задуманной структуры, то вы достигли цели. Если что-то идёт не так, нужно продолжать работу.
Продолжайте вносить конструктивные усовершенствования и улучшать производительность, пока разница в комфортности использования мобильной и десктопной версии сайта не исчезнет совсем.
Если вы заставите себя использовать мобильный сайт в течение недели, то, вероятно, в конечном итоге, оптимизируете его даже лучше, чем большую версию. Борясь с раздражением, используя его на регулярной основе, вы в полной мере ощутите проблемы, с которыми предстоит столкнуться вашим пользователям, и сможете устранить их до выхода проекта в широкие массы. Это избавит от множества проблем в будущем.
#10 Тестируйте проекты на разнообразных устройствах
Существует множество факторов, способных кардинально повлиять на производительность сайта на ПК и мобильных устройствах: разрешение экрана, количество пикселей в окне, старость железа и т. д.
Несмотря на то, что Chrome и Safari созданы на базе Webkit и имеют практически одинаковый синтаксис, у каждого из них свои собственные причуды. Любое обновление Хрома одновременно устраняет старые ошибки и привносит новые, так что вы должны постоянно держать руку на пульсе, как говорится.
Понятно, не все хотят идти по пути наименьшего сопротивления, делая сайты по нижнему общему знаменателю суммы багов, дабы не попасть в очередной просак после обновлений наиболее популярных браузеров. Поиск грамотных путей добавления усовершенствований и удаления некоторых из них для поддержания плавной работы сайта может быть очень полезным.
Я регулярно переключаюсь в работе между моим маленьким MacBook Air и большим iMac. Каждый такой цикл выявляет небольшие проблемы и указывает на необходимые усовершенствования. Это касается не только производительности работы анимации, но и дизайна сайта в целом, плотности информации, читаемости, структуры и т. д.
Модели мобильной и обычной версии сайта чаще всего отличаются дизайном структуры по ширине, высоте, плотности пикселей и другим свойствам. Знание особенностей операционных систем и аппаратных характеристик мобильных устройств может помочь в оптимизации, поскольку они сильно отличаются от таковых на ПК.