§ 8. Анимация

8.1. Понятие об анимации

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

Анимация (от лат. animare — оживить) — это процесс изменения размера, положения, цвета или формы объекта с течением времени.

Анимация представляет собой последовательную демонстрацию серии изображений (кадров). Кадр отображается некоторое время, после чего исчезает,
а на его месте появляется новый. Кадры — изображения последовательных фаз движения объектов или их частей.

Анимация основана на свойстве человеческого зрения «помнить» изображение в течение некоторого времени после того, как наблюдение прекращается. Чем больше кадров содержит анимация, тем более сглаженным будет движение в процессе проигрывания. Для создания иллюзии непрерывного движения частота смены кадров должна быть не менее 12 кадров в секунду.

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

Компьютерная анимация — это создание анимации с помощью компьютера.

Выделяют два способа создания компьютерной анимации: покадровая анимация и расчётная — анимация движения объектов и анимация формы.

При создании покадровой анимации прорисовываются все фазы движения объекта. Такая технология незаменима при создании сложной анимации с разнообразной графикой.

Расчётная анимация используется для создания анимационных эффектов на веб-страницах, а также при создании рекламных, учебных и развлекательных фильмов.

Анимация движения — это создание иллюзии движения объектов. Она используется для перемещения, изменения размера, поворота объекта. Анимация формы создаёт плавный переход одного изображения в другое, где объект меняет свой вид (форму, размер, цвет) без перемещения. Анимация движения или формы предполагает рисование только отдельных кадров. Изображения в остальных кадрах создаёт компьютерная программа, которая вычисляет, где и в какой момент должен находиться объект.

Объекты компьютерной анимации размещаются на различных слоях.

8.2. Создание анимации для исполнителя Черепаха.

Алгоритм создания анимации для исполнителя Черепаха можно описать следующим образом:

  1. Нарисовать изображение в текущей позиции.
  2. Подождать какое-то время.
  3. Стереть изображение.
  4. Передвинуть Черепаху в новое место.
  5. Повторять пункты 1–4.

Пример 8.1. Создать анимацию движения квадрата с длиной стороны 50 на поле Черепахи.

Этапы выполнения задания.

I. В этой задаче нет исходных данных.
II. Результат не зависит от исходных данных.
III. Алгоритм решения задачи:
1. Установить Черепаху в точку (–200, –50), x = –200.
2. Нарисовать квадрат чёрным цветом.
3. В цикле повторять:
1) установить задержку времени с помощью функции sleep() из библиотеки time;
2) нарисовать квадрат белым цветом (стереть предыдущий);
3) передвинуть Черепаху на 10 пикселей вправо;
4) нарисовать квадрат чёрным цветом.
4. Условие повторения цикла — пока x < 200.
IV. Описание переменных: не используются.

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

Пример 8.2. Создать анимацию движения автомобиля на поле Черепахи.

Этапы выполнения задания.

I. В этой задаче нет исходных данных.
II. Результат не зависит от исходных данных.
III. Алгоритм решения задачи:
1. Отключить автообновление экрана.
2. Загрузить изображение автомобиля и установить его как форму Черепахи.
3. Установить Черепаху в точку (–200, 0), x = –200.
4. В цикле повторять:
1) установить задержку времени с помощью функции sleep() из библиотеки time;
2) передвинуть Черепаху на 10 пикселей вправо;
3) обновить экран.
5. Условие повторения цикла — пока x < 200.
IV. Описание переменных: не используются.

В окно Черепахи можно добавить фоновое изображение (только формат .gif). Для этого используется команда bgpic(). Также можно добавить несколько клонов Черепахи, загрузив в каждый из клонов своё изображение.

Пример 8.3*. Создать анимацию движения трёх бабочек на фоне луга с цветами.

Этапы выполнения задания.

I. В этой задаче нет исходных данных.
II. Результат не зависит от исходных данных.
III. Алгоритм решения задачи:
1. Отключить автообновление экрана и показ Черепахи.
2. Загрузить изображение бабочек.
3. Создать три Черепахи, установить загруженные изображения как формы для них. Для создания Черепахи с именем t1 используется команда t1 = Turtle(). Показать каждую Черепаху, которая станет бабочкой.

4.  Установить каждую Черепаху в свою начальную точку. Первую — в центр окна. Эта Черепаха будет рисовать окружности. Если перо поднято, то окружность не прорисовывается, но создаётся эффект движения по окружности. Вторая Черепаха находится за пределами окна слева и будет двигаться вправо. Третья — за пределами окна справа и будет двигаться влево.
5.  В цикле повторять:
1)  установить задержку времени с помощью функции sleep() из библиотеки time;
2)  изменить место положения каждой Черепахи. Для этого у функции p, определяющей положение Черепахи, добавятся параметры: первым параметром t будет передаваться та Черепаха, чьё местоположение мы меняем. Последний параметр u будет менять угол поворота Черепахи (используется для первой Черепахи);
3)  обновить экран.
IV.  Описание переменных: не используются.
Самый ранний образец анимации создан примерно 5000 лет назад. Это кубок из необожжённой глины. Он был обнаружен во время раскопок в Иране. На кубке изображена коза, которая подпрыгивает и срывает листья с пальмового дерева. Каждое отдельное изображение козы на кубке представляет собой отдельный кадр.

В 1877 г. был запатентован прибор изобретателя и художника Эмиля Рейно — праксиноскоп.

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

Послойную технику в мультипликации впервые применил Уолт Дисней (1901–1966) — американский художник-мультипликатор, основатель компании «Walt Disney Productions».

В 1968 г. группа советских учёных во главе с Николаем Николаевичем Константиновым создала математическую модель движения животного.

История белорусской анимации началась в 1971 г. на «Беларусьфильме» с кукольного мультфильма «Незнайка — поэт». Первый мультфильм с национальным колоритом «Дудка-веселушка» (1978 г.) основан на народных сказках и песнях.

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

•запись движения. Актёры в специальных костюмах с датчиками совершают движения, которые записываются камерами и анализируются специальным программным обеспечением.

Итоговые данные о перемещении конечностей актёров применяют к трёхмерным скелетам виртуальных персонажей, благодаря чему добиваются высокого уровня достоверности их движения;

• процедурная анимация полностью или частично рассчитывается компьютером;

• программируемая анимация. Движения анимируемых объектов программируются с помощью различных языков программирования, а также искусственного интеллекта.
«Беловежская Пуща» (Национальная киностудия «Беларусьфильм», 2024 г.) — первый белорусский мультфильм, созданный с применением искусственного интеллекта.

Пример 8.1.

V. Программа:

from turtle import *
from time import *
setup(450, 200)
speed(0)
hideturtle()
def p(x, y):
    penup()
    setpos(x, y)
    pendown()
    seth(0)
x = -200
p(-200, -50)
circle(50, 360, 4)
while x < 200:
    sleep(0.1)
    # стирание квадрата
    color(«white»)
    circle(50, 360, 4)
    # переход к новому месту
    x += 10
    p(x, -50)
    # рисование квадрата
    color(«black»)
    circle(50, 360, 4)
done()

VI. Тестирование программы.
Если запустить программу, то будет видно перемещение квадрата (текущий кадр):

При перемещении квадрата происходит мерцание. Убрать мерцание можно, если использовать команды:

В начале программы нужна команда tracer(0), которая отключает автоматическое обновление экрана.

Пример 8.2.

V. Программа:

from turtle import *
from time import *
setup(450, 200)
speed(0)
hideturtle()
def p(x, y):
    penup()
    setpos(x, y)
    pendown()
    seth(0)
x = -200
p(-200, -50)
circle(50, 360, 4)
while x < 200:
    sleep(0.1)
    # стирание квадрата
    color(«white»)
    circle(50, 360, 4)
    # переход к новому месту
    x += 10
    p(x, -50)
    # рисование квадрата
    color(«black»)
    circle(50, 360, 4)
done()

VI. Тестирование программы.
Если запустить программу, то будет видно перемещение автомобиля (текущий кадр):

Пример 8.3.

V. Программа:

from time import *
from turtle import *
setup(1000, 720)
speed(0)
tracer(0)
bgpic(«field.gif»)
hideturtle()
# загрузка форм Черепах
register_shape(«flay1.gif»)
register_shape(«flay2.gif»)
register_shape(«flay3.gif»)
# создание Черепах и
# определение их форм
t1 = Turtle()
t1.shape(«flay1.gif»)
t1.showturtle()
t2 = Turtle()
t2.shape(«flay2.gif»)
t2.showturtle()
t3 = Turtle()
t3.shape(«flay3.gif»)
t3.showturtle()
def p(t, x, y, u=0):
    t.penup()
    t.setpos(x, y)
    t.pendown()
    t.seth(u)
x1 = 0
x2 = -600
x3 = 600
# Начальное положение Черепах
u = -90
p(t1, x1, u)
p(t2, x2, -200)
p(t3, x3, 200)
while x1 < 1000:
    sleep(0.1)
    # первая Черепаха
    u += 10
    p(t1, x1, 0, u)
    t1.penup()
    t1.circle(50, -90)
    # вторая Черепаха
    x2 += 15
    p(t2, x2, -200)
    # третья Черепаха
    x3 -= 10
    p(t3, x3, 200)
    update()
done()

VI. Тестирование программы.
Если запустить программу, то будет видно движение бабочек. Жёлтая бабочка движется справа налево, фиолетовая — слева направо, розовая — по окружности. На картинке — текущий кадр.

Упражнения

1. Выполните задания для примера 8.1.

  1. Внесите в программу изменения так, чтобы по экрану двигался не квадрат, а круг (треугольник, пятиугольник).
  2. Измените программу так, чтобы фигура двигалась справа налево.
  3. Измените программу так, чтобы при движении изменялась не только координата х, но и координата y. В каком направлении будет двигаться фигура, если обе координаты изменяются одинаково?

2. Для программы из примера 8.2 измените картинку и направление движения. Например, воздушный шар летит снизу вверх. Рисунки найдите в Интернете.

3. Для программы из примера 8.3 измените фон, объекты и направление движения. Добавьте ещё один объект. Например, космические корабли летают снизу вверх и сверху вниз или по диагонали на фоне звёздного неба.

4. Придумайте и реализуйте анимацию движения нескольких объектов на фоне какого-либо рисунка. Например, кошка догоняет мышку. За основу можно взять пример 8.3.
Рисунки подберите самостоятельно.

Итоговое занятие

Прочитайте отрывок текста (источник http://www.fotobel.by/kultura-elarusi/belorusskij-ornament/) и выполните задания.

Белорусский народный орнамент
Орнамент является распространённой формой выражения культуры многих народов. Белорусский народный орнамент очень колоритен и известен далеко за пределами нашей республики. Его изучение продолжается с 19 века, и весь объём накопленных знаний может рассказать о многом. Ведь каждый узор белорусского орнамента имеет свой определённый смысл. Он может означать, к примеру, вечность, богатство, жизнь, солнце, урожай и многое другое. А сочетание различных вышитых элементов на рушниках или покрывалах может поведать опытному исследователю вполне конкретные сведения. Белорусский орнамент можно разделить на три основных вида: геометрический, орнаментика которого складывается из прямых линий, а также геометрических фигур — прямоугольников, квадратов, ромбов, треугольников и др.; растительный, созданный на основе рисунков побегов растений, листьев, цветов или плодов; животный, который включает в себя изображения различных животных. Первоначально орнамент у наших предков встречался в первую очередь на праздничной одежде, являвшейся отражением своеобразности народной культуры. Значительным можно считать использование отдельных орнаментальных мотивов в изготовлении известных слуцких поясов. И фактически все вещи, которые украшены народным белорусским орнаментом, являются художественными произведениями.

1. Определите, к какому виду белорусского орнамента можно отнести следующее изображение:

а) геометрический
б) растительный
в) животный
г) праздничный

2. Соотнесите символы изображения белорусских орнаментов и функции, которые их изображают.

№ Рисунок Вариант ответа Функция
1  Связь, соединение,
единство		 а  

def uzor_a(x, y, r, c = «»):
    p(x, y — r, 45)
    color(c)
    fd(r), rt(90)
    fd(2*r), rt(90)
    fd(r), rt(90)
    fd(r), rt(90)
    fd(2*r), rt(90)
    fd(r), rt(90)
    p(x + r * 1.41, y, 45)
    fd(2)
 2 Движение, обращение, гибкость б  

def uzor_b(x, y, r, c = «»):
    p(x + r * 1.41 , y, -45)
    color(c)
    fd(r), rt(90)
    fd(2*r), lt(90)
    fd(r), lt(90)
    fd(r), lt(90)
    fd(2*r), rt(90)
    fd(r)
    p(x, y — r * 1.41, 45)
    fd(2)
    p(x + r * 2.82, y — r * 1.41, 45)
    fd(2)
 3 Рождение, возникновение, начало в  

def  uzor_c(x, y, r, c = «»):
    p(x, y — r, 45)
    color(c)
    fd(r), rt(90), fd(2*r)
    p(x + 0.7 * r, y — r * 1.7, 45)
    fd(2*r), rt(90), fd(r)
    p(x + r * 1.41, y — r * 2.42 , 45)
    fd(2)
    p(x + r * 1.41, y, 45)
    fd(2)
 4 Результат, урожай, достижение г
  

def uzor_d(x, y, r, c = «»):
    p(x + r * 0.7 , y — r * 0.6, -135)
    color(c)
    fd(r), lt(90)
    fd(r), lt(90)
    fd(2*r), rt(90)
    fd(r), rt(90)
    fd(r)
    p(x + r * 1.41, y, 45)
    fd(2)
    p(x + r * 1.41, y — r * 2.42, 45)
    fd(2)
    fd(2)

3. Используя в качестве вспомогательного алгоритма алгоритм построения рисунка 3 (рождение, возникновение, начало), изобразите на экране следующую картинку.

4. Внесите в программу изменения так, чтобы орнаменты на экране чередовали цвет: красный и зелёный.

5. Внесите в программу изменения так, чтобы цвет для орнамента выбирался случайным образом из двух вариантов: красный или зелёный. Определите, каких орнаментов нарисовано больше: красных или зелёных.

Результаты работы программы могут быть следующими:

 

Проверь себя