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

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

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

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

Содержание

• Просмотр путей перемещения
  • Опорные точки
  • Управляющие маркеры
• Изменение путей перемещения
  • Изменение траектории путей перемещения
  • Преобразование путей перемещения
  • Изменение скорости анимации
• Оптимизация
• Свойства путей перемещения
• Ограничения

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

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

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

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

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

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

Управляющие маркеры

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

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

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

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

Добавить опорную точку

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

Настроить изгиб

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

  Чтобы выпрямить путь перемещения, дважды нажмите на обе опорные точки.

Удалить опорную точку

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

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

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

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

Перетащите путь перемещения в другое место рабочей области.

Масштабирование пути перемещения

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

Отражение пути перемещения

• Перетащите элемент управления масштабированием через противоположный элемент.

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

• Чтобы повернуть путь перемещения, перетащите внешний элемент управления вращением (большее кольцо) по часовой стрелке или против нее.
• Чтобы ограничить вращение шагом в 45°, при перетаскивании удерживайте клавишу Shift.
• Чтобы переместить точку вращения, перетащите внутренний элемент управления вращением (меньшее кольцо) в другое место. Чтобы сбросить положение точки вращения, дважды нажмите на внутренний элемент управления вращением (при этом ориентация рамки масштабирования тоже сбросится).

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

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

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

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

Оптимизация

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

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

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

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

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

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

Ограничения

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