Как перенести анимацию из after effects на сайт
Обновлено: 07.07.2024
В данном уроке мы разберём тему экспорта анимации или видео-ролика из After Effect в gif формат. В After Effect, помимо наложения различных эффектов на видео можно делать красивую, плавную анимацию, которая по качеству исполнения превосходит анимацию созданную в фотошопе или других программах. Многие новички сталкиваются с проблемой сохранения получившейся анимации в гифку, поскольку в After Effects стандартный экспорт не предусматривает возможности сохранения проекта напрямую в gif формат.
Мы разберём три самых распространённых способа сохранения проекта в гифку, каждый из них имеет свои преимущества и недостатки, ну а каким из них удобнее пользоваться - это уже выбирать вам. В качестве объекта для будущей гифки я взял короткий фрагмент видео-ролика, с любой созданной анимацией в After Effects - это будет работать точно так же, поэтому вы можете взять либо этот же фрагмент ролика, либо какую-то свою анимацию.
1. Сохранение в GIF с помощью плагина
Первый способ, который мы рассмотрим, является самым простым, речь идёт о популярном плагине GifGun, с помощью которого буквально за один клик можно экспортировать проект After Effects в gif формат. Поскольку плагин является платным, думаю желающих использовать данный способ будет не много, особенно среди новичков. Использование GifGun будет актуальным для профессиональной деятельности на платной основе, т.е. для пользователей, которые часто выполняют коммерческие проекты и сумма в 30 долларов, а именно столько стоит плагин на данный момент, будет для них не значительной, в сравнении с удобством использования плагина.
GifGun достаточно просто устанавливается, как и большинство плагинов After Effects. Для начала работы с ним нужно скаченный архив плагина распаковать в папку "Scripst", которая расположена в корневой директории папки "Support Files". После распаковки плагина запускаем After Effects, переходим в верхнем меню в пункт "File" - "Scripts" и запускаем скрипт GifGun. Далее в появившемся окне вводим лицензионный код, нажимаем "Ок" и у нас появляется окошко плагина.
Тут можно выставить нужные настройки для будущей гифки, такие как размер, количество кадров в секунду, выбрать место сохранения и другие мелочи, после чего просто нажимаем на кнопку "Make GIF" и плагин сохраняет проект в гиф файл.
Главный недостаток GifGun - это платная лицензия. Конечно, если вы не совсем чайник и термины типа "кряк","торрент" вам знакомы, то вы знаете где взять этот плагин бесплатно. Я же не собираюсь нарушать авторские права разработчика, тем более у нас ещё имеется целых два способа, которые абсолютно легальны и бесплатные.
2. Экспорт кадров в Photoshop и сохранение в GIF
Переходим ко второй способу, он пожалуй, самый распространённый, на него есть уже куча видео на Ютуб и заключается данный способ в экспорте из After Effects через Photoshop.
Первым делом, как и при обычном экспорте мы выбираем в верхнем меню "Composition" - "Add to Render Queue" и в настройках рендеринга вместо формата AVI, который стоит по умолчанию, выставляем "Photoshop Sequence" и указываем путь сохранения.
Лучше создать отдельную папку для сохранения, потому что файлов будет много. Нажимаем "Render" и ждём. По окончанию рендеринга переходим в нашу папку и видим тут кучу файлов в формате PSD, каждый файл представляет собой отдельный кадр из нашего видео-ролика. Т.е. After Effects разобрал наш ролик на кадры и каждый кадр сохранил в PSD файл. Теперь нам нужно с помощью Photoshop собрать все эти кадры в единый ролик или анимацию и сохранить уже всё это в гифку.
Открываем фотошоп, выбираем в верхнем меню "Файл" - "Открыть как" и в директории с нашими кадрами выбираем самый последний файл, ставим галочку "Последовательность изображений" и нажимаем открыть.
В появившемся окне устанавливаем нужную частоту кадров, можно оставить как и в проекте After Effects, а можно немного уменьшить. Тут важно иметь в виду, что чем больше частота кадров, тем плавнее и качественнее будет выглядеть Gif анимация, но тем и больше она будет весить, а соответственно, дольше грузиться браузером.
Теперь нажимаем "ок" и фотошоп преобразует все выбранные файлы в один видео-слой. Переключаем рабочую среду на "Движение", чтобы проиграть видео, как видим, оно работает.
Теперь стандартным способом сохраняем это видео в гифку. В верхнем меню выбираем "Файл" - "Экспортировать" - "Сохранить для Web", выбираем gif формат и сохраняем анимацию.
Видите, анимация будет весить слишком много, потому что у нас большой формат FullHD, можно перед сохранением просто его уменьшить раза в три. Выберем "Изображение" - "Размер изображения" и установим ширину, допустим на 400 пикселей. Снова сохраняем стандартным способом в гифку и увидим, что теперь она будет весить приемлемо.
Главные два минусам данного способа - это конечно же временные затраты, а так же наличие фотошоп и хотя бы не большой навык работы в нём. Хотя, оба минуса, кому-то будут вовсе и не минусами, а наоборот.
3. Экспорт видео в Photoshop и сохранение в GIF
Ну и наконец вишенка на торте - третий способ, который лично мне нравится больше, чем два предыдущих, но тут уже всё зависит конечно от ваших задач. Работает этот способ следующим образом: из After Effects мы рендерим нашу анимацию или видео в формат AVI и с помощью фотошопа просто сохраняем это видео в гифку. Фотошоп работает с AVI форматом, поэтому никаких танцев с бубном производить не нужно.
Просто открываем отрендеренное видео и стандартным способом сохраняем его в gif анимацию.
Единственный момент, который нужно учесть - это частоту кадров, потому что в отличии от второго способа здесь у нас нет возможности в фотошопе задать частоту кадров, поэтому это нужно делать непосредственно в самом After Effects перед рендерингом.
Вот такие три способа экспорта gif анимации из After Effects мы сегодня разобрали, а какой из них удобнее и эффективнее, думаю каждый уже из вас выберет для себя сам.
Показываю 3 способа, как экспортировать гифку из Adobe After Effects.
Добавляйте в закладки — вам обязательно пригодиться!
Есть еще вариант экспорта через FFMPEG, но как по мне, он слишком заморочливый и если нужно рендерить много гифок, проще купить плагин GifGun, чтобы сохранять в один клик.
Еще видео по теме:
Видеомонтаж
603 поста 4.7K подписчиков
Правила сообщества
Критикуй, мамкин оператор.
Лайфхак, чем больше вы поймёте, тем меньше придётся запоминать
Как избавиться от запаха в обуви в домашних условиях?
Предыстория:
Всю свою жизнь дико пахли ноги и вся моя обувь. Я их мыл постоянно, но стоило день походить и вечером вас ждал зловонный сюприз.
Чего я только не делал: мыл с дегтярным мылом( чуть-чуть помогало), обрабатывал перекисью, делал ванночки из коры дуба, мазал пастой теймурова, забрызгивал спиртом по неск раз в день, обрабатывал хлоргескидином 1%, стирал кожу на пятках, коротко-коротко подстригал ногти и мыл ноги по три раза в день
Но ничего из этого либо не помогало совсем, либо помогало на день-два.
Решение:
В штатах загуглил данный вопрос и оказалось что, американцы используют спрей Лизол ( Lysol) который уничтожает все бактерии, вирусы и грибки. Но используют его просто, чтобы убрать запахи животных, сигарет и других неприятнопахнущих вещей.
Но на форуме спортсменов я нашел несколько советов, что люди опрыскивали им комки бумаги и оставляли на ночь в обуви и запах из обуви пропадал( ну оно и понятно, все организмы там погибли)
Я не вдавался в вопрос насколько он вреден при разбрызгивании на кожу, но его можно применять на пищевых поверхностях и указано, что безопасен для детей.
Я решил испытать средство на своих ногах, так как реально перепробовал почти все способы борьбы с запахом.
И О ЧУДО, после двух применений на обувь и на ноги, всё просто перестало пахнуть.
Я столько лет терпел это, мне было стыдно прийти в гости, стыдно снимать обувь в примерочных и магазинах. И наконец этот груз упал с плеч.
Как я делал:
Кроссовки постирал - высушил и забрызгал внутрь. Оставил на ночь.
Ноги помыл, вытер насухо и обрызгал и промассировал так, чтобы все попало между пальцев и под ногти и на ногти.
Дал высохнуть ногам
А потом процесс повторял каждый раз, как мылся.
И даже если неделю не брызгать, ноги не пахнут.
В России видимо не так распространён, хотя на озоне отзывы есть, но совсем по другому использованию.
В общем за 400 рублей это лучшее средство, отпишетесь, кому поможет.
Всем здоровья)
Ну и фото этого чуда ( продается и в России, правда в отличии от того, что сделано в США не такой сильный запах, да оно и к лучшему):
Анимация в сети здесь, чтобы остаться. Это во всем, от тонких движений, которые помогают нам Дизайн интерфейса к жизни, к полностью анимированным впечатлениям от Canvas и экспериментам WebGL, которые бросают вызов тому, что мы когда-то считали возможным в браузере.
В то время как творческие способности разработчиков и возможности браузеров растут, анимация в Интернете долгое время плохо относилась к видео - к этому сообщество анимационной графики с осторожностью подходило годами.
Разработчики полагались на библиотеки, такие как GreenSock и Snap.svg, чтобы сделать тяжелую работу по воспроизведению анимации через JavaScript. Хотя эти инструменты обладают большой гибкостью, они не могут сравниться с точностью и тонкостью анимации, которую можно достичь с помощью After Effects CC Хронология и смягчение графиков. С веб-точки зрения After Effects очень хорошо подходит для настройки и опробования движения перед его фиксацией в коде.
Бодемовин: волшебная функция «Рендеринг для веб» Adobe забыл [все изображения: Hungry Sandwich Club]
Войти Bodymovin революционное расширение для Adobe After Effects, которое экспортирует анимацию непосредственно из After Effects в JavaScript для отображения и управления в браузере. Создано Эрнан Торриси Бодемовин устраняет многие барьеры между аниматором и разработчиком. На своем базовом уровне плагин действует как волшебная функция «рендеринга для веб», которую Adobe забыл. В его самом продвинутом это открывает новые возможности для интерактивной мультипликации.
Bodymovin - это связующее звено в цепочке инструментов, плагинов и систем, растущих для удовлетворения некоторых из этих новых возможностей. Airbnb's Lottie а также Ключевые кадры Facebook оба опираются на эти основы - и, наконец, они предлагают самый мощный инструмент анимации в сети.
Зачем использовать Бодемовин?
SVG завладел интернетом и принес с собой ожидание того, что все должно быть качественным, легким и масштабируемым. Бодемовин переводит все в вашей композиции в великолепно четкий SVG, который сохраняет свое векторное качество в любом размере. Больше никаких компромиссов, чтобы облегчить этот GIF или заставлять пользователей загружать раздутые видеофайлы.
Помимо упрощения процесса экспорта ваших анимаций, Bodymovin открывает перед разработчиками гораздо больше возможностей для творчества с помощью новых интерактивных возможностей. Посетите CodePen, чтобы узнать о некоторых фантастических способах использования расширения - от интерактивных оснасток IK до интерактивного текста с анимацией по мере ввода текста.
Все отрисовано в дружественном к сети SVG, и четком, и легком
Экспортированной анимацией можно управлять в браузере, как и любым другим элементом, что позволяет нам рассматривать анимацию как интерактивный и экспериментальный инструмент в веб-дизайне. А теперь, благодаря Бодимовину, показ ваших анимаций в Интернете стал еще проще. В этом руководстве вы узнаете, как экспортировать анимацию из After Effects и создать простую циклическую анимацию, которая реагирует на щелчки пользователя.
Как подготовить файлы After Effects
Поддержка функций After Effects значительно улучшилась, и вы можете ожидать, что получите довольно хорошие результаты прямо из коробки. Тем не менее, ваши модные летающие 3D-слои не будут играть хорошо, поэтому имейте в виду ограничения, прежде чем начать. Прежде чем начать проект, всегда загружайте последнюю версию Bodymovin и проверяйте страницу GitHub, чтобы увидеть, какие функции в настоящее время поддерживаются.
Не спешите переходить к забавной части… аккуратные файлы создают аккуратный ум. В этом случае они также помогут убрать часть дополнительной работы из браузера и дать вам плавное плавное воспроизведение. Во-первых, вы хотите убедиться, что ваш контент находится в слоях формы After Effects для полной мощности вектора. Чтобы преобразовать любой файл Illustrator в слои фигур, вы можете просто щелкнуть правой кнопкой мыши и выбрать «Создать фигуры из векторного слоя». Любые слои, которые не являются фигурами на этом этапе, будут преобразованы в изображения, и они не будут отображаться как векторы.
Затем проверьте ваши слои и подслои; есть хороший шанс, что вы можете упростить содержимое фигуры, не жертвуя чем-либо. Постарайтесь сократить количество групп, путей и заливок только до самого необходимого.
Береги себя с масками
Маски - это простой способ ускользнуть на этом этапе. Имейте в виду, что альфа-маски будут работать с рендерером SVG, но не будут отображаться, если вы решите переключиться на Canvas. Маски могут быть дорогими по производительности, поэтому используйте их эффективно.
Rendering
Bodymovin состоит из двух частей - расширения After Effects, которое преобразует данные анимации в файл JSON, и проигрывателя Bodymovin.js для включения в вашу веб-страницу, которая может интерпретировать этот файл и отображать его в браузере.
Думаешь, твои файлы хороши? Откройте расширение Bodymovin через Окно> Расширения, а затем Bodymovin.
Проверьте свои слои - это может быть неподдерживаемая функция или выражение, используемое в After Effects
Чтобы проверить только что экспортированную анимацию, нажмите «Просмотр»> «Текущие отрисовки» и не забудьте прокрутить временную шкалу, так как вы можете заметить что-то, что выглядит немного иначе, чем вы ожидаете. Если вы обнаружите какие-либо проблемы, вернитесь назад и проверьте свои слои - это может быть неподдерживаемая функция или выражение, используемое в After Effects.
Некоторые плагины After Effects, такие как Rubberhose, теперь поддерживают Bodymovin. Rubberhose использует направляющие слои и скрытые слои. Чтобы активировать их, просто нажмите на значок настройки рядом с выбранной композицией и отметьте нужные функции.
Если все выглядит хорошо, есть еще одна вещь, которую вам нужно сделать, прежде чем оставить After Effects позади. На этом этапе у вас должен быть свежий файл data.json, описывающий вашу анимацию, но нет плеера Bodymovin, который бы ее интерпретировал. В расширении нажмите кнопку «Get the player» в правом верхнем углу и сохраните ее с файлом JSON.
Загрузите анимацию
Теперь у вас есть все, что вам нужно, давайте перейдем прямо к коду и изложим основы, чтобы ваша анимация отображалась на странице.
Давайте пройдемся по настройке шаг за шагом:
var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = ; var anim = bodymovin.loadAnimation (animData);
Вам нужно определить все параметры для анимации. Скажите Bodymov в контейнере, что вы хотите, чтобы анимация загружалась, а затем попросите его визуализировать анимацию как элементы SVG. Затем скажите анимации, что она воспроизводится, как только она загружена, и вы хотите, чтобы она возвращалась к началу после завершения.
Свойство path сообщает проигрывателю Bodymovin, где найти файл данных JSON для анимации. Из-за политики совместного использования ресурсов (CORS), метод, который вы будете использовать для доступа к файлу JSON, будет работать, только если вы находитесь на сервере или локальном сервере. Чтобы работать локально, вы можете превратить этот data.json в файл JavaScript, который присваивает объект переменной. В этом случае ваша установка может выглядеть так:
<script src = "js / data.js"> </ script> <script> var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = ; var anim = bodymovin.loadAnimation (animData); </ Скрипт>
Обновите страницу, и ваша анимация должна воспроизводиться внутри контейнера. Выберите ваши инструменты разработки, и вы увидите, что каждый элемент в анимации теперь содержится в тегах <g> и преобразуется в режиме реального времени.
Выглядит потрясающе, верно? Теперь у вас должна быть красивая, четкая анимация, отображаемая в браузере (без видимого убогого тега видео…). Анимация всегда будет масштабироваться так, чтобы соответствовать ее контейнеру, так что дерзайте!
У Bodymovin есть ряд мощных методов управления анимацией после ее загрузки. Вызов метода, такого как anim.pause () или anim.setDirection () , позволит вам управлять воспроизведением различными способами. Давайте посмотрим на некоторые примеры:
- anim.setDirection (-1) будет воспроизводить анимацию в обратном порядке.
- anim.pause () и anim.play () запустят и остановят анимацию
- anim.setSpeed (0.5) будет воспроизводить анимацию с половинной скоростью
Добавить взаимодействие
На следующем шаге вы изучите несколько различных способов добавления взаимодействия к вашей анимации через JavaScript. В этом примере мы экспортируем анимацию After Effects с двумя секциями: секция A и секция B. Секция A использует кадры от одного до 20 (треугольник держит свою ручку-пого), секция B использует кадры от 20 до 40 (треугольник прыгает вверх и вниз на пого палку).
Теперь вы хотите воспроизвести раздел a в цикле, а затем (только после щелчка пользователем) воспроизвести и воспроизвести цикл B. Вы можете использовать свойство playSegments, чтобы разделить анимацию таким образом. Этот метод будет принимать два аргумента - массив с начальными и конечными значениями и вторым логическим значением - isFrame. Если для этого параметра установлено значение true, анимация будет считывать начальные и конечные значения в виде кадров, а значение false - для чтения этих значений как времени.
anim.pause (); anim.playSegments ([0,20], true);
Добавив это, Бодимовин должен остановиться на первом кадре и воспроизвести только анимацию от 0 до 20 кадров. Когда вы настроите анимацию с помощью свойства loop: true, она продолжит воспроизводить раздел A снова и снова.
Давайте настроим весь пример. В этом примере вы будете использовать два сегмента анимации, поэтому создадите две функции:
var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = ; var anim = bodymovin.loadAnimation (animData); // Когда анимация загружена, запускаем нашу функцию firstLoop anim.addEventListener ('DOMLoaded', firstLoop); // Создаем наши функции воспроизведения function firstLoop () ; function secondLoop () ; // Прослушивание события щелчка container.addEventListener ('click', function (event) );
Путь! Теперь ваша анимация будет повторяться до тех пор, пока пользователь не нажмет на нее, а затем начнется второй цикл. Единственная проблема сейчас в том, что такой скачок очень резкий и может нарушить плавность анимации.
Идеальная ситуация - включить в анимацию третий раздел, переходящий от удержания пого-палки к прыжкам на нем. Теперь ваша структура будет выглядеть примерно так:
- firstLoop - кадр от 0 до 20
- переход - кадр с 20 по 30
- secondLoop - кадр от 30 до 50
Мы хотим, чтобы ваша анимация оставалась в первом цикле, пока она не будет нажата. В этот момент вам захочется дождаться окончания цикла, в котором вы сейчас находитесь, и перейти к переходу. После завершения перехода перейдите ко второму циклу. Это звучит сложно, но оставайтесь со мной! Вот ваш код в полном объеме:
var container = document.getElementById ('anim_container'); // Настройка нашей анимации var animData = ; var anim = bodymovin.loadAnimation (animData); // Когда анимация загружена, запускаем нашу функцию firstLoop anim.addEventListener ('DOMLoaded', firstLoop); // Создаем наши функции воспроизведения function firstLoop () ; function transition () ; function secondLoop () ; // Прослушивание события щелчка container.addEventListener ('click', function (event) );
При щелчке вы используете прослушиватель loopComplete, чтобы дождаться достижения последнего кадра цикла, а затем запустите свою функцию transition () . Здесь вы удаляете последнего слушателя, воспроизводите следующий набор кадров, а затем делаете то же самое снова. После завершения перехода он вызовет secondLoop () .
Это оно!
Вы работали с некоторыми из функций Bodymovin сегодня, но если вы заинтересованы в получении дополнительной информации о плагине, вы можете найти множество информации о Бодемовин GitHub стр. Дополнительные примеры можно найти во впечатляющей коллекции Bodymovin CodePen.
Надеемся, что этот урок даст вам представление о различных способах комбинирования использования After Effects и Bodymovin для создания анимации супер-охлаждения для Интернета!
Отдельный раздел для каждой части анимации
Теперь вы можете настроить анимацию для экспорта в Интернет, перенести экспортированные файлы в браузер и сделать анимацию реагирующей на нажатия. Подумайте не только о файлах MP4, которые вы ранее использовали, и обращайтесь к Bodymovin за созданием в будущем более богатых веб-приложений.
Возможность привлекать аниматоров к процессу разработки становится все более и более важной, а область веб-анимации движется невероятно быстро. С постоянно растущей коллекцией новых расширений, плагинов и платформ, аниматоры и разработчики могут ожидать, что этот процесс станет легче и лучше с течением времени. Я, например, не могу дождаться, чтобы увидеть, что ждет в будущем.
Эта статья изначально появилась в чистый журнал в 2017 году. Подпишитесь здесь ,
Анимация — это изменение с течением времени. Слой или эффект слоя анимируется путем изменения одного или нескольких его свойств с течением времени. Например, можно анимировать свойство слоя «Непрозрачность» от 0 % в нулевой момент времени до 100 % в момент времени 1 секунда, чтобы слой постепенно появился на экране. Анимировать можно любое свойство, у которого есть кнопка секундомера слева от его названия на панели «Таймлайн» или «Элементы управления эффектами».
A. Активный секундомер B. Неактивный секундомер
Свойства слоя анимируются с помощью ключевых кадров, выражений или обоих этих параметров.
Многие шаблоны настроек анимации включают ключевые кадры и выражения. Это позволяет применить конкретный шаблон настроек к слою, чтобы быстро получить сложную анимацию.
Работа с ключевыми кадрами и выражениями в After Effects ведется в одном из двух режимов: панель слоев или редактор диаграмм. По умолчанию используется режим панели слоев, в котором слои представлены в виде панелей продолжительности, а ключевые кадры и выражения выровнены по вертикали с их свойствами на панели «Таймлайн». В режиме редактора диаграмм панели слоев не отображаются, но отображаются графики значений или диаграммы скорости с ключевыми кадрами и результатами выражений. (См. раздел Редактор диаграмм.)
Ключевые кадры
Ключевые кадры используются для задания параметров движения, эффектов, аудио и других свойств, которые обычно изменяются с течением времени. Ключевой кадр обозначает определенный момент времени, где задается значение для свойства слоя, такое как положение в пространстве, степень прозрачности или громкость звука. Значения между ключевыми кадрами интерполируются. При создании изменений с течением времени на основе ключевых кадров, как правило, используется не менее двух ключевых кадров: один содержит состояние в начале изменения, а второй — новое состояние в конце изменения. (См. раздел Установка или добавление ключевых кадров.)
Если для определенного свойства активен секундомер, приложение After Effects автоматически задает или изменяет ключевой кадр для свойства в точке текущего времени при каждом изменении значения свойства. Если секундомер для свойства неактивен, оно не имеет ключевых кадров. Если значение для свойства слоя изменить при неактивном секундомере, это значение останется неизменным на панели продолжительности слоя.
Если включен режим автоматического добавления ключевых кадров, секундомер будет автоматически включен для свойства при его изменении. (См. раздел Режим автоматического добавления ключевых кадров.)
Если секундомер отключить, все ключевые кадры для этого свойства слоя будут удалены, а значение постоянной для свойства будет заменено значением на текущий момент времени. Не отключайте секундомер, если только не уверены в необходимости безвозвратно удалить все ключевые кадры для этого свойства.
Значки ключевых кадров в режиме панели слоев можно заменить на числа, выбрав в меню панели «Таймлайн» команду «Использовать индексы ключевого кадра».
Если свернуть свойство слоя, содержащего ключевые кадры, для группы свойств будут показаны серые точки (сводные индикаторы ключевых кадров), представляющие содержащиеся в ней ключевые кадры.
Некоторые инструменты, такие как «Набросок движения» и «Марионетка», автоматически устанавливают ключевые кадры в соответствии с нарисованным движением.
Выражения
В выражениях используется язык сценариев на основе JavaScript для определения значений свойств и связей между свойствами. Можно создавать простые выражения, связывая свойства с помощь инструмента «Лассо». (См раздел Сведения о выражениях.)
Ресурсы в Интернете, посвященные анимации
См. видеоурок «Анимация изменения свойств с помощью ключевых кадров» от Джеффа Сенгстэка (Jeff Sengstack) и Infinite Skills.
Пошаговые учебные пособия, демонстрирующие анимацию отдельных слоев из файла Photoshop (PSD), см. в главе «Анимация слоев в After Effects» книги After Effects Classroom на веб-сайте Peachpit Press.
Редактор диаграмм представляет значения свойств анимации в виде двухмерного графика, на котором время композиции представлено по горизонтали (слева направо). В режиме панели слоев на диаграмме времени представлен только горизонтальный элемент времени без отображения графического вертикального представления изменяющихся значений.
Переключение между режимами панели слоев и редактора диаграмм выполняется кнопкой «Редактор диаграмм» на панели «Таймлайн» или сочетанием клавиш SHIFT+F3.
В редакторе диаграмм доступны два типа диаграмм: диаграммы значений, которые содержат значения свойств, и диаграммы скорости, показывающие скорость изменения значений свойств. Для временных свойств, таких как «Непрозрачность», в редакторе диаграмм используется по умолчанию диаграмма значений. Для пространственных свойств, таких как «Положение», в редакторе диаграмм используется по умолчанию диаграмма скорости. Дополнительные сведения о просмотре и изменении значений ключевых кадров см. в разделе Просмотр или изменение значений ключевых кадров.
В редакторе диаграмм каждое свойство представлено отдельной кривой. Одновременно просматривать и работать можно только с одним свойством, а просматривать одновременно можно несколько свойств. Если в редакторе диаграмм отображаются несколько свойств, кривая каждого свойства имеет тот же цвет, что и у значения свойства в структуре слоя.
При перетаскивании ключевого кадра в редакторе диаграмм с включенной кнопкой «Привязать» ключевой кадр будет привязываться к значениям ключевых кадров, временам ключевых кадров, текущему времени, точкам входа и выхода, маркерам, началу и концу рабочей области и началу и концу композиции. Если ключевой кадр привязывается к одному из этих элементов, что в редакторе диаграмм будет показана оранжевая линия, обозначающая объект, к которому выполнена привязка. Чтобы временно переключить режим привязки, удерживайте нажатой клавишу CTRL (Windows) или COMMAND (Mac OS) после начала перетаскивания.
У ключевых кадров в режиме редактора диаграмм могут быть дескрипторы направления с одной или обеих сторон. Дескрипторы направления используются для управления интерполяцией по кривой Безье.
С помощью кнопки «Разделить координаты» в нижней части редактора диаграмм можно разделить компоненты свойства «Положение» на отдельные свойства — «Положение по оси X», «Положение по оси Y» и (для 3D-слоев) «Положение по оси Z», — чтобы можно было независимо изменить или анимировать каждый из компонентов. (См. раздел Разделение координат «Положение» для отдельной анимации компонентов.)
Читайте также: