1 of 27

Створення анімації

Нова українська школа

Урок 52

Інформатика 8

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.

2 of 27

Створення анімації

Як ви вже знаєте, ілюзія руху об’єктів в анімації виникає завдяки швидкому зміненню зображень на екрані. Кожна з фігур, які ми будували на полотні, є окремим об’єктом. Це дає змогу програмувати їх рух і взаємодію, створюючи анімаційний ефект.

Розділ 5

§ 37

3 of 27

Рух графічних об’єктів

Ознайомімося з особливостями методів, призначених для переміщення об’єкта полотном.

Метод canvas.move переміщає графічний об’єкт, змінюючи значення його координат на задані величини:

canvas.move(item, x, y)

ідентифікатор, який повертає конструктор графічного об’єкта

item

значення зміщення по горизонталі та вертикалі (у пікселях)

x, y

Розділ 5

§ 37

4 of 27

Рух графічних об’єктів

Продовження…

Метод update() примусово оновлює зображення.

Метод time.sleep() затримує виконання програми:

time.sleep(t)

величина затримки (у секундах).

t

Розділ 5

§ 37

5 of 27

Рух графічних об’єктів

Організуємо горизонтальний рух круга полотном. Ідентифікатор об’єкта збережемо в змінній а:

Розділ 5

§ 37

6 of 27

Рух графічних об’єктів

Блок коду в циклі for призначено для пересування круга полотном.

Так, команда пересуне об’єкт, ідентифікатор якого в змінній а (це і є круг) на 5 пікселів праворуч і 0 пікселів по вертикалі.

Розділ 5

§ 37

7 of 27

Рух графічних об’єктів

Для пересування ліворуч знадобилася б команда:

Розділ 5

§ 37

8 of 27

Рух графічних об’єктів

Для руху по діагоналі слід змінювати одночасно координати х і у:

Розділ 5

§ 37

9 of 27

Програмування реакції об’єктів на події

Можна зробити так, щоб об’єкт рухався у відповідь на подію, яка відбулася під час виконання програми, — пересування миші, натискання певної клавіші. Для обробки події потрібно описати функцію (обробник події) і пов’язати об’єкт із подією й функцією, викликавши метод bind().

Розділ 5

§ 37

10 of 27

Програмування реакції об’єктів на події

Змусимо круг рухатися праворуч у разі натискання клавіші зі стрілкою «→». Програмний код виглядатиме так:

Розділ 5

§ 37

11 of 27

Програмування реакції об’єктів на події

Функція має єдиний аргумент event, через який передається інформація про подію. Об’єкт event має властивість keysym, яка набуває значення символу натиснутої клавіші.

Розділ 5

§ 37

12 of 27

Програмування реакції об’єктів на події

Якщо натиснуто клавішу «→», це означає, що відбулася подія '<KeyPress-Right>', і властивість event.keysym отримує значення 'Right'.

def move_oval(event):

...

event.keysym = 'Right'

canvas.bind_all('<KeyPress-Right>', move_oval)

Розділ 5

§ 37

13 of 27

Програмування реакції об’єктів на події

Буде цікавіше змінювати напрямок руху круга, застосовуючи всі чотири клавіші зі стрілками. В тілі функції move_oval() запрограмуємо зміну координат об’єкта залежно від того, яке значення передано для аргумента event:

Розділ 5

§ 37

14 of 27

Програмування реакції об’єктів на події

У функції move_oval() перевіряється, чи містить змінна keysym значення:

Якщо так, викликається метод canvas.move(1, 0, –3), і круг зміщується вгору. Якщо ні, перевіряється наступна умова

'Up'

якщо так, робиться крок униз

'Down'

якщо так, робиться крок вліво

'Left'

Таким чином, при натисканні на клавішу об’єкт пересувається в заданому напрямку.

якщо так, робиться крок вправо

'Right'

Розділ 5

§ 37

15 of 27

Програмування реакції об’єктів на події

Далі повідомимо tkinter, що функцію move_oval() треба застосовувати для обробки натискання будь-якої клавіші:

Розділ 5

§ 37

16 of 27

Створення анімації з використанням�графічних файлів

Використовуючи принцип анімації, можна запрограмувати рух об’єктів на полотні в такий спосіб:

підготувати декілька графічних файлів із зображеннями фаз руху деякого об’єкта;

запрограмувати послідовне завантаження на полотно зображень із цих файлів;

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

Розділ 5

§ 37

17 of 27

Створення анімації з використанням�графічних файлів

Створимо анімацію Політ метелика із трьох кадрів. Розглянемо кроки створення анімації.

Підготуємо три файли з зображеннями фаз руху метелика. Імена файлів зберігатимуться у списку anim.

1.gif

2.gif

Розділ 5

§ 37

18 of 27

Створення анімації з використанням�графічних файлів

Продовження…

Анімацію реалізує така програма:

import time

from tkinter import *

def play():

global cur_frame

canvas.itemconfig(pic, image = frames[cur_frame])

cur_frame = (cur_frame+1)%3

root.update() # Оновлення полотна

root.after(100, play) # Повторний виклик функції play()

root = Tk()

root.title('Політ метелика')

Розділ 5

§ 37

19 of 27

Створення анімації з використанням�графічних файлів

Продовження коду…

root.geometry('200x250')

canvas = Canvas(root, width = 200, height = 200)

canvas.place(x = 1, y = 1)

anim=['1.gif', '2.gif', '3.gif'] # Список імен файлів

frames = [] # Читаємо дані зображень із файлів,

for name in anim: # імена яких у списку anim

frames.append(PhotoImage(file = name)) # у список frames

cur_frame = 0 # Номер поточного зображення

pic = canvas.create_image(0, 0, anchor = NW)

play()

root.mainloop()

Розділ 5

§ 37

20 of 27

Створення анімації з використанням�графічних файлів

Проаналізуймо опис функції play(), яку призначено для зміни зображень. Спочатку на екран виводиться зображення, номер якого зберігає змінна cur_frame.

Потім значення cur_frame коригується, щоб вказувати на наступний кадр.

canvas.itemconfig(pic, image = frames[cur_frame])

Ураховується довжина списку зображень, тому їх кількість у списку можна збільшити і це не викличе помилки в програмі.

cur_frame = (cur_frame+1)%3

Розділ 5

§ 37

21 of 27

Створення анімації з використанням�графічних файлів

Далі викликом методу root.after із аргументами (100; play) планується повторний виклик функції play() через 100 мс, тобто наступна зміна зображення.

root.after(100, play)

Розділ 5

§ 37

22 of 27

Створення анімації з використанням�графічних файлів

Збережемо файл і випробуємо програму з анімацією.

Отже, засоби бібліотеки tkinter дають можливість створювати програми з анімаційними ефектами, а також додавати реакцію на дії користувача шляхом програмування обробки події.

Розділ 5

§ 37

23 of 27

Дайте відповіді на запитання

Які функції призначено для переміщення об’єкта по полотну?

Як запрограмувати реакцію об’єкта на подію?

Поясніть призначення аргументів методу:

canvas.bind_all('<KeyPress-Up>', step)

Як створити анімацію шляхом послідовної зміни зображень?

Як зміниться Політ метелика, якщо у виклику root.after() замість 100 написати 1000?

Розділ 5

§ 37

24 of 27

Розгадайте ребус

Анімація

Розділ 5

§ 37

25 of 27

Домашнє завдання

Проаналізувати

с. 241-246

Розділ 5

§ 37

26 of 27

Працюємо за комп’ютером

Сторінка

245-246

Розділ 5

§ 37

27 of 27

Успіхів�у навчанні!

Нова українська школа

Урок 52

Інформатика 8

teach-inf.com.ua

за підручником

Бондаренко О.О. та ін.