Справка по анимационным эффектам FireMonkey

[Lomanu4]

Перейти к FireMonkey Краткое руководство - Использование изображений и анимационных эффектов

содержание
[ скрыть ]

• 1Шаг 1: Использование TFloatAnimation для изменения значения плавающего свойства
• 2Шаг 2: Изменение цвета с помощью добавления TColorAnimation
• 3Шаг 3: изменение изображения с помощью TBitmapAnimation
• 4Смотрите также

FireMonkey предоставляет множество различных типов встроенных эффектов анимации, которые со временем изменяют значение выбранного свойства.
Примеры анимационных эффектов:

Тип недвижимости	Класс анимационных эффектов
Любое свойство, которое является целым числом.	TIntAnimation
Любое свойство, которое является действительным числом.	TFloatAnimation
Расположение компонента определяется свойством TBounds.	TRectAnimation
Любое строковое или целочисленное свойство, содержащее цвет.	TColorAnimation
Градиент (тип TGradient)	TGradientAnimation
Растровое изображение	TBitmapAnimation

В этом руководстве вы будете использовать несколько основных эффектов анимации в приложении FireMonkey.
Шаг 1: Использование TFloatAnimation для изменения значения плавающего свойства
В FireMonkey любое свойство, использующее плавающие числа, можно изменить с помощью эффектов анимации с помощью TFloatingAnimation. Итак, давайте изменим некоторые значения, используя анимационные эффекты.

1. Создайте новое приложение FireMonkey HD. ( Файл > Создать > Приложение FireMonkey для рабочего стола > Приложение HD FireMonkey ).
   
2. Поместите компонент TRectangle в конструктор форм. Для этого введите rec в поле поиска на палитре инструментов, а затем дважды щелкните компонент TRectangle . Выбор компонента TRectangle в компоненте палитры инструментов TRectangle в конструкторе форм
   
   
   
   
   
   
3. После размещения компонента TRectangle в конструкторе форм вы увидите несколько свойств, имеющих значок пленки ( ) в Инспекторе объектов. Значок фильма указывает, что эти свойства компонента можно анимировать. Ниже приведены типичные свойства (в зависимости от компонента), которые можно изменить с помощью TFloatingAnimation :
   
   • Рост
   • position.x
   • Position.Y
   • Угол поворота
   • RotationCenter.X
   • RotationCenter.Y
   • Scale.X
   • Scale.Y
   • StrokeThickness
   • XRadious
   • YRadious
   • ширина
4. 
5. Чтобы изменить значение свойства, щелкните раскрывающееся меню для свойства RotationAngle и выберите « Создать новую анимацию TFloatAnimation» .
   
   
6. Теперь новый компонент TFloatAnimation создан. Вы увидите, что на панели структуры FloatAnimation1 определяется как дочерний элемент Rectangle1 .
   Примечание: имейте в виду, что эффект компонентов с эффектом анимации применяется к родительскому компоненту.
   
7. Инспектор объектов показывает свойства компонента FloatAnimation1. Измените следующие свойства, как описано в таблице:
   

   Свойство	Ценность	Описание
   продолжительность	5	Количество времени (в секундах) для анимации от начального значения до конечного значения.
   Включено	Правда	Анимация запускается при запуске приложения.
   петля	Правда	Повторяет анимацию до бесконечности.
   StopValue	360	Завершает анимацию этого свойства, когда оно достигает этого значения.

   
   
   Свойства для FloatAnimation1
   
   Другим важным свойством, которое определяется автоматически, является PropertyName . В этом случае это свойство имеет значение RotationAngle ; поэтому эта анимация влияет на значение свойства RotationAngle его родительского компонента.
   
8. Выполните заявку. Теперь компонент прямоугольника вращается на форме:
   
   
9. Вы можете анимировать любые числовые свойства, используя те же шаги.

Шаг 2: Изменение цвета с помощью добавления TColorAnimation
Как уже упоминалось в начале этого урока, FireMonkey имеет много встроенных анимационных эффектов. Затем вы примените цветовую анимацию для изменения цвета прямоугольника в дополнение к повороту, описанному в шаге 1.

1. Выберите компонент TColorAnimation из палитры инструментов. Для этого введите anim в поле поиска на палитре инструментов, а затем дважды щелкните компонент TColorAnimation : компонент TColorAnimation теперь находится на панели структуры.
   
   
   
   
   
   
   
2. TColorAnimation1 определяется как дочерний элемент Form4, а FloatAnimation1 определяется как дочерний элемент Rectangle1 (как обсуждалось на шаге 1). Перетащите ColorAnimation 1 на Rectangle1 . Теперь ColorAnimation1 определен как дочерний элемент Rectangle1 , и поэтому ColorAnimation1 влияет на Rectangle1 :
   
   
3. Инспектор объектов показывает свойства компонента TColorAnimation1. Измените следующие свойства, как описано в таблице.
   

   Свойство	Ценность	Описание
   Имя свойства	Цвет заливки	Название объекта для анимации.
   Включено	Правда	Анимация запускается при запуске приложения.
   продолжительность	3	Количество времени (в секундах) для анимации от начального значения до конечного значения.
   петля	Правда	Повторяет анимацию до бесконечности.
   AutoReverse	Правда	Анимация назад после анимации вперед.
   StopValue	красный	Завершает анимацию этого свойства, когда оно достигает этого значения.

   
   
   Свойства для ColorAnimation1
   
4. Выполните заявку. Теперь компонент прямоугольника поворачивается на форме и его цвет меняется на красный:
   
   

Шаг 3: Изменение изображения с помощью TBitmapAnimation
Последний шаг в этом уроке - использование растровой анимации с компонентом изображения.

1. Создайте новое приложение FireMonkey, как в шаге 1 этого руководства.
   
2. Поместите компонент TImage ( Image1 ) в конструктор форм.
   
3. Поместите компонент TBitmapAnimation в конструктор форм. Использование структуры Просмотра, установите этот компонент ( BitmapAnimation1 ) как ребенок image1 :
   
   
4. Установите свойства BitmapAnimation1в Инспекторе объектов следующим образом:
   

   Свойство	Ценность	Описание
   Имя свойства	Битовая карта	Название объекта для анимации.
   Включено	Правда	Анимация запускается при запуске приложения.
   продолжительность	10	Количество времени (в секундах) для анимации от начального значения до конечного значения.
   петля	Правда	Повторяет анимацию до бесконечности.
   AutoReverse	Правда	Анимация назад после анимации вперед.
   StartValue		Запускает анимацию этого свойства из этого растрового изображения.
   StopValue		Завершает анимацию этого свойства, когда оно достигает этого растрового изображения.

   
   
5. Установите свойства StartValue и EndValue . Эти свойства содержат изображение в качестве исходного изображения и конечного изображения. Нажмите меню « Правка» , а затем выберите свои любимые изображения с помощью редактора растровых изображений .
   
   
6. Выполните заявку. Теперь эти две картинки анимированы со временем:
   

Смотрите также

• FireMonkey Анимационные эффекты