38. Animation

Any widget can be animated. We have to give the final value of the property to be changed. In addition, there are many transition paths.

---

The Widget class is imported for the root and the Ball. To use the animation functions, we have to use the Animation class. The String Property is used to update the Label.

---

This is the beginning of Ball widget. There is a StringProperty anim_choice. We set an initial String. The class variable counter is cleared. Here is the first half of on_touch_down. Whenever a click occurs, Kivy will call this function. We first cancel any animation in progress. Then a List of Strings is created. We only show the first three lines here. These are all the transitions possible in Kivy.

---

The class variable, anim_choice is set, to one of the Strings, pointed by the counter variable. Next we create a new animation. It will go from the current position to the touch coordinate. The t, short for transition, is set to the String in anim_choice. The animation takes the default 1 second to complete. We may choose another value for d, short for duration. Finally, the counter is updated to next number. It will be a simple increment most of the time; however when it goes to end of list, it begins again at 0, that being due to the modulus operation.

---

The root class and the app class are created, and the App class is run and returns the root class.

# ex38.py

from kivy.uix.widget import Widget
from kivy.app import App
from kivy.animation import Animation
from kivy.properties import StringProperty

class Ball(Widget):
    anim_choice = StringProperty('touch_down to animate ball')
    counter = 0
    def on_touch_down(self, touch):
        Animation.cancel_all(self)
        anim_choices = ['in_back','in_bounce','in_circ',
                        'in_cubic','in_elastic','in_expo',
                        'in_out_back','in_out_bounce','in_out_circ',
                        'in_out_cubic','in_out_elastic','in_out_expo',
                        'in_out_quad','in_out_quart','in_out_quint',
                        'in_out_sine','in_quad','in_quart',
                        'in_quint','in_sine','linear',
                        'out_back','out_bounce','out_circ',
                        'out_cubic','out_elastic','out_expo',
                        'out_quad','out_quart','out_quint',
                        'out_sine']
        self.anim_choice = anim_choices [self.counter]
        anim = Animation(center_x = touch.x,
                         center_y = touch.y,
                         t = self.anim_choice)
        anim.start(self)
        self.counter = (self.counter+1) % len(anim_choices)
    
class Ex38(Widget):
    pass
       
class Ex38App(App):
    def build(self):
        return Ex38()

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

---

In the kv file, the Ball shape is defined as an ellipse.

---

The background is blue.

---

The Label, with some markup, indicates the current value of anim_choice.

# ex38.kv

<Ball>:
    size: 65,60
    canvas:
        Color:
            rgb: .75, 0, 0
        Ellipse:
            pos: self.pos
            size: self.size
    
<Ex38>:
    ball: ball_id
    canvas:
        Color:
            rgb: 0,0,1
        Rectangle:
            size: root.width,root.height
            pos: 0,0
    Label:
        pos: 300,root.top-100
        text:
            ( '[size=32][color=88FF22]' +
            root.ball.anim_choice +
            '[/color][/size]' )
        markup: True
    Ball:
        id: ball_id

        

---