SlideShare a Scribd company logo
1 of 14
АНИМАЦИОННЫЕ
ЭФФЕКТЫ
(программирование
динамических изображений)
В.В. Исакова, КГПИ
Начало
Внимание
Презентация управляется щелчком
мыши.
Для навигации по учебному материалу
используйте ссылки и соответствующие
кнопки перехода.
Динамические изображения
- изображения с изменяющимися параметрами:
• местоположения
• размера
• формы
• цвета
и т.п. Далее
Анимация
- изменение во времени визуального
представления графического элемента
(изображения).
Местоположение изображения
r2
r1
- определяется координатами хара’ктерной точки;
координаты остальных точек вычисляются относительно
нее с учетом параметров размера.
(x0,y0) - центр «головы»
(хара’ктерная точка)
(x0,y0+r2) - точка начала
«туловища»
и т.д.
Пример:
Назад
r2
r1
Размер изображения
- определяется параметрами размера.
Примеры:
r1 и r2 – равномерно
увеличиваются
l – равномерно
уменьшается
1) увеличение эллипса
2) уменьшение линии
Назад
Форма изображения
- определяется параметрами размера
Пример: из прямоугольника получается квадрат
a – равномерно
увеличивается
Назад
Алгоритм движения изображения
Алгоритм
• Изображение появляется на экране (прорисовывается цветом рисунка).
• Изображение исчезает с экрана (закрашивается или прорисовывается
цветом фона).
• Изменяются координаты характерной точки (вычисляются по
формулам, описывающим траекторию).
• Изображение появляется на экране (прорисовывается цветом рисунка).
Далее
Этапы 2-4 повторяются до тех пор, пока не закончится
траектория движения.
Движение осуществляется за счет изменения местоположения
изображения, т.е. координат его характерной точки. Это
изменение определяется траекторией движения.
Траектория — некоторая линия, по которой движется изображение,
изменяя своё положение на экране.
Блок-схема
алгоритма
движения
изображения
(пример)
Переменные:
cf – цвет фона;
cr – цвет рисунка;
x, y – координаты
характерной точки.
задать x, y
изображение(x,y)
установить cf, cr
не конец
траектории
да
уст-ть цвет рисунка - cf
изображение(x,y)
перевычислить x, y
уст-ть цвет рисунка - cr
изображение(x,y)
нет
подготови-
тельный
этап
1 шаг
2 шаг
3 шаг
4 шаг
Далее
Графическая и математическая модели
движения изображения (пример)
Обозначения:
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)
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 шаг
Алгоритм видоизменения изображения
Алгоритм
• Изображение появляется на экране (прорисовывается цветом рисунка).
• Изображение исчезает с экрана (закрашивается или прорисовывается
цветом фона).
• Изменяется размер изображения (соответствующая характеристика
вычисляется по заданной формуле).
• Изображение появляется на экране (прорисовывается цветом рисунка).
Этапы 2-4 повторяются до тех пор, пока изображение не
примет заданный вид.
Видоизменение осуществляется за счет изменения
характеристики изображения, определяющей размер.
Видоизменение может быть пропорциональным (размер) и
непропорциональным (форма).
Далее
Графическая и математическая модели
видоизменения изображения (пример)
Обозначения:
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
Программа КВАДРАТ (ЯП Паскаль)
Далее
подготови-
тельный
этап
– 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.
Управление анимацией
Для управления анимационными эффектами можно
использовать клавиши:
Клавиша Код Действие
↑ #72 Перемещение вверх на единицу* расстояния
↓ #80 Перемещение вниз на единицу расстояния
← #75 Перемещение влево на единицу расстояния
→ #77 Перемещение вправо на единицу расстояния
+ Увеличение на единицу величины
- Уменьшение на единицу величины
Esc #27 Исчезновение изображения
* - «единица» - некоторое определенное количество пикселей
Завершить

More Related Content

What's hot

Уравнение прямой на плоскости
Уравнение прямой на плоскостиУравнение прямой на плоскости
Уравнение прямой на плоскости
NickEliot
 
задания государственного экзамена по математике 15
задания государственного экзамена по математике 15задания государственного экзамена по математике 15
задания государственного экзамена по математике 15
svetlana
 
задания государственного экзамена по математике 15
задания государственного экзамена по математике 15задания государственного экзамена по математике 15
задания государственного экзамена по математике 15
svetlana
 
мысль №13
мысль №13мысль №13
мысль №13
rasparin
 
Функция y = x^2 и её график
Функция y = x^2 и её графикФункция y = x^2 и её график
Функция y = x^2 и её график
Formula.co.ua
 
20111023 csseminar geometry_algorithms_implementation_kovalev
20111023 csseminar geometry_algorithms_implementation_kovalev20111023 csseminar geometry_algorithms_implementation_kovalev
20111023 csseminar geometry_algorithms_implementation_kovalev
Computer Science Club
 
20111030 computer graphics_galinsky_lecture07_3_dvisualization
20111030 computer graphics_galinsky_lecture07_3_dvisualization20111030 computer graphics_galinsky_lecture07_3_dvisualization
20111030 computer graphics_galinsky_lecture07_3_dvisualization
Computer Science Club
 

What's hot (19)

Уравнение прямой на плоскости
Уравнение прямой на плоскостиУравнение прямой на плоскости
Уравнение прямой на плоскости
 
графические возможности языка программирования
графические возможности языка программированияграфические возможности языка программирования
графические возможности языка программирования
 
Arifmeticheskaya progressiya
Arifmeticheskaya progressiyaArifmeticheskaya progressiya
Arifmeticheskaya progressiya
 
ITMO RecSys course. Autumn 2014. Lecture 6
ITMO RecSys course. Autumn 2014. Lecture 6ITMO RecSys course. Autumn 2014. Lecture 6
ITMO RecSys course. Autumn 2014. Lecture 6
 
задания государственного экзамена по математике 15
задания государственного экзамена по математике 15задания государственного экзамена по математике 15
задания государственного экзамена по математике 15
 
Дизайн и верстка неразлучны
Дизайн и верстка неразлучныДизайн и верстка неразлучны
Дизайн и верстка неразлучны
 
задания государственного экзамена по математике 15
задания государственного экзамена по математике 15задания государственного экзамена по математике 15
задания государственного экзамена по математике 15
 
От энтузиаста к разработчику
От энтузиаста к разработчикуОт энтузиаста к разработчику
От энтузиаста к разработчику
 
Квадратичная функция
Квадратичная функцияКвадратичная функция
Квадратичная функция
 
эскизирование графиков
эскизирование графиковэскизирование графиков
эскизирование графиков
 
мысль №13
мысль №13мысль №13
мысль №13
 
Функция y = x^2 и её график
Функция y = x^2 и её графикФункция y = x^2 и её график
Функция y = x^2 и её график
 
20111023 csseminar geometry_algorithms_implementation_kovalev
20111023 csseminar geometry_algorithms_implementation_kovalev20111023 csseminar geometry_algorithms_implementation_kovalev
20111023 csseminar geometry_algorithms_implementation_kovalev
 
Matemaatikaeksam
MatemaatikaeksamMatemaatikaeksam
Matemaatikaeksam
 
20111030 computer graphics_galinsky_lecture07_3_dvisualization
20111030 computer graphics_galinsky_lecture07_3_dvisualization20111030 computer graphics_galinsky_lecture07_3_dvisualization
20111030 computer graphics_galinsky_lecture07_3_dvisualization
 
05.01.2015. теория график функции у=х 2
05.01.2015. теория   график функции у=х 205.01.2015. теория   график функции у=х 2
05.01.2015. теория график функции у=х 2
 
Графика средствами PHP
Графика средствами PHPГрафика средствами PHP
Графика средствами PHP
 
Графика средствами PHP
Графика средствами PHPГрафика средствами PHP
Графика средствами PHP
 
Linejnaya funkciya
Linejnaya funkciyaLinejnaya funkciya
Linejnaya funkciya
 

Similar to Анимационные эффекты

Использование GNU OCTAVE для инженерных и математических расчетов
Использование GNU OCTAVE для инженерных и математических расчетовИспользование GNU OCTAVE для инженерных и математических расчетов
Использование GNU OCTAVE для инженерных и математических расчетов
Транслируем.бел
 
20110919 computer graphics_galinsky_lecture02_raster
20110919 computer graphics_galinsky_lecture02_raster20110919 computer graphics_galinsky_lecture02_raster
20110919 computer graphics_galinsky_lecture02_raster
Computer Science Club
 
Основы алгоритмизации (QBasic)
Основы алгоритмизации (QBasic)Основы алгоритмизации (QBasic)
Основы алгоритмизации (QBasic)
Viktoria Vlasenko
 
урок 10 случайные величины
урок 10 случайные величиныурок 10 случайные величины
урок 10 случайные величины
Galina Sgs
 
Графика в Паскаль
Графика в ПаскальГрафика в Паскаль
Графика в Паскаль
starsboy
 
Лекция №15. Методы программирования. Предмет "Структуры и алгоритмы обработки...
Лекция №15. Методы программирования. Предмет "Структуры и алгоритмы обработки...Лекция №15. Методы программирования. Предмет "Структуры и алгоритмы обработки...
Лекция №15. Методы программирования. Предмет "Структуры и алгоритмы обработки...
Nikolay Grebenshikov
 

Similar to Анимационные эффекты (20)

графика Pascal ABC
графика Pascal ABCграфика Pascal ABC
графика Pascal ABC
 
Компьютерная графика в Processing, часть 2. Основные 2D-примитивы
Компьютерная графика в Processing, часть 2. Основные 2D-примитивыКомпьютерная графика в Processing, часть 2. Основные 2D-примитивы
Компьютерная графика в Processing, часть 2. Основные 2D-примитивы
 
Использование GNU OCTAVE для инженерных и математических расчетов
Использование GNU OCTAVE для инженерных и математических расчетовИспользование GNU OCTAVE для инженерных и математических расчетов
Использование GNU OCTAVE для инженерных и математических расчетов
 
Компьютерная графика в Processing, часть 7. 3D в Processing
Компьютерная графика в Processing, часть 7. 3D в ProcessingКомпьютерная графика в Processing, часть 7. 3D в Processing
Компьютерная графика в Processing, часть 7. 3D в Processing
 
20110919 computer graphics_galinsky_lecture02_raster
20110919 computer graphics_galinsky_lecture02_raster20110919 computer graphics_galinsky_lecture02_raster
20110919 computer graphics_galinsky_lecture02_raster
 
Исследование графиков функций
Исследование графиков функцийИсследование графиков функций
Исследование графиков функций
 
рисование точками 9 класс
рисование точками 9 классрисование точками 9 класс
рисование точками 9 класс
 
5
55
5
 
Лекция 12. Быстрее, Python, ещё быстрее.
Лекция 12. Быстрее, Python, ещё быстрее.Лекция 12. Быстрее, Python, ещё быстрее.
Лекция 12. Быстрее, Python, ещё быстрее.
 
аппроксимация функции нескольких переменных
аппроксимация функции нескольких переменныхаппроксимация функции нескольких переменных
аппроксимация функции нескольких переменных
 
лекция 1
лекция 1лекция 1
лекция 1
 
Tech Talks @NSU: Теоретические основы программирования: проекции Футамуры-Тур...
Tech Talks @NSU: Теоретические основы программирования: проекции Футамуры-Тур...Tech Talks @NSU: Теоретические основы программирования: проекции Футамуры-Тур...
Tech Talks @NSU: Теоретические основы программирования: проекции Футамуры-Тур...
 
Компьютерная графика в Processing, часть 5. Анимация
Компьютерная графика в Processing, часть 5. АнимацияКомпьютерная графика в Processing, часть 5. Анимация
Компьютерная графика в Processing, часть 5. Анимация
 
Основы MATLAB. Численные методы
Основы MATLAB. Численные методыОсновы MATLAB. Численные методы
Основы MATLAB. Численные методы
 
Основы алгоритмизации (QBasic)
Основы алгоритмизации (QBasic)Основы алгоритмизации (QBasic)
Основы алгоритмизации (QBasic)
 
Grafika Qbasic
Grafika QbasicGrafika Qbasic
Grafika Qbasic
 
Logomir
LogomirLogomir
Logomir
 
урок 10 случайные величины
урок 10 случайные величиныурок 10 случайные величины
урок 10 случайные величины
 
Графика в Паскаль
Графика в ПаскальГрафика в Паскаль
Графика в Паскаль
 
Лекция №15. Методы программирования. Предмет "Структуры и алгоритмы обработки...
Лекция №15. Методы программирования. Предмет "Структуры и алгоритмы обработки...Лекция №15. Методы программирования. Предмет "Структуры и алгоритмы обработки...
Лекция №15. Методы программирования. Предмет "Структуры и алгоритмы обработки...
 

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

  • 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 Исчезновение изображения * - «единица» - некоторое определенное количество пикселей Завершить