О путях перемещения

Эта функция недоступна для объявлений AMPHTML.

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

Для анимации с путями перемещения CSS использует приблизительные значения, поэтому анимированные элементы могут неточно проходить свои пути. Как правило, разница незаметна (по умолчанию меньше пикселя). Степень отклонения можно ограничить в свойствах пути перемещения.

О путях перемещения

Просмотр путей перемещения

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

example motion path

Одновременно можно просматривать только один путь перемещения.

Опорные точки

Опорные точки можно задать двумя способами:

  • Уменьшенные изображения или ключевые кадры, которые определяют новое положение по оси X или Y для элемента, автоматически создают опорные точки. Исходная и конечная опорные точки всегда располагаются на ключевых кадрах.
  • Использовать инструмент Путь перемещения.

Элементы управления

Элементы управления видны, если выбран инструмент Путь перемещения Motion path tool icon. С каждым отрезком между опорными точками связаны два элемента управления: по одному для каждой точки. Длина и направление элемента управления показывают изгиб пути перемещения. Для прямых линий элементы управления располагаются вровень с отрезком или сворачиваются.

example motion path with control handles

Изменение путей перемещения

Изменение траектории путей перемещения

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

  • Добавить опорную точку
    • Добавьте уменьшенное изображение или ключевой кадр, который изменит положение элемента. Таким образом вы создадите опорную точку, с помощью которой можно изменить динамику.
    • Используйте функцию Добавить опорную точку Icon for the "Add anchor point" option for the Motion path tool инструмента "Путь перемещения" Motion path tool icon. Просто нажмите на участок пути перемещения и добавьте опорную точку, изменяющую траекторию. При этом уменьшенное изображение или ключевой кадр не будут добавлены.
  • Настроить изгиб
    • Выберите инструмент выделения или параметр по умолчанию default option icon for the Motion path tool для инструмента "Путь перемещения" Motion path tool icon, а затем перетащите любой участок, включая опорные точки, чтобы изменить траекторию пути.
    • Выберите инструмент Путь перемещения Motion path tool icon, а затем перетащите элементы управления, настраивая их длину и угол наклона, чтобы изменить изгиб пути перемещения. Когда к одной опорной точке привязан ещё один элемент управления, его угол наклона автоматически адаптируется, если не удерживать нажатой клавишу Alt.
    • Чтобы свернуть связанные элементы управления, дважды нажмите на опорную точку. (Участок с двумя свернутыми элементами управления отображается как прямая линия.) Чтобы развернуть элементы управления, снова дважды нажмите на точку.
  • Удалить опорную точку
    • Используйте функцию Удалить опорную точку Icon for the "Delete anchor point" option for the Motion path tool инструмента "Путь перемещения" Motion path tool icon. Просто нажмите на опорную точку, чтобы удалить ее. Вместе с ней будут также удалены уменьшенное изображение или ключевой кадр, если их анимированные свойства связаны только с путем перемещения.
    • Вместе с уменьшенным изображением или ключевым кадром также удаляется участок пути перемещения, который заканчивается на этом изображении или кадре.

Преобразование путей перемещения

Чтобы перемещать, масштабировать, отражать или поворачивать пути перемещения, выберите инструмент "Путь перемещения" Motion path tool icon, а потом на панели настроек инструмента установите флажок Управление трансформацией. Если этот параметр включен, при выборе элемента с путем перемещения отображаются элементы управления трансформацией.

  • Перенос пути перемещения
    • Перетащите путь перемещения в другое место рабочей области.
  • Масштабирование пути перемещения
    • Выбранный путь перемещения заключен в синюю рамку с элементами управления на каждой стороне и в каждом углу. Перетащите элемент управления, чтобы масштабировать путь.
    • Чтобы сохранить исходные пропорции, при перетаскивании удерживайте клавишу Shift.
    • Чтобы центральная точка пути перемещения осталась на том же месте, удерживайте при перетаскивании клавишу Alt.
    • Чтобы масштабировать путь перемещения в другом направлении, поверните рамку масштабирования. Для этого введите градус поворота в поле motion path rotation field на панели настроек инструмента. Кроме того, можно использовать стрелку влево или вправо, удерживая клавишу Alt (Windows) или Option (Mac). Шаг поворота при этом составит 5°. Значение в поле всегда сбрасывается до 0°, поэтому вводите нужный градус поворота относительно текущего положения. Вращение рамки масштабирования не изменяет ориентацию самого пути перемещения.
    • Чтобы сбросить ориентацию рамки масштабирования, дважды нажмите на внутренний элемент управления вращением (меньшее кольцо). При этом положение точки вращения тоже сбросится.
  • Отражение пути перемещения
    • Перетащите элемент управления масштабированием через противоположный элемент.
  • Поворот пути перемещения
    • Чтобы повернуть путь перемещения, перетащите внешний элемент управления вращением (большее кольцо) по часовой стрелке или против нее.
    • Чтобы ограничить вращение шагом в 45°, при перетаскивании удерживайте клавишу Shift.
    • Чтобы переместить точку вращения, перетащите внутренний элемент управления вращением (меньшее кольцо) в другое место. Чтобы сбросить положение точки вращения, дважды нажмите на внешний элемент управления вращением (при этом ориентация рамки масштабирования тоже сбросится).

Редактирование пути перемещения

Изменение скорости анимации

Чтобы управлять скоростью анимации объекта на его пути перемещения, можно изменять продолжительность отображения уменьшенных изображений или ключевых кадров, а также их динамику. Кроме того, можно зацикливать анимацию пути перемещения.

Опорные точки, добавленные с помощью инструмента "Путь перемещения", не влияют на скорость анимации. Для этого добавьте уменьшенное изображение или ключевой кадр.

Оптимизация

При каждом создании или изменении пути перемещения Google Web Designer автоматически оптимизирует анимацию, уменьшая количество CSS, используемых для обработки. При этом соблюдаются ограничения, заданные в свойствах пути перемещения. Чем строже ограничения, тем точнее анимация следует по пути перемещения, однако при этом ухудшается оптимизация.

Для дополнительного сжатия нажмите кнопку Оптимизировать кривую Optimize curve button в свойствах пути перемещения. Этот процесс может длиться дольше, чем автоматическая оптимизация.

Для выбранного элемента на панели свойств Google Web Designer показывает приблизительный размер пути перемещения – дисковое пространство, которое путь перемещения займет после публикации документа.

Свойства путей перемещения

Свойства пути перемещения отображаются на панели свойств, если добавить опорную точку с помощью инструмента Путь перемещения или преобразовать путь в кривую.

Свойство Описание
Ориентироваться на путь Если это свойство включено, элемент вращается во время анимации в соответствии с направлением пути перемещения (например, при спуске по кривой элемент наклоняется вниз). Точностью вращения можно управлять с помощью свойства Допустимое отклонение угла.
Допустимое отклонение положения Определяет степень отклонения элемента от направления пути перемещения.
  • По умолчанию: 0,5 пикс.
  • Минимальное значение: 0,1 пикс.
  • Максимальное значение: 100 пикс.
Допустимое отклонение угла Определяет, насколько ориентация элемента может отклоняться от направления пути перемещения. Можно использовать, только если включено свойство Ориентироваться на путь.
  • По умолчанию: 1°
  • Минимальное значение: 1°
  • Максимальное значение: 360°
Оптимизировать кривую Кнопка Optimize curve button позволяет уменьшить размер CSS, используемых для создания анимации пути перемещения. После оптимизации эта кнопка отключается до изменения пути перемещения.
Прогнозируемый размер Показывает приблизительный размер пути перемещения. Для дополнительного сжатия необходимо нажать кнопку Оптимизировать кривую.

Ограничения

  • Положение по верхнему/левому краю: пути перемещения не поддерживают положение по верхнему/левому краю. Используйте вместо него свойство CSS transform (по умолчанию).
  • 3D-анимация: Google Web Designer не поддерживает пути 3D-анимации. 3D-преобразования можно применить только к отдельному элементу.
  • Панель CSS: панель CSS не влияет на пути перемещения, однако стили по-прежнему применяются к элементу.
  • Просмотр кода: в режиме просмотра кода невозможно просматривать и изменять пути перемещения.
  • Объявления AMPHTML: нельзя использовать путь перемещения в объявлениях AMPHTML.
Эта информация оказалась полезной?
Как можно улучшить эту статью?