Kivy 简明教程

Kivy - Widget Animation

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

anim = Animation(property1=value1, property2=value2, ..)
anim.start(widget)

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

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

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

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” 坐标值从其当前值变为最大宽度,然后返回。

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() 方法触发。

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。

Example

下面是完整的代码 −

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 将开始前后移动。

这是初始位置 −

kivy widget animation

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

kivy widget animation button