Lekce 6 - Animace a ScatterLayout v Kivy a Pythonu

V předchozí lekci, Aplikace Čtečka Knih v Kivy a Pythonu, jsme vytvořili jednoduchou aplikaci Čtečka knih v Kivy frameworku.

Zdravím vás u další lekce Pythonu a Kivy frameworku. V té dnešní si ukážeme jak fungují animace a ScatterLayout.

ScatterLayout

Nejdříve si ukážeme, jak funguje ScatterLayout, pro ukázku nám poslouží Rectangle uvnitř canvasu. Se čtvercem půjde volně pohybovat, rotovat a libovolně měnit jeho velikost. To vše díky multi-touch podpoře, kterou Kivy framework nabízí. Ukažme si rovnou funkční kód:

import kivy
kivy.require("1.10.1")
from kivy.uix.scatterlayout import ScatterLayout
from kivy.graphics import Rectangle
from kivy.app import App

class MujWidget(ScatterLayout):

    def __init__(self, *args, **kwargs):
        super(MujWidget, self).__init__(*args, **kwargs)
        #Vytvoříme čtverec
        self.rect = Rectangle(size=(50, 50))
        #Přidáme čtverec do canvasu
        self.canvas.add(self.rect)

class MainApp(App):
    def build(self):
        return MujWidget()

root = MainApp()
root.run()

Nyní můžeme čtvercem volně pohybovat, měnit velikost a rotovat. S myší vytvoříte multi-touch bod pravým tlačítkem.

Pokud budete takovouto funkcionalitu potřebovat, určitě si na ScatterLayout nyní vzpomenete.

Animace

Animace nám umožňuje změnit vlastnosti widgetu, nastavit samotné animaci dobu a také přidat efekty přechodů, tzv. transition. Seznam přechodů, které Kivy nabízí, naleznete v oficiální dokumentaci. Vytvoříme si další ukázkovou aplikaci, tentokrát využívající Animation:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle
from kivy.animation import Animation
from kivy.app import App

class MujWidget(Widget):

    def __init__(self, *args, **kwargs):
        super(MujWidget, self).__init__(*args, **kwargs)
        #Vytvoříme si widget, do kterého přidáme čtverec
        self.widget = Widget(size = (50, 50), pos = (225, 225))
        self.rect = Rectangle(size = self.widget.size, pos = self.widget.pos)
        self.widget.canvas.add(self.rect)
        self.add_widget(self.widget)
        #Vytvoříme animaci, která trvá 3 sekundy
        anim = Animation(x = 500, y = 400, duration = 3)
        #Spustíme animaci s widgetem
        anim.start(self.widget)
        #Jelikož nepoužíváme Kivy Language, musíme vytvořit bind, aby se aktualizoval i čtverec
        self.widget.bind(pos = self.update, size = self.update)

    def update(self, *args):
        self.rect.pos = self.widget.pos
        self.rect.size = self.widget.size

class MainApp(App):
    def build(self):
        return MujWidget()

root = MainApp()
root.run()

Animace vypadá následovně:

Sekvence animací

Kivy nám dovoluje vytvořit sekvenci po sobě jdoucích animací. Jako příklad nám poslouží 2 na sebe navazující animace, které se budou opakovat:

import kivy
kivy.require("1.10.1")
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle
from kivy.animation import Animation
from kivy.app import App

class MujWidget(Widget):

    def __init__(self, *args, **kwargs):
        super(MujWidget, self).__init__(*args, **kwargs)
        #Vytvoříme si widget, do kterého přidáme čtverec
        self.widget = Widget(size = (50, 50), pos = (225, 225))
        self.rect = Rectangle(size = self.widget.size, pos = self.widget.pos)
        self.widget.canvas.add(self.rect)
        self.add_widget(self.widget)
        #Vytvoříme 2 animace, které trvají každá 3 sekundy
        anim = Animation(x = 500, y = 400, duration = 3, t = "out_bounce") + Animation(x = 225, y = 225, duration = 3, t = "in_bounce")
        #Nastavíme opakování animací
        anim.repeat = True
        #Spustíme animaci s widgetem
        anim.start(self.widget)
        #Jelikož nepoužíváme Kivy Language, musíme vytvořit bind, aby se aktualizoval i čtverec
        self.widget.bind(pos = self.update, size = self.update)

    def update(self, *args):
        self.rect.pos = self.widget.pos
        self.rect.size = self.widget.size

class MainApp(App):
    def build(self):
        return MujWidget()

root = MainApp()
root.run()

Jelikož jsme přidali 2 opačné efekty, animace na sebe krásně navazují

Zdrojový kód najdete ke stažení v příloze článku jako je tomu u všech lekcí.

V příští lekci, Hra a reakce na stisknutí klávesy v Kivy a Pythonu, si vytvoříme jednoduchou mobilní hru s autíčkem a naučíme se, jak reagovat na stisknutí klávesy.

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.