Grüße an alle Fans und Experten der Programmiersprache Python!
Heute werden wir mit dem Thema Animationen in einem plattformübergreifenden Rahmen für die Multi-Touch - Unterstützung beschäftigen - Kivy in Verbindung mit der Google Material Design - Komponenten - Bibliothek - KivyMD . Im letzten Artikel, analysierten wir bereits ein Beispiel für eine Testanwendung in Python / Kivy / KivyMD, in dieser werden wir das Thema Animationen im Detail gehen. Am Ende des Artikels werde ich einen Link zum Projekt-Repository bereitstellen, wo Sie eine Demo-Anwendung von Kivy / KivyMD herunterladen und selbst fühlen können. Wie der vorherige enthält dieser Artikel nicht wenige GIF-Animationen und -Videos. Gießen Sie also Kaffee ein und lassen Sie uns gehen!
Kivy läuft unter Linux, Windows, OS X, Android, iOS und Raspberry Pi. Sie können denselben Code auf allen unterstützten Plattformen ausführen, ohne zusätzliche Änderungen an der Codebasis vorzunehmen. Kivy unterstützt eine Vielzahl von Eingabegeräten, einschließlich WM_Touch, WM_Pen, Mac OS X Trackpad und Magic Mouse, Mtdev, Linux Kernel HID, TUIO, und verwendet wie Flutter keine nativen Steuerelemente. Alle Widgets sind anpassbar. Dies bedeutet, dass Kivy-Apps auf allen Plattformen gleich aussehen. Aufgrund der Tatsache, dass Kivy-Widgets nach Ihren Wünschen angepasst werden können, können Sie Ihre eigenen Widgets erstellen. So wurde beispielsweise die KivyMD- Bibliothek angezeigt . Bevor wir fortfahren, werfen wir einen Blick auf einen kleinen Überblick über die Funktionen von Kivy:
Kivy-Anwendungsdemos
Diese Videos zeigen deutlich die Interaktion der Kivy-Anwendung mit dem Benutzer mithilfe von Gesten und Animationen. Lassen Sie uns eine einfache Anwendung mit Animation von zwei Beschriftungen erstellen:
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()
Dies ist eine vorgefertigte Anwendung. Wir werden es nur geringfügig bearbeiten. Die CommonLabel- Regel in der KV- Zeile ähnelt dem Erstellen einer Klasse in Python-Code. Vergleichen Sie:
Der Code in Kivy Language ist immer kürzer und besser lesbar. Daher haben wir im Python-Code nur Logik. Wir haben zwei Etiketten mit gemeinsamen Eigenschaften in der beschriebenen CommonLabel Regel : Opazität , Textur Etikettengröße ( adaptive_height ), horizontale Ausrichtung ( halign ), Y- Achsen - Position ( y ) und gab diese Etiketten - ID-shniki ( lbl_1 , lbl_2 ) um auf die Eigenschaften von Beschriftungsobjekten aus Python-Code zugreifen und diese bearbeiten zu können. Als Nächstes haben wir den Methodenaufruf start_animation an das Ereignis on_touch_down angehängt (ausgelöst, wenn der Bildschirm irgendwo berührt wird).in dem wir unsere beiden Labels animieren werden.
Animation
Kivy verwendet die Animationsklasse , um Objekte zu animieren . Die Verwendung ist sehr einfach: Wenn Sie die Animationsklasse initialisieren, müssen Sie Eigenschaftsnamen mit Zielwerten übergeben, die am Ende der Animation als Argumente erreicht werden. Zum Beispiel:
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)
In der folgenden Animation habe ich das Ergebnis der einfachsten Animation gezeigt, die wir erstellt haben, mit verschiedenen Arten von Animationen:
 |
 |
 |
Lassen Sie uns die Aufgabe etwas komplizieren und versuchen, die Drehung der Beschriftungen in der Ebene zu animieren. Dazu verwenden wir Matrixmanipulationen ( PushMatrix, PopMatrix, Rotate, Translate, Scale ). Fügen Sie dem freigegebenen Label eine Canvas- Anweisung hinzu :
<CommonLabel@MDLabel>
angle: 180 #
[...]
canvas.before:
PushMatrix
Rotate:
angle: self.angle
origin: self.center
canvas.after:
PopMatrix
Und im Python-Code übergeben wir der Animationsklasse eine neue Winkeleigenschaft für die Animation:
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)
Ergebnis:
Fügen wir eine Animation der Beschriftungsskala hinzu:
<CommonLabel@MDLabel>
scale: 5 #
[...]
canvas.before:
PushMatrix
[...]
Scale:
#
x: self.scale
y: self.scale
z: self.scale
origin: self.center
canvas.after:
PopMatrix
Im Python-Code übergeben wir der Animationsklasse eine neue Skalierungseigenschaft für die Animation:
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)
Ergebnis:
Die Animationsklasse verfügt über eine Reihe von Ereignissen, um den Animationsprozess zu verfolgen: on_start, on_progress, on_complete . Betrachten Sie letzteres. on_complete wird aufgerufen, wenn der Animationsprozess abgeschlossen ist. Binden wir dieses Ereignis an die Methode complete_animation , die wir jetzt erstellen:
[...]
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)
Wir binden die Veranstaltung:
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)
[....]
Ergebnis:
Das ist alles für jetzt. Fragte:
Unten füge ich eine Vorschau des Kivy / KivyMD-Projekts und einen Link zum Repository hinzu, wo Sie die APK herunterladen und berühren können:
→ Das
APK- Repository befindet sich im Repository-Verzeichnis - StarTest / bin