تحية لكل محبي وخبراء لغة البرمجة Python!
سنواصل اليوم التعامل مع موضوع الرسوم المتحركة في إطار عمل عبر الأنظمة الأساسية لدعم اللمس المتعدد - Kivy بالاشتراك مع مكتبة مكون Google Material Design - KivyMD . في المقالة الأخيرة ، قمنا بالفعل بتحليل مثال لتطبيق اختبار في Python / Kivy / KivyMD ، في هذا المقال سنتناول موضوع الرسوم المتحركة بمزيد من التفصيل. في نهاية المقال ، سأقدم رابطًا إلى مستودع المشروع ، حيث يمكنك تنزيل تطبيق Kivy / KivyMD التجريبي والشعور به بنفسك. مثل المقال السابق ، لن تحتوي هذه المقالة على عدد صغير من الرسوم المتحركة ومقاطع الفيديو بتنسيق GIF ، لذا صب بعض القهوة ودعنا نذهب!
يعمل Kivy على Linux و Windows و OS X و Android و iOS و Raspberry Pi. يمكنك تشغيل نفس الكود على جميع الأنظمة الأساسية المدعومة دون إجراء أي تغييرات إضافية على قاعدة التعليمات البرمجية. يدعم Kivy مجموعة متنوعة من أجهزة الإدخال ، بما في ذلك WM_Touch و WM_Pen و Mac OS X Trackpad و Magic Mouse و Mtdev و Linux Kernel HID و TUIO ومثل Flutter ، لا يستخدم عناصر التحكم الأصلية. جميع أدواته قابلة للتخصيص. هذا يعني أن تطبيقات Kivy ستبدو كما هي عبر جميع الأنظمة الأساسية. ولكن نظرًا لحقيقة أنه يمكن تخصيص عناصر واجهة مستخدم Kivy كما تريد ، يمكنك إنشاء عناصر واجهة مستخدم خاصة بك. على سبيل المثال ، هكذا ظهرت مكتبة KivyMD . قبل أن نواصل ، دعنا نلقي نظرة عامة صغيرة على ميزات Kivy:
عروض توضيحية لتطبيق Kivy
توضح مقاطع الفيديو هذه بوضوح تفاعل تطبيق Kivy مع المستخدم باستخدام الإيماءات والرسوم المتحركة. دعنا ننشئ تطبيقًا بسيطًا برسوم متحركة لتسميتين:
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()
هذا تطبيق جاهز. سنقوم بتحريره بشكل طفيف فقط. تشبه قاعدة CommonLabel على سطر KV إنشاء فئة في كود Python. قارن:
دائمًا ما يكون الرمز في لغة Kivy أقصر وأكثر قابلية للقراءة. لذلك ، في كود Python ، سيكون لدينا منطق فقط. ولقد خلقنا تسميات اثنين مع الخصائص العامة هو موضح في CommonLabel حكم : التعتيم ( التعتيم )، وحجم التسمية الملمس ( adaptive_height )، المحاذاة الأفقية ( halign )، Y موقف ( ص )، وقدم هذه التسميات هويات-shniki ( lbl_1 ، lbl_2 ) لتتمكن من الوصول إلى خصائص كائنات التسمية ومعالجتها من كود Python. المقبل، ونحن إرفاق start_animation استدعاء الأسلوب إلى on_touch_down الحدث (اندلعت عندما لمس أي مكان على الشاشة)الذي سنقوم فيه بتحريك علامتينا.
الرسوم المتحركة
يستخدم Kivy فئة الرسوم المتحركة لتحريك الكائنات . إنه سهل الاستخدام للغاية: عند تهيئة فئة الرسوم المتحركة ، يجب أن تمرر ، كوسائط ، أسماء الخصائص مع القيم المستهدفة التي سيتم الوصول إليها في نهاية الرسوم المتحركة. على سبيل المثال:
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)
في الرسوم المتحركة أدناه ، أوضحت نتيجة أبسط الرسوم المتحركة التي أنشأناها ، مع أنواع مختلفة من الرسوم المتحركة:
 |
 |
 |
دعونا نعقد المهمة قليلاً ونحاول تحريك دوران الملصقات على المستوى. لهذا سوف نستخدم معالجات المصفوفة ( PushMatrix ، PopMatrix ، Rotate ، Translate ، Scale ). أضف عبارة Canvas إلى التصنيف المشترك :
<CommonLabel@MDLabel>
angle: 180 #
[...]
canvas.before:
PushMatrix
Rotate:
angle: self.angle
origin: self.center
canvas.after:
PopMatrix
وفي كود Python ، سنقوم بتمرير خاصية زاوية جديدة للرسوم المتحركة لفئة الرسوم المتحركة:
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)
نتيجة:
دعنا نضيف رسمًا متحركًا لمقياس الملصقات:
<CommonLabel@MDLabel>
scale: 5 #
[...]
canvas.before:
PushMatrix
[...]
Scale:
#
x: self.scale
y: self.scale
z: self.scale
origin: self.center
canvas.after:
PopMatrix
في كود Python ، سنقوم بتمرير خاصية مقياس جديدة للرسوم المتحركة لفئة الرسوم المتحركة:
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)
نتيجة:
تحتوي فئة الرسوم المتحركة على عدد من الأحداث لتتبع عملية الرسوم المتحركة: on_start ، on_progress ، on_complete . ضع في اعتبارك الأخير. يتم استدعاء on_complete عند انتهاء عملية الرسوم المتحركة. ودعونا ربط هذا الحدث إلى complete_animation طريقة التي سنقوم الآن إنشاء:
[...]
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)
نحن نلزم الحدث:
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)
[....]
نتيجة:
هذا كل شئ حتى الان. طلبت:
أرفق أدناه معاينة لمشروع Kivy / KivyMD ورابطًا إلى المستودع حيث يمكنك تنزيل APK واللمس:
→ و
APK مستودع يمكن العثور عليها في الدليل مستودع - StarTest / بن