- Kivy Tutorial
- Kivy - Home
- Kivy Basics
- Kivy - Getting Started
- Kivy - Installation
- Kivy - Architecture
- Kivy - File Syntax
- Kivy - Applications
- Kivy - Hello World
- Kivy - App Life Cycle
- Kivy - Events
- Kivy - Properties
- Kivy - Inputs
- Kivy - Behaviors
- Kivy Buttons
- Kivy - Buttons
- Kivy - Button Events
- Kivy - Button Colors
- Kivy - Button Size
- Kivy - Button Position
- Kivy - Round Buttons
- Kivy - Disabled Buttons
- Kivy - Image Button
- Kivy Widgets
- Kivy - Widgets
- Kivy - Label
- Kivy - Text Input
- Kivy - Canvas
- Kivy - Line
- Kivy - Checkbox
- Kivy - Dropdown List
- Kivy - Windows
- Kivy - ScrollView
- Kivy - Carousel
- Kivy - Slider
- Kivy - Images
- Kivy - Popup
- Kivy - Switch
- Kivy - Spinner
- Kivy - Splitter
- Kivy - Progress Bar
- Kivy - Bubble
- Kivy - Tabbed Panel
- Kivy - Scatter
- Kivy - Accordion
- Kivy - File Chooser
- Kivy - Color Picker
- Kivy - Code Input
- Kivy - Modal View
- Kivy - Toggle Button
- Kivy - Camera
- Kivy - Tree View
- Kivy - reStructuredText
- Kivy - Action Bar
- Kivy - Video Player
- Kivy - Stencil View
- Kivy - VKeyboard
- Kivy - Touch Ripple
- Kivy - Audio
- Kivy - Videos
- Kivy - Spelling
- Kivy - Effects
- Kivy - Input Recorder
- Kivy - OpenGL
- Kivy - Text
- Kivy - Text Markup
- Kivy - Settings
- Kivy Layouts
- Kivy - Layouts
- Kivy - Float Layout
- Kivy - Grid Layouts
- Kivy - Box Layouts
- Kivy - Stack Layout
- Kivy - Anchor Layout
- Kivy - Relative Layout
- Kivy - Page Layout
- Kivy - Recycle Layout
- Kivy - Layouts in Layouts
- Kivy Advanced Concepts
- Kivy - Configuration Object
- Kivy - Atlas
- Kivy - Data Loader
- Kivy - Cache Manager
- Kivy - Console
- Kivy - Animation
- Kivy - Multistroke
- Kivy - Clock
- Kivy - SVGs
- Kivy - UrlRequest
- Kivy - Clipboard
- Kivy - Factory
- Kivy - Gesture
- Kivy - Language
- Kivy - Graphics
- Kivy - Drawing
- Kivy - Packaging
- Kivy - Garden
- Kivy - Storage
- Kivy - Vector
- Kivy - Utils
- Kivy - Inspector
- Kivy - Tools
- Kivy - Logger
- Kivy - Framebuffer
- Kivy Applications and Projects
- Kivy - Drawing App
- Kivy - Calculator App
- Kivy - Stopwatch App
- Kivy - Camera Handling
- Kivy - Image Viewer
- Kivy - Bezier
- Kivy - Canvas Stress
- Kivy - Circle Drawing
- Kivy - Widget Animation
- Kivy - Miscellaneous
- Kivy Useful Resources
- Kivy - Quick Guide
- Kivy - Useful Resources
- Kivy - Discussion
Kivy - Widget Animation
Any widget in Kivy toolkit can be animated. All you need to do is define an object of Animation class, choose at least one property of the target widget to animate and specify its final value to be reached after the animation effect is complete. Call the start() method of the Animation object, passing the target widget to it.
anim = Animation(property1=value1, property2=value2, ..) anim.start(widget)
In the following example, we have placed four Kivy Buttons. Two buttons are placed along the X-axis, keeping the "y" coordinate to 0 and randomizing the "x" coordinate so that one button is placed in first half and the other in second half.
Similarly, two more buttons are placed along the Y-axis, their "x" coordinate as 0 and y coordinate value assigned randomly.
Buttons placed along X-axis are animated to move up and down. The "y" coordinate value starts from its initial value all the way upto the maximum height of the window, and back to original position. The up and down movement is looping as the repeat property is set to True. Both horizontally placed buttons are bound to the method below −
def animate1(self, instance): animation = Animation(pos=(instance.pos[0], Window.height)) animation += Animation(pos=(instance.pos[0], 0)) animation.repeat=True animation.start(instance)
Similarly, the vertically arranged buttons b3 and b4 are bound to the following method. Their "x" coordinate value changes from their current value to maximum width and back.
def animate2(self, instance): animation = Animation(pos=(Window.width, instance.pos[1])) animation += Animation(pos=(0, instance.pos[1])) animation.repeat=True animation.start(instance)
While animation of each button can begin by pressing each button, we can make all the four buttons start animating simultaneously on a touch down event. The above callbacks are triggered by the trigger_action() method.
def on_touch_down(self, *args): self.b1.trigger_action(5) self.b2.trigger_action(10) self.b3.trigger_action(15) self.b4.trigger_action(20)
Rest of the code is just setting up the UI of four buttons in the build() method of the App class.
Example
Here's the complete code −
import kivy kivy.require('1.0.7') import random from kivy.animation import Animation from kivy.app import App from kivy.uix.button import Button from kivy.uix.floatlayout import FloatLayout from kivy.core.window import Window Window.size = (720,400) class TestApp(App): def animate1(self, instance): animation = Animation(pos=(instance.pos[0], Window.height)) animation += Animation(pos=(instance.pos[0], 0)) animation.repeat=True animation.start(instance) def animate2(self, instance): animation = Animation(pos=(Window.width, instance.pos[1])) animation += Animation(pos=(0, instance.pos[1])) animation.repeat=True animation.start(instance) def on_touch_down(self, *args): self.b1.trigger_action(5) self.b2.trigger_action(10) self.b3.trigger_action(15) self.b4.trigger_action(20) def build(self): box=FloatLayout() # create a button and attach animate() method # as a on_press handler self.b1 = Button( size_hint=(.15, .08), text='BTN1', pos=(random.randint(Window.width/2, Window.width), 0), on_press=self.animate1 ) self.b2 = Button( size_hint=(.15, .08), text='BTN2', pos=(random.randint(0, Window.width/2), 0), on_press=self.animate1 ) self.b3 = Button( size_hint=(.15, .08), text='BTN3', pos=(0, random.randint(0, Window.height/2)), on_press=self.animate2 ) self.b4 = Button( size_hint=(.15, .08), text='BTN4', pos=(0, random.randint(Window.height/2, Window.height)), on_press=self.animate2 ) box.add_widget(self.b1) box.add_widget(self.b2) box.add_widget(self.b3) box.add_widget(self.b4) box.bind(on_touch_down=self.on_touch_down) return box if __name__ == '__main__': TestApp().run()
Output
The program starts with the button position randomized. Click anywhere on the application window. Buttons b1 and b2 will start moving up and down. Buttons b3 and b4 will start moving back and forth.
This is the initial position −
The following figure is a screenshot of button positions while they are moving −
To Continue Learning Please Login
Login with Google