Salutations à tous les fans et experts du langage de programmation Python!
Aujourd'hui, nous continuerons à traiter le sujet des animations dans un cadre multiplateforme pour le support multi-touch - Kivy en conjonction avec la bibliothèque de composants Google Material Design - KivyMD . Dans le dernier article, nous avons déjà analysé un exemple d'application de test en Python / Kivy / KivyMD, dans celui-ci nous reviendrons plus en détail sur le sujet des animations. À la fin de l'article, je fournirai un lien vers le référentiel du projet, où vous pourrez télécharger et ressentir par vous-même, une application de démonstration Kivy / KivyMD. Comme le précédent, cet article ne contiendra pas un petit nombre d'animations et de vidéos GIF, alors versez un café et c'est parti!
Kivy fonctionne sous Linux, Windows, OS X, Android, iOS et Raspberry Pi. Vous pouvez exécuter le même code sur toutes les plates-formes prises en charge sans apporter de modifications supplémentaires à la base de code. Kivy prend en charge une grande variété de périphériques d'entrée, y compris WM_Touch, WM_Pen, Mac OS X Trackpad et Magic Mouse, Mtdev, Linux Kernel HID, TUIO et, comme Flutter, il n'utilise pas de contrôles natifs. Tous ses widgets sont personnalisables. Cela signifie que les applications Kivy auront la même apparence sur toutes les plates-formes. Mais étant donné que les widgets Kivy peuvent être personnalisés à votre guise, vous pouvez créer vos propres widgets. Par exemple, voici comment la bibliothèque KivyMD est apparue . Avant de continuer, jetons un coup d'œil à un petit aperçu des fonctionnalités de Kivy:
Démos d'application Kivy
Ces vidéos montrent clairement l'interaction de l'application Kivy avec l'utilisateur à l'aide de gestes et d'animations. Créons une application simple avec animation de deux étiquettes:
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()
Ceci est une application prête à l'emploi. Nous ne le modifierons que légèrement. La règle CommonLabel sur la ligne KV est similaire à la création d'une classe en code Python. Comparer:
Le code en Kivy Language est toujours plus court et plus lisible. Par conséquent, dans le code Python, nous n'aurons que de la logique. Nous avons créé deux étiquettes avec des propriétés communes décrites dans la règle CommonLabel : opacité ( opacité ), taille de texture d'étiquette ( adaptive_height ), alignement horizontal ( halign ), position Y ( y ) et avons donné à ces étiquettes ids-shniki ( lbl_1 , lbl_2 ) pour pouvoir accéder et manipuler les propriétés des objets d'étiquette à partir du code Python. Ensuite, nous avons attaché l' appel de la méthode start_animation à l' événement on_touch_down (déclenché lorsque vous touchez l'écran n'importe où)dans lequel nous animerons nos deux étiquettes.
Animation
Kivy utilise la classe Animation pour animer des objets . Il est très simple à utiliser: lorsque vous initialisez la classe Animation, vous devez passer des noms de propriétés avec des valeurs cibles qui seront atteintes à la fin de l'animation comme arguments. Par exemple:
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)
Dans l'animation ci-dessous, j'ai démontré le résultat de l'animation la plus simple que nous ayons créée, avec différents types d'animation:
 |
 |
 |
Compliquons un peu la tâche et essayons d'animer la rotation des étiquettes sur l'avion. Pour cela, nous utiliserons des manipulations matricielles ( PushMatrix, PopMatrix, Rotate, Translate, Scale ). Ajoutez une instruction canvas à l'étiquette partagée :
<CommonLabel@MDLabel>
angle: 180 #
[...]
canvas.before:
PushMatrix
Rotate:
angle: self.angle
origin: self.center
canvas.after:
PopMatrix
Et dans le code Python, nous passerons une nouvelle propriété angle pour l'animation à la classe 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)
Résultat:
Ajoutons une animation de l'échelle des étiquettes:
<CommonLabel@MDLabel>
scale: 5 #
[...]
canvas.before:
PushMatrix
[...]
Scale:
#
x: self.scale
y: self.scale
z: self.scale
origin: self.center
canvas.after:
PopMatrix
Dans le code Python, nous passerons une nouvelle propriété d' échelle pour l'animation à la classe 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)
Résultat:
La classe Animation a un certain nombre d'événements pour suivre le processus d'animation: on_start, on_progress, on_complete . Considérez ce dernier. on_complete est appelé lorsque le processus d'animation se termine. Lions cet événement à la méthode complete_animation que nous allons maintenant créer:
[...]
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)
Nous lions l'événement:
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)
[....]
Résultat:
C'est tout pour le moment. A demandé:
Ci-dessous, je joins un aperçu du projet Kivy / KivyMD et un lien vers le référentiel où vous pouvez télécharger l' APK et toucher:
→ Le référentiel
APK se trouve dans le répertoire du référentiel - StarTest / bin