Hey guys, today we’ll be talking about transitions in Kivy. But before we start, here’s some info for you.
*****
Table of Contents
Book Info
And Now Let’s Move On…
When you switch from one screen to another, the screens slide from right to left. This animation is called a transition. You get it out of the box when you use a screen manager. But what if you wanted the screens to slide in the opposite direction? Or what if you don’t want the transition at all? Finally, what if you would like a different animation?
If you want to learn how to remove the transition completely, or how to change its type to CardTransition, SwapTransition, FadeTransition, WipeTransition, FallOutTransition or RiseInTransition, I describe all these situations in detail in my book.
Here I’m only going to show you how to set a transition direction. Besides, I’m going to address another problem here. Run the app and switch from Settings screen to Race screen:
As you can see, when you switch screens, the background color of the first screen changes to black. It doesn’t look good. We’ll change it so that the background is yellow all the time during the transition.
Make Awesome Games and Other 3D Apps
with Panda3D and Blender using Python.
Cool stuff, easy to follow articles.
Get the magazine here (PDF).
Transition Direction
Let’s start with changing the direction of the transition. What if we want the screens to slide from left to right? You just have to specify the direction in code. Here’s the settings.kv file:
# File name: settings.kv
#:import settings settings
...
### READY BUTTON ###
RedButton:
text: 'Ready'
# Now we not only want to switch to another screen,
# but also change the sliding direction.
on_press:
root.manager.current = 'racescreen'
root.manager.transition.direction = 'right'
Now when you run the app and press the Ready button, the screens will slide from left to right:
This time the Race screen looks bad. We want the background to be yellow at all times, so let’s fix it as next.
Fixing the Background Color
The problem with the background color is that during the transition we see background of the app window, not any of the screens. The default color is black. If we don’t want to see the black color during the transition, we have to set the window’s color to the same color as the background color of the screens. We’ll do it in the main.py file.
First we need to import the Window class that takes care of all sorts of app window configurations and then use the clearcolor property to change the background color.
Learn the basics of Python, including OOP.
with lots of exercises, easy to follow
The course is available on Udemy.
Now, one important thing: You have to import the Window class only after setting the configuration. Otherwise the configuration won’t be set as expected. A good place to do that is directly before the app is run:
# File name: main.py
import kivy
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager
from kivy.config import Config
from kivy.lang import Builder
# Configuration
Config.set('graphics', 'width', '1200')
Config.set('graphics', 'height', '675')
Config.set('graphics', 'resizable', '1')
# kv files
Builder.load_file('settings.kv')
Builder.load_file('race.kv')
Builder.load_file('gameover.kv')
Builder.load_file('widgets.kv')
class SlugraceScreenManager(ScreenManager):
pass
class SlugraceApp(App):
def build(self):
return SlugraceScreenManager()
if __name__ == '__main__':
# We need the Window class to change the background color.
from kivy.core.window import Window
# Now we can change the color to the same shade of yellow
# as the screens.
Window.clearcolor = (1, 1, .8, 1)
SlugraceApp().run()
Learn the basics of 3D modeling in Blender.
step-by-step, easy to follow, visually rich
The course is available on Udemy and on Skillshare.
If you now run the app and press the Ready button, you won’t see the ugly black background anymore:
As you can see, here the screens are still sliding from left to right. You can also experiment with the two vertical directions, up and down. All you have to do is just set the transition direction to ‘up’ or ‘down’ respectively. Finally, let’s change back to ‘left’, which we can do by either setting the transition direction explicitly to ‘left’ or just removing the line of code completely as ‘left’ is the default value. Let’s do the latter.