Использование элементов анимации и мультипликации

Движение объектов

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

В первой части пособия уже были разобраны примеры с перемещением объектов при использовании компонента TTimer. В данном параграфе рассмотрим движение более подробно.

Чтобы задать движение необходимо объекты всегда привязывать к форме. На форме начало координат – точка (0,0) совпадает с левым верхним углом формы. Положение каждого объекта задается горизонтальной (по оси Ox) и вертикальной (по оси Oy) координатами.

Рис. 7. Форма с координатной сеткой

 

 

Координаты автомобиля - (0, 216)

Рис. 8. Координаты автомобиля

 

Двигаясь горизонтально, объект меняет координату по оси Ox: x = x + a. Параметр а может принимать произвольные значения: постоянные или случайные числа (задаваемые датчиком случайных чисел). При а>0 объект перемещается вправо, при а<0 – влево. По оси Oy в данном случае координата не меняется.

 

(30, 216)

(15, 216)

(0, 216)

Рис. 9. Движение автомобиля по оси Ox при а = 15 (x = x + 15).

 

Координате по оси Ox соответствует свойство Left, которое указывает положение объекта относительно левого края формы. Например, задать движение автомобиля (Image1), изображенного на рис. 9 вправо можно с помощью следующей конструкции: Image1.left:=Image1.left + 15;

 

Пример. Разработать проект, в котором по горизонтальной дороге равномерно перемещается автомобиль.

 

Создадим графический интерфейс проекта, подобно тому, как изображено на рис. 10.

 

Рис. 10 Графический интерфейс окна

 

Для вывода изображений дороги и автомобиля используем соответственно компоненты Image1 и Image2. Необходимые картинки создадим в графическом редакторе Paint и загрузим при проектировании формы в компоненты Image1 и Image2. Также поместим в любое место на форме компонент TTimer с интервалом 100. Таймер необходим в программе для организации повторения действий.

Перемещение автомобиля вправо задается изменением его свойства Left: Image2.left:=Image2.left+5.

Если автомобиль достигнет правой границы окна, то его можно вернуть на исходную позицию. То есть, если положение автомобиля относительно левой границы (свойство Left) будет больше ширины окна (свойство Width), он возвращается в исходную точку с помощью оператора:

If Image2.Left>Image1.Width then Image2.Left: = 0.

В обработчик события OnTimer компонента Timer1 введем следующий текст программного кода:

 

procedureTForm1.Timer1Timer(Sender: TObject);

Begin

Image2.left:=Image2.left+5;

If Image2. Left>Image1.Width then Image2.Left: = 0;

end;

 

Вообще движение в Delphi можно задать двумя способами:

- 1 способ заключается в движении объекта по форме, как в разобранном примере. В этом случае окружающая обстановка остается неподвижной.

- 2 способ состоит в том, что сам объект стоит на месте, а окружающий его фон перемещается.

Аналогично горизонтальному движению задается перемещение по вертикали, при котором изменяется координата по оси Oy: y = y + b. При b>0 объект движется вниз, при b<0 – вверх.

Координата по оси Oy соответствует свойству Top, которое показывает положение относительно верхней границы окна. Например, оператор Image1.Top:=Image1.Top – 5 перемещает объект Image1 на 5 позиций вверх.

 

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

Поместим на форму компоненты TImage и TTimer с интервалом 100, сохраним проект. Файл с изображением мяча boll.bmp переместим в папку с проектом.

Рис. 11 Графический интерфейс окна.

 

Рисунок по условию задачи необходимо загрузить в компонент Image1 в процессе выполнения программы, для этого используем метод Image1.Picture.LoadFromFile ('boll.bmp'). При движении вверх свойство Top у мяча будет уменьшаться:

Image1.Top:=Image1.Top – 10.

Возвратить мячик в исходную позицию после достижения им верхнего края окна можно с помощью условного оператора:

if Image1.Top<=0 then Image1.Top:= Form1.Height - Image1.Height.

Текст обработчика события OnTimer, в котором описывается движение мячика, будет следующим:

 

procedureTForm1.Timer1Timer(Sender: TObject);

Begin

Image1.Picture.LoadFromFile ('boll.bmp');

Image1.Top:=Image1.Top - 10;

ifImage1.Top<=0thenImage1.Top:= Form1.Height - Image1.Height;

end;

 

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

x = x +a

y = y + b.

Соответственно одновременно будут изменяться и положения относительно левого и нижнего края окна, то есть свойства Left и Top.

 

Пример. Создать проект, в котором мячик движется по диагонали и, достигая стенки, отскакивает от нее.

Разработаем графический интерфейс проекта, подобно тому, как изображено на рис. 12. В компонент Image1 загрузим изображение мячика, в компонент Image2 – изображение рабочей области. В произвольном месте на форме расположим компонент TTimer с интервалом 50 и кнопку TButton с заголовком Пуск.

 

Рис. 12 Графический интерфейс окна.

 

Для удобства введем дополнительные переменные:

- x – горизонтальная координата мяча или его положение относительно левой границы;

- y – вертикальная координата мяча или его положение относительно верхней границы;

- а – величина приращения по оси Ox;

- b – величина приращения по оси Oy.

Значения этих переменных установим в обработчике события OnClick для кнопки Пуск (Button1). Также после нажатия кнопки выполняется запуск мяча, т.е. свойство Enabled у компонента Timer1 должно стать равным True:

 

procedureTForm1.Button1Click(Sender: TObject);

Begin

a:=5;

b:=5;

x:=Image1.Left;

y:=Image1.Top;

Timer1.Enabled:=true;

end;

 

Для реализации данного проекта необходимо рассмотреть 8 вариантов движения мяча.

1. Мяч отскакивает от нижней границы:

а) при движении слева направо

до удара координаты мяча описывались уравнениями: ,

 

после удара уравнения изменились: .

Из уравнений видно, что у мяча вертикальная координата y изменила свое приращение с b на –b. Таким образом, если начальные значения a=5 и b=5, а также y>(Image2.Height-Image1.Heught), то после отскока переменная b станет равной -5.

if (a=5) and (b=5) and (y>Image2.Height-image1.Height) then b:=-5.

б) при движении справа налево

до удара: ,

после удара: .

Условие движения будет следующим:

if (a=-5) and (b=5) and (y>Image2.Height-image1.Height) then b:=-5.

2. Мяч отскакивает от правой границы:

а) при движении сверху вниз

до удара: ,

после удара: .

 

 

Условие: if (a=5) and (b=5) and (x>Image2.Width-Image1.Width)

then a:=-5.

б) при движении снизу вверх

до удара: ,

после удара: .

 

 

Условие: if (a=5) and (b=-5) and (x>Image2.Width-Image1.Width)

then a:=-5.

3. Мяч отскакивает от верхней границы:

а) при движении справа налево

до удара: ,

после удара: .

Условие: if (a=-5) and (b=-5) and y<Image2.Top then b:=5.

б) при движении слева направо

до удара: ,

после удара: .

Условие: if (a=5) and (b=-5) and y<Image2.Top then b:=5.

4. Мяч отскакивает от левой границы:

а) при движении сверху вниз

до удара: ,

после удара: .

 

 

Условие: if (a=-5) and (b=5) and x<Image2.Left then a:=5.

б) при движении снизу вверх

до удара: ,

после удара: .

 

 

Условие: if (a=-5) and (b=-5) and x<Image2.Left then a:=5.

Обработчик события OnTimer будет выглядеть следующим образом:

 

procedure TForm1.Timer1Timer(Sender: TObject);

Begin

x:=x+a;

y:=y+b;

image1.Left:=x;

Image1.Top:=y;

if (a=5) and (b=5) and (y>Image2.Height-image1.Height) then b:=-5;

if (a=-5) and (b=5) and (y>Image2.Height-image1.Height) then b:=-5;

if(a=5) and (b=-5) and (x>Image2.Width-Image1.Width) then a:=-5;

if (a=5) and (b=5) and (x>Image2.Width-Image1.Width) then a:=-5;

if(a=-5) and (b=-5) and y<Image2.Top then b:=5;

if (a=5) and (b=-5) and y<Image2.Top then b:=5;

if (a=-5) and (b=5) and x<Image2.Left then a:=5;

if (a=-5) and (b=-5) and x<Image2.Left then a:=5;

end;

Задания

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

 

Рис. 13 Графический интерфейс проекта

 

1. Создать проект, в котором один автомобиль едет за другим и обгоняет его.
2. Создать проект, в котором движутся навстречу два автомобиля. Машины сталкиваются друг с другом.
3. Разработать проект, в автомобиль неподвижен, а фон вокруг него перемещается.
4. Создать проект, в котором по диагонали двигаются два мяча. При ударе о стенки мячи отскакивают от них. Если мячи столкнутся друг с другом, то они должны разлететься в разные стороны.
5. Создать проект, в котором мячик движется по диагонали и отскакивает от стенок. Стенка, с которой столкнулся мячик, должна изменить свой цвет.
6. Составить программу движения на экране точки, которая перемещается по орбите а) квадрата; б) увеличивающегося квадрата.
7. Составить программу движения на экране точки, которая перемещается по орбите окружности.
8. Составить программу имитации движения секундной стрелки.