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

1. АНИМАЦИОННЫЕ
ЭФФЕКТЫ
(программирование
динамических изображений)
В.В. Исакова, КГПИ

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

3. Динамические изображения
- изображения с изменяющимися параметрами:
• местоположения
• размера
• формы
• цвета
и т.п. Далее
Анимация
- изменение во времени визуального
представления графического элемента
(изображения).

4. Местоположение изображения
r2
r1
- определяется координатами хара’ктерной точки;
координаты остальных точек вычисляются относительно
нее с учетом параметров размера.
(x0,y0) - центр «головы»
(хара’ктерная точка)
(x0,y0+r2) - точка начала
«туловища»
и т.д.
Пример:
Назад
r2
r1

5. Размер изображения
- определяется параметрами размера.
Примеры:
r1 и r2 – равномерно
увеличиваются
l – равномерно
уменьшается
1) увеличение эллипса
2) уменьшение линии
Назад

6. Форма изображения
- определяется параметрами размера
Пример: из прямоугольника получается квадрат
a – равномерно
увеличивается
Назад

7. Алгоритм движения изображения
Алгоритм
• Изображение появляется на экране (прорисовывается цветом рисунка).
• Изображение исчезает с экрана (закрашивается или прорисовывается
цветом фона).
• Изменяются координаты характерной точки (вычисляются по
формулам, описывающим траекторию).
• Изображение появляется на экране (прорисовывается цветом рисунка).
Далее
Этапы 2-4 повторяются до тех пор, пока не закончится
траектория движения.
Движение осуществляется за счет изменения местоположения
изображения, т.е. координат его характерной точки. Это
изменение определяется траекторией движения.
Траектория — некоторая линия, по которой движется изображение,
изменяя своё положение на экране.

8. Блок-схема
алгоритма
движения
изображения
(пример)
Переменные:
cf – цвет фона;
cr – цвет рисунка;
x, y – координаты
характерной точки.
задать x, y
изображение(x,y)
установить cf, cr
не конец
траектории
да
уст-ть цвет рисунка - cf
изображение(x,y)
перевычислить x, y
уст-ть цвет рисунка - cr
изображение(x,y)
нет
подготови-
тельный
этап
1 шаг
2 шаг
3 шаг
4 шаг
Далее

9. Графическая и математическая модели
движения изображения (пример)
Обозначения:
y, r – задаются
x0 = r
Далее
x0
y
r
С левого края экрана появляется окружность (колесо). После нажатия
клавиши Enter она плавно перемещается к противоположному краю и
останавливается.
Математическая
модель
y, r – не изменяются
x1 = x0 + 1
x2 = x1 + 1
=> xi = xi-1 + 1
Траектория:
от r+1 до xmax - r
Графическая модель
(xmax,0)
(xmax,ymax)
(0,0)
(0,ymax)

10. program koleso;
uses crt, graph;
var x, y, r, cr, cf, i, gd, gm : integer;
begin
clrscr;
write('y='); readln(y); write('r=');readln(r);
x := r;
cr := 14; cf := 1;
gd := detect; initgraph(gd,gm,'');
setbkcolor(cf); setcolor(cr);
circle(x, y, r); readln;
for i := r + 1 to getmaxx - r do
begin
setcolor(cf);
circle(x, y, r);
x := x + 1;
setcolor(cr);
circle(x, y, r);
delay(100)
end;
readln; closegraph;
end.
Программа КОЛЕСО (ЯП Паскаль)
Далее
подготови-
тельный
этап
– 3 шаг
4 шаг
2 шаг
– 1 шаг

11. Алгоритм видоизменения изображения
Алгоритм
• Изображение появляется на экране (прорисовывается цветом рисунка).
• Изображение исчезает с экрана (закрашивается или прорисовывается
цветом фона).
• Изменяется размер изображения (соответствующая характеристика
вычисляется по заданной формуле).
• Изображение появляется на экране (прорисовывается цветом рисунка).
Этапы 2-4 повторяются до тех пор, пока изображение не
примет заданный вид.
Видоизменение осуществляется за счет изменения
характеристики изображения, определяющей размер.
Видоизменение может быть пропорциональным (размер) и
непропорциональным (форма).
Далее

12. Графическая и математическая модели
видоизменения изображения (пример)
Обозначения:
a – задается
Далее
x1
y1
a
В центре экрана появляется квадратная рамка со стороной a. После
нажатия клавиши Enter рамка постепенно увеличивается до
максимально возможного размера на экране.
Математическая модель
x = xmax / 2, y = ymax / 2
x1 = x - a / 2, y1 = y - a / 2
x2 = x + a / 2, y2 = y + a / 2
Увеличение:
a1 = a0 + 2
a2 = a1 + 2
=> ai = ai-1 + 2
Количество шагов:
от y - a / 2 -1 до 0 с шагом -1
Графическая модель
(xmax,0)
(xmax,ymax)
(0,0)
(0,ymax)
y2
x2x
y a

13. Программа КВАДРАТ (ЯП Паскаль)
Далее
подготови-
тельный
этап
– 3 шаг
4 шаг
2 шаг
– 1 шаг
program kvadrat;
uses crt,graph;
var x, y, a, cr, cf, i, gd, gm : integer;
begin
clrscr;
write('a='); readln(a);
cr := 4; cf := 14;
gd:=detect; initgraph(gd,gm,'');
setbkcolor(cf); setcolor(cr);
x := getmaxx div 2; y := getmaxy div 2;
rectangle(x - a div 2, y - a div 2, x + a div 2, y + a div 2);
readln;
for i := y - a div 2 - 1 downto 0 do
begin
setcolor(cf);
rectangle(x - a div 2, y - a div 2, x + a div 2, y + a div 2);
a := a + 2;
setcolor(cr);
rectangle(x - a div 2, y - a div 2, x + a div 2, y + a div 2);
delay(100)
end;
readln; closegraph;
end.

14. Управление анимацией
Для управления анимационными эффектами можно
использовать клавиши:
Клавиша Код Действие
↑ #72 Перемещение вверх на единицу* расстояния
↓ #80 Перемещение вниз на единицу расстояния
← #75 Перемещение влево на единицу расстояния
→ #77 Перемещение вправо на единицу расстояния
+ Увеличение на единицу величины
- Уменьшение на единицу величины
Esc #27 Исчезновение изображения
* - «единица» - некоторое определенное количество пикселей
Завершить