Kivy - 動畫



將動畫效果應用於小部件是 Kivy 框架最吸引人的功能之一。在 Kivy 中,動畫功能在 kivy.animation 模組中包含的 Animation 類中定義。同一個模組還包含 AnimationTransition 類。它是一組應用動畫過渡效果的函式。

要使用動畫效果,Kivy 應用程式應:

  • 首先確定要為哪個小部件屬性設定動畫,

  • 設定 Animation 類的物件,

  • 設定屬性的最終值,

  • 呼叫 Animation 物件的 start() 方法,並將小部件作為引數傳遞。

要為小部件的 x 或 y 位置設定動畫,只需指定動畫結束時希望小部件放置的目標 x/y 值:

rom kivy.animation import Animation
anim = Animation(x=100, y=100)
anim.start(widget)

這將從小部件的原始位置到 100,100 為其 x 和 y 位置設定動畫,預設持續時間為一秒。

您可以要求為多個屬性設定動畫。例如,要為位置和大小設定動畫,請使用:

anim = Animation(x=50, size=(80, 80))
anim.start(widget)

您還可以指定 Animation 物件的 transition(或 t)屬性以應用過渡效果。

在兩個 Animation 物件之間使用“+”運算子將動畫按順序連線。

anim = Animation(x=50) + Animation(size=(80, 80), duration=2)

這將使小部件在 1 秒內動畫到 x=50,然後在接下來的 2 秒內將大小動畫到 (80, 80)。

另一方面,“&”運算子並行連線動畫。以下示例將在 1 秒內同時為位置動畫到 (80, 10),大小動畫到 (800, 800):

anim = Animation(pos=(80, 10))
anim &= Animation(size=(800, 800), duration=2.)

如果程式正在實現“順序”動畫,可以透過設定 anim.repeat = True 將動畫設定為迴圈重複。

Animation 類具有以下屬性和方法:

  • duration 或 d - 動畫持續時間(以秒為單位),預設為 1。

  • transition 或 t - 動畫屬性的過渡函式。它可以是 AnimationTransition 中方法的名稱。

  • step 或 s - 浮點數。動畫的步長(以毫秒為單位)。預設為 0,這意味著動畫會針對每一幀更新。如果要以 30 FPS 的速度設定動畫,請使用 s=1/30。

  • cancel() - 取消之前應用於小部件的動畫。

  • cancel_all() - 取消所有與特定小部件/屬性列表相關的動畫。

  • start() - 在小部件上啟動動畫。

  • stop() - 停止之前應用於小部件的動畫,觸發 on_complete 事件。

  • stop_all() - 停止所有與特定小部件/屬性列表相關的動畫。

示例

藉助以下“kv”指令碼,按鈕和標籤被放置在垂直框佈局中。按鈕繫結到animating()方法。

<MyLayout>
   BoxLayout:
      orientation: "vertical"
      size: root.width, root.height
      padding: 50
      spacing: 20
      Label:
         id: my_label
         text: "Hello World!"
         font_size: 32
      Button:
         text: "Start"
         font_size: 32
         size_hint: .5, .5
         pos_hint: {"center_x": 0.5}
         on_release: root.animating(self)

此“kv”指令碼載入到 App 類中。animating() 方法在單擊時對按鈕應用位置、背景顏色和大小動畫效果。

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.animation import Animation
from kivy.core.window import Window

Window.size = (720, 400)

class MyLayout(Widget):
   def animating(self, widget, *args):
      animate = Animation(
         pos=(widget.pos[0], Window.height - 50)
      )
      animate += Animation(pos=(widget.pos[0], 0))
      animate += Animation(
         background_color=(0, 0, 1, 1),
         duration=1
      )
      animate += Animation(size_hint=(1, 1))
      animate += Animation(size_hint=(.5, .5))
      animate += Animation(pos_hint={"center_x": 0.1})
      animate += Animation(pos_hint={"center_x": 0.5})
      animate.start(widget)
      
      # Create a callback
      animate.bind(on_complete=self.my_callback)
   
   def my_callback(self, *args):
      self.ids.my_label.text = "Hello Kivy"

class AwesomeApp(App):
   def build(self):
      return MyLayout()

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

輸出

執行上述程式。您應該看到一個標籤,並在其下方看到一個按鈕。

Kivy Animation

單擊按鈕以啟動動畫效果。按鈕上下移動、左右移動、大小增減以及顏色變化。

Kivy Animation Start
廣告