У мультфільмах іллюзія руху створюється за рахунок послідовної зміни кадрів, кожний із яких фіксує черговий етап руху об’єкта. Використовуючи цей принцип, ми можемо запрограмувати показ мультфильма на полотні canvas.
Розглянемо кроки створення анімації з трьох кадрів «Політ метелика».
Використовуючи принцип анімації, можна запрограмувати рух об’єкта на полотні в такий спосіб:
1) підготувати декілька графічних файлів із зображеннями фаз руху деякого об’єкта;
2) запрограмувати послідовне завантаження на полотно зображень із цих файлів;
3) між завантаженнями слід затримати виконання програми для того, щоб користувач устиг побачити чергове зображення.
1) підготувати декілька графічних файлів із зображеннями фаз руху деякого об’єкта;
2) запрограмувати послідовне завантаження на полотно зображень із цих файлів;
3) між завантаженнями слід затримати виконання програми для того, щоб користувач устиг побачити чергове зображення.
1. Приготуємо 3 графічні файли з зображеннями метелика. Імена цих файлів зберігатимуться у списку anim=['1.gif', '2.gif', '3.gif'']
2. Підключаємо модулі time і tkinter; створюємо вікно програми розмірами 200 × 250 із заголовком «Політ метелика».
root = Tk() # створюємо вікно програми
root.title(' Політ метелика')
root.geometry('200x250')
anim=['1.png','2.png','3.png'] # список імен файлів
canvas = Canvas(root, width=200, height=200) # створення полотна
canvas.place(x = 1, y = 1) # відображення полотна
root.title(' Політ метелика')
root.geometry('200x250')
anim=['1.png','2.png','3.png'] # список імен файлів
canvas = Canvas(root, width=200, height=200) # створення полотна
canvas.place(x = 1, y = 1) # відображення полотна
frames = [] # Читаємо дані зображень із файлів,
for name in anim: # імена яких у списку anim
frames.append(PhotoImage(file = name)) # у список frames
cur_frame = 0 # Номер поточного зображення
pic = canvas.create_image(0, 0, anchor = NW)
play() #виклик функції play()
for name in anim: # імена яких у списку anim
frames.append(PhotoImage(file = name)) # у список frames
cur_frame = 0 # Номер поточного зображення
pic = canvas.create_image(0, 0, anchor = NW)
play() #виклик функції play()
root.mainloop() # запуск головного циклу обробки подій
3. Опишемо функцію play():
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()
global cur_frame
canvas.itemconfig(pic, image = frames[cur_frame])
cur_frame = (cur_frame+1)%3
root.update() # Оновлення полотна
root.after(100, play) # Повторний виклик функції play()
Проаналізуймо опис функції play(), яку призначено для зміни зображень. Спочатку на екран виводиться зображення, номер якого зберігає змінна cur_frame. Потім значення cur_frame коригується, щоб вказувати на наступний кадр. Ураховується довжина списку зображень, тому їх кількість у списку можна збільшити і це не викличе помилки в програмі.
4. Зберігаємо файл з програмним кодом і виконуємо програму.
Джерела:
Інформатика : підруч. для 8 кл. закл. загал. серед. освіти / [О. О. Бондаренко, В. В. Ластовецький, О. П. Пилипчук, Є. А. Шестопалов]. — Харків : Вид-во «Ранок», 2025