¡Saludos a todos los fans y expertos del lenguaje de programación Python!
Hoy continuaremos tratando el tema de las animaciones en un marco multiplataforma para soporte multitáctil: Kivy junto con la biblioteca de componentes de Google Material Design : KivyMD . En el último artículo ya analizamos un ejemplo de una aplicación de prueba en Python / Kivy / KivyMD, en este repasaremos con más detalle el tema de las animaciones. Al final del artículo, proporcionaré un enlace al repositorio del proyecto, donde puede descargar y sentir por sí mismo, una aplicación de demostración de Kivy / KivyMD. Como el anterior, este artículo contendrá no pocas animaciones GIF y videos, así que sírvete un poco de café y ¡vamos!
Kivy se ejecuta en Linux, Windows, OS X, Android, iOS y Raspberry Pi. Puede ejecutar el mismo código en todas las plataformas compatibles sin realizar cambios adicionales en la base de código. Kivy admite una amplia variedad de dispositivos de entrada, incluidos WM_Touch, WM_Pen, Mac OS X Trackpad y Magic Mouse, Mtdev, Linux Kernel HID, TUIO y, como Flutter, no usa controles nativos. Todos sus widgets son personalizables. Esto significa que las aplicaciones de Kivy tendrán el mismo aspecto en todas las plataformas. Pero debido al hecho de que los widgets de Kivy se pueden personalizar a su gusto, puede crear sus propios widgets. Por ejemplo, así es como apareció la biblioteca KivyMD . Antes de continuar, echemos un vistazo a una pequeña descripción general de las características de Kivy:
Demostraciones de la aplicación Kivy
Estos videos demuestran claramente la interacción de la aplicación Kivy con el usuario mediante gestos y animaciones. Creemos una aplicación simple con animación de dos etiquetas:
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()
Esta es una aplicación lista para usar. Lo editaremos solo ligeramente. La regla CommonLabel en la línea KV es similar a la creación de una clase en código Python. Comparar:
El código en Kivy Language siempre es más corto y más legible. Por lo tanto, en el código Python, solo tendremos lógica. Creamos dos etiquetas con propiedades comunes descritas en la regla CommonLabel : opacidad , tamaño de textura de etiqueta ( adaptive_height ), alineación horizontal ( halign ), posición del eje Y ( y ) y les dimos a estas etiquetas id-shniki ( lbl_1 , lbl_2 ) para poder acceder y manipular las propiedades de los objetos de etiqueta desde el código Python. A continuación, adjuntamos la llamada al método start_animation al evento on_touch_down (que se activa cuando se toca la pantalla en cualquier lugar)en el que animaremos nuestras dos etiquetas.
Animación
Kivy usa la clase Animation para animar objetos . Es muy simple de usar: cuando inicializa la clase Animation, debe pasar nombres de propiedad con valores objetivo que se alcanzarán al final de la animación como argumentos. Por ejemplo:
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)
En la siguiente animación, he demostrado el resultado de la animación más simple que creamos, con diferentes tipos de animación:
 |
 |
 |
Compliquemos un poco la tarea e intentemos animar la rotación de las etiquetas en el plano. Para esto usaremos manipulaciones matriciales ( PushMatrix, PopMatrix, Rotate, Translate, Scale ). Agregue una declaración de lienzo a la etiqueta compartida :
<CommonLabel@MDLabel>
angle: 180 #
[...]
canvas.before:
PushMatrix
Rotate:
angle: self.angle
origin: self.center
canvas.after:
PopMatrix
Y en el código Python, en la clase Animación, pasaremos una nueva propiedad de ángulo para la animación:
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)
Resultado:
Agreguemos una animación de la escala de etiquetas:
<CommonLabel@MDLabel>
scale: 5 #
[...]
canvas.before:
PushMatrix
[...]
Scale:
#
x: self.scale
y: self.scale
z: self.scale
origin: self.center
canvas.after:
PopMatrix
En el código Python, pasaremos una nueva propiedad de escala para la animación a la clase 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)
Resultado:
La clase Animation tiene una serie de eventos para rastrear el proceso de animación: on_start, on_progress, on_complete . Considere lo último. on_complete se llama cuando finaliza el proceso de animación. Vinculemos este evento al método complete_animation que ahora crearemos:
[...]
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)
Vinculamos el evento:
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)
[....]
Resultado:
Eso es todo por ahora. Preguntó:
A continuación adjunto una vista previa del proyecto Kivy / KivyMD y un enlace al repositorio donde puedes descargar el APK y tocar:
→ El repositorio de
APK se puede encontrar en el directorio del repositorio - StarTest / bin