Анимация, или Строки тоже умеют бегать

Вы уже научились работать с компонентом Timer. Этот компонент можно использовать для создания анимации.

Задачи урока

  • Использование таймера для создания анимации.
  • Использование компонента TrackBar.

Выполнение упражнения

В этом упражнении вы научитесь создавать эффект «бегущей строки» с возможностью изменения скорости её перемещения (рисунок 1).

image002
Рисунок 1. Окно приложения

1. Дизайн приложения

  1. Поместите на форму компоненты и установите значения их свойств согласно рисунку 2.

Компонент, находящийся вверху — это Label. Содержащийся в нём текст будет прокручиваться. Сделайте в нём надпись любого содержания, например, такого: «Здесь могла бы быть Ваша реклама!«. Установите параметры шрифта метки: размер 24, жирный, темно-красный. Цвет фона метки — белый.

image005
Рисунок 2

  1. Поместите на форму до сих пор неизвестный нам компонент — TrackBarimage006 (вкладка Win32). С его помощью можно визуально изменять какое-либо значение в заданных пределах.

В нашем случае будем изменять время задержки текста между перемещениями. Оно будет меняться от 10 до 200 м/сек. По умолчанию текст будет перемещаться с задержкой 100 м/сек.

  1. Измените свойства Min и Max этого компонента на значения 10 и 200 соответственно. Эти свойства отвечают за минимальную и максимальную границы диапазона. Свойство Position измените на 100. Оно отвечает за текущую позицию ползунка.
  2. Для того чтобы строка стала бегущей, нужно через определённые промежутки времени её перемещать. В этом нам поможет таймер. Каждый раз, когда таймер «тикает», нужно переместить строку на одно знакоместо. По умолчанию интервал между «тиками» таймера составляет 1000 миллисекунд, т. е. одну секунду. Для бегущей строки такой интервал слишком большой — строка будет двигаться рывками. Установите значение свойства Interval равным 100 (размерность: м/сек).
  3. Измените имена компонентов следующим образом:
Имя, которое было Имя, на которое необходимо изменить
Label1 (верхняя метка с надписью) LabelOut
TrackBar1 TrackBar
Timer1 Timer

2. Бег по кругу

  1. Щёлкните два раза по таймеру, чтобы создать обработчик события OnTimer. Здесь нам нужно немного переместить строку. Самый простой способ это сделать — перекинуть первый символ строки в её конец (рисунок 3).

image007
Рисунок 3

На форме видна не вся строка, а только её часть (на рисунке 3 видимая часть обозначена пунктирным прямоугольником). В результате переноса первого символа все остальные символы сместятся — первый исчезнет из видимой части, зато придёт очередной символ из ещё невидимых. Таким образом, при каждом срабатывании таймера текст будет перемещаться на один символ влево, что создаст эффект бегущей строки.

  1. Запрограммировать перенос символа очень легко. Во-первых, потребуется локальная переменная для хранения строки. Опишем эту переменную, и в начале процедуры присвоим ей содержимое метки LabelOut:
procedure TForm1.TimerTimer(Sender: TObject);
var s:string;
begin

   s := LabelOut.Caption;

end;

Листинг 1

  1. Чтобы обратиться к определённому символу в строке, используют квадратные скобки, внутри которых записан номер символа. Таким образом, s — это вся строка в целом, а s[1] — это первый символ в строке. Для записи его в конец строки нужно воспользоваться оператором сложения (конкатенации): s := s + s[1].

Для удаления первого символа из начала строки можно использовать процедуру Delete. Она имеет три параметра:

  • первый — строка, из которой удаляются символы;
  • второй — номер символа, начиная с которого нужно удалять;
  • третий — количество удаляемых символов.

В нашем случае номер символа — первый, количество — один. В результате получим оператор: Delete (s, 1, 1).

Теперь изменённое содержимое строки нужно поместить обратно на метку: LabelOut.Caption := s.

Обработчик события должен выглядеть так:

procedure TForm1.Timer1Timer(Sender: TObject);
var s:string;
begin

  s:=Label1.Caption;
  s:=s+s[1];
  Delete(s,1,1);
  LabelOut.Caption:=s;

end;

Листинг 2

  1. Запустите программу. Если вы всё сделали правильно, вы должны увидеть бегущую строку.

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

3. Работа с компонентом TrackBar

  1. Теперь остался один невостребованный компонент — ползунок TrackBar. С его помощью, как мы говорили ранее, будем изменять скорость перемещения текста от 10 до 200 символов за 1 м/сек. Щёлкните по ползунку два раза. В результате появится процедура обработки события OnChange. Напишите в ней следующий код:
procedure TForm1.TrackBarChange(Sender: TObject);
begin

  Timer.Interval:=TrackBar.Position;

end;

Листинг 3

Это событие возникает каждый раз при изменении положения ползунка компонента, и каждый раз позицию, на которой находится ползунок, мы присваиваем свойству Interval таймера.

  1. Запустите программу и подвигайте ползунок.

Получившийся эффект анимации хорошо подходит для украшения ваших приложений.

4. Коротко о главном

С помощью таймера можно создавать эффекты анимации.

Компонент TrackBar (вкладка Win32) предназначен для визуального изменения какого-либо значения в заданных пределах.

5. Выполнение заданий

Задания I уровня сложности

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


 

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


 

3. Создайте приложение «Бегущие огни«. Поместите на окне программы 8 букв. Сделайте так, чтобы буквы по очереди (по часовой стрелке) меняли свой цвет. В каждый момент времени только одна буква может быть выделена цветом.


 

4. Создайте приложение с «дышащим» текстом. Текст, находящийся в компоненте Label, должен изменять свои размеры от 8 до 24 пунктов, а затем обратно, с шагом 1 пункт. Скорость изменения размера шрифта регулируется компонентом TrackBar от 10 до 500 мсек.


 

5. Создайте приложение, в котором главное окно случайным образом меняет свои координаты каждые k секунд (k изменяется случайным образом от 1 до 3 секунд). Окно не должно выходить за границы экрана. На форме находится кнопка «Закрыть», изменяющая своё положение внутри формы каждые 0.5 секунд и не выходящая за её пределы.


 

6. Создайте приложение, где в главном окне слева направо с постоянной скоростью перемещается компонент Label с текстом «Щёлкни по мне!». Когда по этому компоненту пользователь щёлкнет мышью, текст начнёт движение в противоположную сторону. Движение происходит следующим образом: когда метка исчезает за границей окна, она появляется с другой стороны.


 

7. Создайте приложение с формой в момент запуска прижатой к верхней части экрана и шириной на весь экран. Высота окна составляет 100 пикселей. После запуска приложения форма перемещается к нижней части экрана. Достигнув нижнего положения, она меняет направление на противоположное и т. д. Скорость перемещения задаётся в программном коде приложения.


 

8. Создайте приложение, состоящее из метки с надписью «Да будет свет!«. Метка случайным образом изменяет свои координаты в пределах формы с периодичностью 1 сек. Размер шрифта метки меняется от 8 до 20 пунктов с периодичностью 0,5 сек.


 

9. Создайте приложение, состоящее из формы размером [ширина экрана]х300, на которой расположены два компонента Panel размерами 100х100. Панели находятся на разных концах формы с одинаковым значением свойства Top. При запуске программы панели движутся навстречу друг другу (как показано на рисунке) с разными скоростями — 6 и 14 пикселей за «тик» таймера.

image008

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

Задания II уровня сложности

1. Создайте приложение «Автомат световых эффектов«. На форме в ряд расположено 10 компонентов Shape круглой формы, имитирующих лампочки гирлянды. Включенная лампочка — красного цвета, выключенная — чёрного. Выбор цветового эффекта осуществляется компонентами RadioButton. Реализовать следующие эффекты:

  • бегущий огонь в одну сторону;
  • бегущий огонь в обе стороны (туда, потом обратно);
  • бегущая тень в одну сторону;
  • бегущая тень в обе стороны (туда, потом обратно);
  • одновременное мигание всех лампочек гирлянды;
  • случайное зажигание ламп гирлянды.

Компонент TrackBarSpeed устанавливает скорость эффектов от 10 до 200 мсек.


2. Создайте приложение «Падающая форма«. Приложение состоит из главного окна с кнопкой «Показать» и второй формы с кнопкой «Сбросить», размером 200х100 пикселей. При нажатии на кнопку «Показать» происходит отображение второй формы в центре экрана, а кнопка «Показать» становится неактивной. При нажатии на кнопку «Сбросить» вторая форма начинает падать вниз экрана с заданным ускорением. Начальная скорость формы равна нолю. Как только форма исчезнет за нижней границей экрана, она закрывается, а кнопка «Показать» становится активной.