Kivy 简明教程

Kivy - Widget Animation

Kivy 工具包中的任何控件都可以被动画化。您需要做的就是定义 Animation 类的一个对象，选择至少一个动画目标控件的属性并指定该属性在动画效果完成后要达到的最终值。调用 Animation 对象的 start() 方法，并将目标控件传递给它。

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)

在以下示例中，我们放置了四个 Kivy 按钮。两个按钮沿 X 轴放置，保持“y”坐标为 0，并对“x”坐标进行随机化，以便一个按钮位于前半部分，另一个按钮位于后半部分。

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.

同样，另外两个按钮沿 Y 轴放置，它们的“x”坐标为 0，“y”坐标值随机分配。

Similarly, two more buttons are placed along the Y-axis, their "x" coordinate as 0 and y coordinate value assigned randomly.

沿着 X 轴放置的按钮以向上下移动的方式进行动画。 “y” 坐标值从其初始值一直开始到窗口的最大高度，然后返回到原始位置。由于 repeat 属性设置为 True，所以向上和向下移动是循环的。两个水平放置的按钮都绑定到下面的方法 −

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)

类似地，竖直排列的按钮 b3 和 b4 绑定到以下方法。它们的 “x” 坐标值从其当前值变为最大宽度，然后返回。

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)

虽然每个按钮的动画可以通过按每个按钮开始，但是我们可以在按下事件的同时让所有四个按钮开始同时动画。上述回调由 trigger_action() 方法触发。

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)

代码的其余部分仅仅是在 App 类的 build() 方法中设置四个按钮的 UI。

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

程序以按钮位置随机开始。在应用程序窗口的任何位置单击。按钮 b1 和 b2 将开始向上和向下移动。按钮 b3 和 b4 将开始前后移动。

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 −

kivy widget animation

下图是按钮在移动时的屏幕截图 −

The following figure is a screenshot of button positions while they are moving −

kivy widget animation button