Kivy - 元件動畫

---

---

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。

示例

以下是完整程式碼 -

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()

輸出

程式以隨機化的按鈕位置開始。點選應用程式視窗的任意位置。按鈕 b1 和 b2 將開始上下移動。按鈕 b3 和 b4 將開始前後移動。

這是初始位置 -

下圖是按鈕在移動時的螢幕截圖 -