Salam untuk semua penggemar dan pakar bahasa pemrograman Python!
Hari ini kami akan terus membahas topik animasi dalam kerangka kerja lintas platform untuk dukungan multi-sentuh - Kivy dalam hubungannya dengan pustaka komponen Desain Material Google - KivyMD . Pada artikel terakhir, kita sudah menganalisis contoh aplikasi uji dengan Python / Kivy / KivyMD, di artikel ini kita akan membahas topik animasi secara lebih rinci. Di akhir artikel, saya akan memberikan tautan ke repositori proyek, di mana Anda dapat mengunduh dan merasakan sendiri, aplikasi demo Kivy / KivyMD. Seperti yang sebelumnya, artikel ini akan berisi banyak animasi dan video GIF, jadi tuangkan kopi dan ayo pergi!
Kivy berjalan di Linux, Windows, OS X, Android, iOS, dan Raspberry Pi. Anda dapat menjalankan kode yang sama di semua platform yang didukung tanpa melakukan perubahan tambahan pada basis kode. Kivy mendukung berbagai macam perangkat input, termasuk WM_Touch, WM_Pen, Mac OS X Trackpad dan Magic Mouse, Mtdev, Linux Kernel HID, TUIO, dan seperti Flutter, ia tidak menggunakan kontrol asli. Semua widgetnya dapat disesuaikan. Ini berarti aplikasi Kivy akan terlihat sama di semua platform. Namun karena widget Kivy dapat disesuaikan sesuka Anda, Anda dapat membuat widget sendiri. Misalnya, seperti inilah pustaka KivyMD muncul . Sebelum melanjutkan, mari kita lihat gambaran umum kecil tentang fitur Kivy:
Demo Aplikasi Kivy
Video-video ini dengan jelas menunjukkan interaksi aplikasi Kivy dengan pengguna menggunakan gerakan dan animasi. Mari dan kita akan membuat aplikasi sederhana dengan animasi dua label:
from kivy.animation import Animation
from kivy.lang import Builder
from kivymd.app import MDApp
KV = """
<CommonLabel@MDLabel>
opacity: 0
adaptive_height: True
halign: "center"
y: -self.height
MDScreen:
on_touch_down: app.start_animation()
CommonLabel:
id: lbl_1
font_size: "32sp"
text: "M A R S"
CommonLabel:
id: lbl_2
font_size: "12sp"
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
"""
class TestAnimation(MDApp):
def build(self):
return Builder.load_string(KV)
def start_animation(self):
lbl_1 = self.root.ids.lbl_1
lbl_2 = self.root.ids.lbl_2
Animation(
opacity=1, y=lbl_1.height * 2, d=0.9, t="in_out_back"
).start(lbl_1)
Animation(
opacity=1, y=lbl_2.height + ids.lbl_1.height, d=1, t="in_out_back"
).start(lbl_2)
TestAnimation().run()
Ini adalah aplikasi yang sudah jadi. Kami hanya akan mengeditnya sedikit. Aturan CommonLabel pada baris KV mirip dengan membuat kelas dengan kode Python. Membandingkan:
Kode dalam Bahasa Kivy selalu lebih pendek dan lebih mudah dibaca. Oleh karena itu, dalam kode Python, kita hanya memiliki logika. Kami membuat dua label dengan properti umum yang dijelaskan dalam aturan CommonLabel : opacity , ukuran tekstur label ( adaptive_height ), perataan horizontal ( halign ), posisi sumbu Y ( y ) dan memberi label ini id-shniki ( lbl_1 , lbl_2 ) untuk dapat mengakses dan memanipulasi properti objek label dari kode Python. Selanjutnya, kami melampirkan panggilan metode start_animation ke acara on_touch_down (dipicu saat menyentuh layar di mana saja)di mana kami akan menghidupkan dua label kami.
Animasi
Kivy menggunakan kelas Animation untuk menganimasikan objek . Ini sangat mudah digunakan: saat Anda menginisialisasi kelas Animation, Anda harus meneruskan nama properti dengan nilai target yang akan dicapai di akhir animasi sebagai argumen. Contohnya:
def start_animation(self):
# KV
lbl_1 = self.root.ids.lbl_1
lbl_2 = self.root.ids.lbl_2
#
Animation(
opacity=1, # 1
y=lbl_1.height * 2, # Y
d=0.9, #
t="in_out_back" #
).start(lbl_1) # start ,
#
Animation(
opacity=1, y=lbl_2.height + lbl_1.height, d=1, t="in_out_back"
).start(lbl_2)
Pada animasi berikut saya tunjukkan hasil animasi sederhana yang kita buat, dengan jenis animasi yang berbeda:
 |
 |
 |
Mari kita memperumit tugas sedikit dan mencoba menganimasikan rotasi label di pesawat. Untuk ini kami menggunakan manipulasi matriks ( PushMatrix, PopMatrix, Rotate, Translate, the Scale ). Tambahkan pernyataan kanvas ke label bersama :
<CommonLabel@MDLabel>
angle: 180 #
[...]
canvas.before:
PushMatrix
Rotate:
angle: self.angle
origin: self.center
canvas.after:
PopMatrix
Dan pada kode Python di kelas Animation akan memberikan property angle baru untuk animasi:
def start_animation(self):
lbl_1 = self.root.ids.lbl_1
lbl_2 = self.root.ids.lbl_2
Animation(angle=0, [...]).start(lbl_1)
Animation(angle=0, [...]).start(lbl_2)
Hasil:
Mari tambahkan animasi dari skala label:
<CommonLabel@MDLabel>
scale: 5 #
[...]
canvas.before:
PushMatrix
[...]
Scale:
#
x: self.scale
y: self.scale
z: self.scale
origin: self.center
canvas.after:
PopMatrix
Dalam kode Python di kelas Animation akan memberikan animasi skala properti baru :
def start_animation(self):
lbl_1 = self.root.ids.lbl_1
lbl_2 = self.root.ids.lbl_2
Animation(scale=1, [...]).start(lbl_1)
Animation(scale=1, [...]).start(lbl_2)
Hasil:
Kelas Animasi memiliki sejumlah peristiwa untuk melacak proses animasi: on_start, on_progress, on_complete . Pertimbangkan yang terakhir. on_complete dipanggil saat proses animasi selesai. Ikat acara ini ke metode complete_animation , yang sekarang kita buat:
[...]
class TestAnimation(MDApp):
[...]
def complete_animation(self, animation, animated_instance):
"""
:type animation: <kivy.animation.Animation object>
:type animated_instance: <WeakProxy to <kivy.factory.CommonLabel object>>
"""
# .
Animation(scale=1.4, d=1, t="in_out_back").start(animated_instance)
Animation(color=(1, 0, 1, 1), d=1).start(animated_instance)
Kami mengikat acara:
def start_animation(self):
[...]
animation = Animation(
angle=0, scale=1, opacity=1, y=lbl_1.height * 2, d=0.9, t="in_out_back"
)
animation.bind(on_complete=self.complete_animation)
animation.start(lbl_1)
[....]
Hasil:
Itu saja untuk saat ini. Ditanyakan:
Di bawah ini saya melampirkan pratinjau proyek Kivy / KivyMD dan tautan ke repositori tempat Anda dapat mengunduh APK dan menyentuh:
â APK Repositori
dapat ditemukan di direktori repositori - direktori StarTest / bin