Animation in kivy

source: https://www.pinterest.com/pin/588423507551907244/

Animation is a way to make figures, images and widgets appear as moving. In kivy, we will use it to make our application more attractive and interactive.

Why Animation?

• Animation is useful when the application loads data and changes state.
• It is used to provide an attractive look to the application.
• It makes the user feel comfortable with the UI.
• It is also used to convey the message in a unique way.

Different ways of creating Animation in Kivy

There are n number of ways of creating animation but in this article I’ll show you two ways which i use for creating animations.

• By using inbuilt package kivy.animation
• without using kivy.animation ( using variables )

With Kivy.animation

It is an inbuilt package of kivy which is already provided to apply animation and it is also very easy to use this package, let us understand this type by some examples.

Example 1

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.animation import Animation
from kivy.uix.button import Button
class testapp(App):
 def build(self):
  self.layout=FloatLayout()
  self.button=Button(text=’move’,size_hint=(0.2,0.1),pos_hint={’x’:0.4,’y’:0},on_press=self.animation)
  self.layout.add_widget(self.button)
  return self.layout
 #---------animation function
 def animation(self,*args):
  ani=Animation(pos_hint={’x’:0.4,’y’:0.7})
  ani.start(self.button)
testapp().run()

In this animation i have shown you a button whose position is changing on clicking that button and appears as moving.

I had simply added one button in UI and then a function is bound to that button in which an animation is applied on its position. Create one animation object of changing position, and then start function is used to apply and start that animation and a widget name is passed as a parameter on which animation should be applied.

Example 2

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.graphics import Canvas,Line
from kivy.animation import Animation
from kivy.clock import Clock
class testapp(App):
 def build(self):
  self.layout=FloatLayout()
  
  with self.layout.canvas:
   self.line=Line(points=(300, 1000, 350,1000 ),width=10)
  Clock.schedule_interval(self.animate,2)
  return self.layout
 #---------animation function
 def animate(self,*args):
  ani=Animation(points=(550,1000,600,1000))
  ani+=Animation(points=(300,1000,350,1000))
  ani.start(self.line) 
 
testapp().run()

In this example, i have shown a graphical animation which can be used when an application switches page or loads data and we want our user to wait for a while.

First, create a simple line with points (x1,y1,x2,y2) with the help of graphics and then keeping both y constant we will animate this line by changing values of x1 and x2. For running our animate function we have used a clock package which will help us to animate at regular interval of time. Now this line will move in a fixed interval of time.

Now we will see another way of doing animation.

Without kivy.animation

In this type we won’t use Animation package instead we will use variables for doing this.

The process is the same but it will help us to be more creative with animations and we can create more attractive animation according to our need.

Let see some examples of this.

Example 3

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.clock import Clock
class testapp(App):
 def build(self):
  self.layout=FloatLayout()
  self.x=0
  self.button=Button(text='move',size_hint=(0.2,0.05),pos=(self.x,1000))
  self.layout.add_widget(self.button)
  Clock.schedule_interval(self.animate,0.01)
  return self.layout
 #---------animation function
 def animate(self,*args):
    if self.x==900:
     self.x=0
    else:
      self.x+=10
    self.button.pos[0]=self.x
   
 
testapp().run()

In this example again i have shown a moving button from left to right but it will look better than before.

simply add a button to your UI and then bind one function to the clock schedule in which we are taking the position of button as variable and will keep changing it by some value in every interval of time. Now that button will appear as moving and will look good.

Example 4

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.graphics import Rectangle,Canvas,Line
from kivy.clock import Clock
class testapp(App):
 def build(self):
  self.layout=FloatLayout()
  self.x=90
  self.y=360
  with self.layout.canvas:
   self.line=Line(circle=(550, 1050, 50, self.x, self.y, 20),width=10)
  Clock.schedule_interval(self.animate,0.01)
  return self.layout
 #---------animation function
 def animate(self,*args):
  self.x+=10
  self.y+=10
  self.line.circle=(550, 1050, 50, self.x, self.y, 20) 
 
testapp().run()

In this, I have shown an animation which is most commonly used animation in application to make a user wait while processing.

First create a 3/4 part of a line circle with the help of graphics then bind a function with a clock schedule in which we take the starting point and ending point of the circle as variables and then both will be changing in parallel manner after every interval and will look like a processing.

These are some basic examples of animation which I have shown you, but if you are creative you can perform much more attractive animation with kivy and if you want to learn the basics of kivy then you can explore my previous blogs.

Hello, in the world of kivy
My first Application in kivy

Comment below what you wish to learn next