How To Create Animation With Kivy – Python Kivy GUI Tutorial #36

In this video I’ll show you how to use Animations with Kivy and Python. We’ll start by animating a button to change color when you click it. Then we’ll expand the size of the button and then animate it back to regular size. After that we’ll move the bottom around the screen.

Finally I’ll show you how to create a callback when the animation is finished so that you can do something else in the program.

To create animations, we need to import: from kivy.animation import Animation in our Python file.

Then simply create a variable and set it equal to an Animation() function. Inside that function just declare whatever you want to animate.

Then start your animation with: animate.start(widget)

Python Code: animations.py
GitHub Code: animations.py

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.animation import Animation

# Designate Our .kv design file 
Builder.load_file('animations.kv')

class MyLayout(Widget):
	def animate_it(self, widget, *args):
		# Define The Animation you want to do
		animate = Animation(
			background_color=(0,0,1,1),
			duration=1)

		# Do second animation
		animate += Animation(
			size_hint = (1,1))

		# Do Third animation
		animate += Animation(
			size_hint = (.5,.5))

		animate += Animation(
			pos_hint = {"center_x": 0.1})

		animate += Animation(
			pos_hint = {"center_x": 0.5})

		# Start The Animation
		animate.start(widget)

		# Create a callback
		animate.bind(on_complete = self.my_callback)

	def my_callback(self, *args):
		self.ids.my_label.text = "Wow! Look At That!"




class AwesomeApp(App):
	def build(self):
		return MyLayout()


if __name__ == '__main__':
	AwesomeApp().run()

Kivy Design Code: animations.kv
GitHub Code: animations.kv

<MyLayout>
	BoxLayout:
		orientation: "vertical"
		size: root.width, root.height
		
		padding: 50
		spacing: 20

		
		Label:
			id: my_label
			text: "Hello World!"
			font_size: 32

		Button:
			text: "Press Me!"
			font_size: 32
			size_hint: .5, .5
			pos_hint: {"center_x": 0.5}

			on_release: root.animate_it(self)