Редактор анимаций
Запуск редактора
Для того чтобы вызвать окно настройки анимации, необходимо, находясь в окне "Редактор фигур", выбрать любой элемент в области редактирования, к которому требуется применить анимацию, и в поле "Анимация" нажать кнопку ...
Станет доступно диалоговое окно "Редактор анимаций", в котором при активации кнопки ➕ можно выбрать один или несколько видов анимации для выбранного объекта:
Float-анимация
Boolean-анимация
Цветовая анимация
➕ — добавить новую анимацию.
❌ — удалить выбранную анимацию.
Float-анимация
Float-анимация управляет плавной трансформацией объектов через изменение позиции, масштаба, формы и визуальных характеристик, включая сложные вращательные движения со статическим или динамическим центром вращения.
- Имя — уникальный идентификатор анимации.
- Задержка перед запуском — время задержки (в секундах) между выполнением условия активации и началом воспроизведения анимации.
- Продолжительность — длительность (в секундах) одного цикла анимации от начального до конечного состояния.
- Активность — флаг управления состоянием анимации:
- Вкл — анимация активна и выполняется при выполнении условий.
- Выкл — анимация приостановлена, независимо от условий срабатывания.
- Повторять по кругу — флаг управления цикличностью анимации:
- Вкл — анимация зациклена и повторяется непрерывно.
- Выкл — анимация воспроизводится однократно при каждом выполнении условия.
- Переворот после круга — флаг управления направлением циклического воспроизведения:
- Вкл — при зацикливании анимация проигрывается в прямом и обратном направлении (возврат к началу).
- Выкл — при зацикливании анимация каждый раз начинается с начального состояния.
- Интерполяция — Метод расчета промежуточных кадров анимации между начальным и конечным состоянием:
- Линейная — равномерное изменение значения свойства с постоянной скоростью на протяжении всей анимации.
- Квадратная — плавное ускорение движения от начальной точки с постепенным увеличением скорости.
- Кубическая — более выраженное ускорение по сравнению с квадратной интерполяцией.
- Квартическая — интенсивное ускорение в начале анимации.
- Квинтетная — максимально резкое ускорение в начальной фазе движения.
- Синусоидальная — плавное изменение скорости с точкой перегиба в конечной позиции.
- Экспоненциальная — экспоненциальный рост скорости от начальной точки.
- Круговая — движение по дуге окружности с вертикальным завершением в конечной точке.
- Упругая — затухающие колебания вокруг конечного значения с переменной амплитудой.
- Обратная — движение к целевому значению с последующим возвратом к исходному состоянию.
- Подпрыгивающая — серия отскоков с уменьшающейся амплитудой, имитирующая прыгающий мяч.
- Начальное значение при выключении — флаг управления состоянием компонента при остановке анимации:
- Вкл — компонент возвращается в начальное положение (первый кадр анимации).
- Выкл — компонент сохраняет текущее положение, достигнутое на момент остановки анимации.
- Начальное значение при выключении, Анимирование — флаг управления способом возврата в исходное состояние:
- Вкл — компонент плавно возвращается в начальное положение с анимацией.
- Выкл — компонент сохраняет позицию, достигнутую в момент остановки анимации.
- Свойство — тип анимации.
- Начальное значение — начальное состояние анимируемого свойства:
- При перемещении или изменении размеров — начальная координата или размер.
- При повороте — начальный угол в градусах.
- При работе с заливкой — начальный уровень в диапазоне 0,0 - 1,0.
- Конечное значение — конечное состояние анимируемого свойства:
- При перемещении или изменении размеров — конечная координата или размер.
- При повороте — конечный угол в градусах.
- При работе с заливкой — конечный уровень в диапазоне 0,0 - 1,0.
| Свойство | Описание |
|---|---|
EndValue |
Изменение конечного значения шкалы (линейная/дуговая шкалы) |
Left |
Горизонтальное перемещение компонента |
Height |
Изменение высоты компонента |
Fill.Gradient.CenterX |
Горизонтальное смещение центра радиального градиента заливки |
Fill.Gradient.CenterY |
Вертикальное смещение центра радиального градиента заливки |
Fill.Gradient.Radius |
Изменение радиуса градиентной заливки |
Fill.LevelProcent |
Изменение уровня заливки (при включенном свойстве "Заливка.Уровень") |
Font.Size |
Изменение размера шрифта текста |
RadiusX |
Скругление углов по оси X (используется вместе с RadiusY) |
RadiusY |
Скругление углов по оси Y (используется вместе с RadiusX) |
Rotate.Angle |
Вращение компонента вокруг заданного центра |
Rotate.CenterX |
Изменение X-координаты центра вращения |
Rotate.CenterY |
Изменение Y-координаты центра вращения |
StartAngle |
Изменение начального угла (компонент дуга/пирог) |
Start.Value |
Изменение начального значения шкалы (линейная/дуговая шкалы) |
Stroke.Width |
Изменение толщины обводки компонента |
SweepAngle |
Изменение угла развертки (компонент дуга/пирог) |
Top |
Вертикальное перемещение компонента |
Width |
Изменение ширины компонента |
Boolean-анимация
Boolean-анимация управляет видимостью и состоянием графических объектов, позволяя скрывать или показывать элементы, изменять их внешний вид (заливку, форму окончаний линий), а также активировать перенос текстового содержимого.
- Задержка перед запуском — время (в секундах) между выполнением условия активации и началом воспроизведения анимации.
- Продолжительность — длительность (в секундах) одного цикла анимации от начального до конечного состояния.
- Активность — флаг управления состоянием анимации:
- Вкл — анимация активна и выполняется при выполнении условий.
- Выкл — анимация приостановлена, независимо от условий срабатывания.
- Повторять по кругу — флаг управления цикличностью анимации:
- Вкл — анимация зациклена и повторяется непрерывно.
- Выкл — анимация воспроизводится однократно при каждом выполнении условия.
- Переворот после круга — флаг управления направлением циклического воспроизведения:
- Вкл — при зацикливании анимация проигрывается в прямом и обратном направлении (возврат к началу).
- Выкл — при зацикливании анимация каждый раз начинается с начального состояния.
- Свойство — тип анимации.
| Свойство | Описание |
|---|---|
ArcVisible |
Управление видимостью линии дуговой шкалы |
ConnectCenter |
Управление видимостью перемычки, соединяющей концы дуги |
Fill.Leveling |
Анимация уровня заливки от текущего значения до 100% |
HorzAlign |
Включение/отключение горизонтального выравнивания текста |
LineVisible |
Управление видимостью линии шкалы (линейной/дуговой) |
Stroke.RoundCap |
Включение/отключение закругления концов обводки |
TickVisible |
Управление видимостью штрихов шкалы |
TickTipVisible |
Управление видимостью числовых значений шкалы |
VertAlign |
Включение/отключение вертикального выравнивания текста |
Visible |
Периодическое включение/отключение видимости компонента |
Wrapping |
Управление переносом строк в текстовом содержимом |
Цветовая анимация
Цветовая анимация управляет цветовыми характеристиками графических объектов, позволяя динамически изменять цвет текста, заливки и окантовки компонентов в заданном диапазоне цветов.
- Имя — уникальный идентификатор анимации.
- Задержка перед запуском — время задержки (в секундах) между выполнением условия активации и началом воспроизведения анимации.
- Продолжительность — длительность (в секундах) одного цикла анимации от начального до конечного состояния.
- Активность — флаг управления состоянием анимации:
- Вкл — анимация активна и выполняется при выполнении условий.
- Выкл — анимация приостановлена, независимо от условий срабатывания.
- Повторять по кругу — флаг управления цикличностью анимации:
- Вкл — анимация зациклена и повторяется непрерывно.
- Выкл — анимация воспроизводится однократно при каждом выполнении условия.
- Переворот после круга — флаг управления направлением циклического воспроизведения:
- Вкл — при зацикливании анимация проигрывается в прямом и обратном направлении (возврат к началу).
- Выкл — при зацикливании анимация каждый раз начинается с начального состояния.
- Интерполяция — метод расчета промежуточных кадров анимации между начальным и конечным состоянием:
- Линейная — равномерное изменение значения свойства с постоянной скоростью на протяжении всей анимации.
- Квадратная — плавное ускорение движения от начальной точки с постепенным увеличением скорости.
- Кубическая — более выраженное ускорение по сравнению с квадратной интерполяцией.
- Квартическая — интенсивное ускорение в начале анимации.
- Квинтетная — максимально резкое ускорение в начальной фазе движения.
- Синусоидальная — плавное изменение скорости с точкой перегиба в конечной позиции.
- Экспоненциальная — экспоненциальный рост скорости от начальной точки.
- Круговая — движение по дуге окружности с вертикальным завершением в конечной точке.
- Упругая — затухающие колебания вокруг конечного значения с переменной амплитудой.
- Обратная — движение к целевому значению с последующим возвратом к исходному состоянию.
- Подпрыгивающая — серия отскоков с уменьшающейся амплитудой, имитирующая прыгающий мяч.
- Без интерполяции — отсутствие плавных переходов; значение свойства изменяется скачкообразно, мгновенно переключаясь между начальным и конечным состояниями в момент завершения анимации.
- Начальное значение при выключении — флаг управления состоянием компонента при остановке анимации:
- Вкл — компонент возвращается в начальное положение (первый кадр анимации).
- Выкл — компонент сохраняет текущее положение, достигнутое на момент остановки анимации.
- Начальное значение при выключении, Анимирование — флаг управления способом возврата в исходное состояние:
- Вкл — компонент плавно возвращается в начальное положение с анимацией.
- Выкл — компонент сохраняет позицию, достигнутую в момент остановки анимации.
- Свойство — тип анимации.
- Начальное значение — начальное значение цвета.
- Конечное значение — конечное значение цвета.
| Свойство | Описание |
|---|---|
Color |
Плавное изменение цвета текстового содержимого от начального до конечного цвета |
Fill.Color |
Плавное изменение цвета заливки компонента от начального до конечного цвета |
Stroke.Color |
Плавное изменение цвета окантовки компонента от начального до конечного |
Пример разработки анимации
В качестве примера работы с "Редактором анимаций" предлагается создать уникальный графический элемент "Вентилятор" и применить к нему анимацию, имитирующую вращение лопастей вокруг своей оси.
Пример создания такого элемента также рассматривается в соответствующем видеоуроке.
Для создания нового графического объекта в редакторе мнемосхем необходимо добавить в область редактирования компонент "Пустая фигура" из "Палитры компонентов". Далее необходимо нажать правую кнопку мыши на компоненте и в контекстном меню выбрать "Редактировать копию".
В диалоговом окне "Создание новой фигуры" необходимо указать имя и нажать кнопку "Ок".
Сначала желательно настроить ширину, высоту и прозрачность фона элемента в "Инспекторе свойств". После этого следует выбрать инструмент "Путь Безье" и нарисовать контур лопасти вентилятора.
Для придания линиям лопасти более плавного контура необходимо использовать инструмент "Изменение вершин". После выбора данного инструмента на фигуре появятся маркеры, позволяющие задать необходимый изгиб фигуры (желтый маркер) и изменить форму (фиолетовый маркер). Описание всех маркеров приведено в соответствующей таблице раздела "Общие настройки".
После внесения изменений в контур необходимо выбрать инструмент "Изменение границ", выбрать фигуру в области редактирования и применить нужную заливку ко всей лопасти.
Для создания второй лопасти необходимо выполнить копирование уже существующего объекта. Это можно сделать с помощью контекстного меню или комбинации клавиш Ctrl+C. Затем следует вставить скопированный объект из буфера обмена, чтобы создать его дубликат. Выбрать вторую лопасть, определить для неё центр вращения Y, равным 1, и задать угол 120°, для разворота лопасти.
Для создания третьей лопасти необходимо повторить все операции, выполненные на предыдущем этапе, за исключением угла поворота. Значение угла поворота должно быть установлено равным 240°. В результате в области редактирования будут созданы три отдельных графических элемента (лопасти), расположенных в соответствии с заданными параметрами.
Для удобства измененеия наименования каждого элемента рекомендуется выделить его в разделе "Структура" и присвоить имя, соответствующее по смыслу.
Для объединения всех элементов в одну фигуру можно выбрать их, используя инструмент выделения с зажатой левой кнопкой мыши (либо указывая каждый элемент с зажатой клавишей Ctrl в разделе "Структура"), и затем нажать кнопку "Группировать" на панели инструментов или в контекстном меню.
Далее необходимо добавить геометрическую фигуру "Эллипс" для придания вентилятору большей реалистичности.
Для настройки внешнего управления анимацией необходимо перейти в "Редактор аргументов" и добавить аргумент логического типа. Для аргумента установить флаг "Видимость в свойствах", "Видимость в привязках" и значение по умолчанию.
Для настройки вращения вентилятора требуется выбрать сгруппированную фигуру и нажать кнопку ... в поле "Анимации".
В открывшемся окне "Редактор анимаций" с помощью кнопки ➕ добавить "Float-анимацию".
В свойствах анимации необходимо задать длительность одного цикла анимации, выбрать флаги "Активность" и "Повторять по кругу". В поле "Свойство" выбрать "Rotate.Angle" (вращение компонента вокруг заданного центра), в поле "Конечное значение" указать угол в градусах (360) и нажать кнопку "Ок".
После этого перейти в "Редактор привязок".
Для того чтобы привязать анимацию фигуры к активному тегу, необходимо создать привязку с помощью кнопки ➕, а также определить для неё "Выражение". В противном случае управление анимацией фигуры будет невозможно.
После этого необходимо определить цель. Целью будет являться анимация, добавленная в "Редакторе анимаций". Также для цели необходимо указать Свойство "Enabled" и подтвердить все выполенные настройки, нажав кнопку "Ок" в окнах "Редактор целей", "Редактор привязок" и "Редактор фигур".
В диалоговом окне с предложением установки значений по умолчанию необходимо нажать кнопку "Да".
После возвращения среды разработки в режим редактирования мнемосхем, проверить работу анимации фигуры можно, активировав флаг "Переменная". При активации флага, вентилятор начнёт непрерывно вращаться, а при деактивации — вернётся в исходное состояние.
Чтобы анимация останавливалась без возврата к исходному состоянию, необходимо вернуться к редактированию фигуры и в "Редакторе анимаций" снять флаг "Начальное значение при выключении".
