Kivy中的動畫浮動操作按鈕


在Kivy中,浮動操作按鈕(FAB)是現代移動應用中最流行的UI元件之一,用於表示應用程式的主要操作。Kivy是一個開源的Python框架,用於建立跨平臺的使用者介面。在本文中,我們將討論如何在Kivy中建立動畫浮動操作按鈕。

什麼是Kivy中的浮動操作按鈕?

浮動操作按鈕是一個圓形按鈕,通常放置在Kivy螢幕的右下角。它主要用於表示應用程式的主要操作,併為使用者提供了一種快速簡便的方法來執行該特定操作。浮動操作按鈕(FAB)是現代移動應用程式中重要的UI(使用者介面)元素,廣泛應用於Google地圖、WhatsApp和Gmail等應用程式。

如何在Kivy中建立動畫浮動操作按鈕?

要在Kivy中建立動畫浮動操作按鈕,我們將使用Kivy動畫API和Kivy小部件的組合。動畫API允許我們透過隨時間推移更改其屬性來動畫化任何Kivy小部件。我們將使用動畫API為浮動操作按鈕建立一個簡單的動畫,使其在螢幕上上下浮動。以下是建立動畫浮動操作按鈕的步驟:

步驟1

建立虛擬環境 - 你可以將虛擬環境命名為你想要的任何名稱,在本文中,我們將將其命名為kivy_venv。

步驟2

安裝kivy和kivy_garden - 在我們開始在Kivy中製作動畫浮動操作按鈕之前,我們需要安裝所需的庫。我們可以使用pip安裝Kivy和其他依賴項。

步驟3

在任何你喜歡的文字編輯器中建立一個新檔案,我們使用了Sublime文字編輯器,並將檔案另存為main.py到當前目錄。匯入重要的模組。以下是一些我們將匯入到程式中的模組:

步驟4

建立浮動操作按鈕 - 下一步是建立一個浮動操作按鈕。我們將使用Kivy中的Button小部件來建立浮動操作按鈕。為了使其成為圓形,我們將Button小部件的shape屬性設定為“oval”。

步驟5

建立動畫 - 建立浮動操作按鈕後,下一步是建立動畫。我們將使用Kivy中的動畫API為FAB建立一個簡單的動畫。

步驟6

將浮動操作按鈕新增到螢幕 - 最後一步是將浮動操作按鈕新增到螢幕。我們將使用Kivy中的BoxLayout小部件建立一個簡單的佈局並將浮動操作按鈕新增到其中。

程式 (檔案: main.py)

以下是Kivy中建立動畫操作按鈕的程式:

from kivy.app import App
from kivy.uix.button import Button
from kivy.animation import Animation
from kivy.uix.boxlayout import BoxLayout

# Creating the Floating action button
class MyFloatingActionButton(Button):
   def __init__(self, **kwargs):
      super().__init__(**kwargs)
      self.size_hint = (None, None)
      self.size = (56, 56)
      self.pos_hint = {'center_x': 0.5, 'y': 0}
      self.shape = 'oval'
      self.animate()

#Creating the animation
   def animate(self):
      animation = Animation(y=100, t='out_quad') + Animation(y=0, t='in_quad')
      animation.repeat = True
      animation.start(self)

# Adding a Floating action button to the screen
class MyApp(App):
   def build(self):
      layout = BoxLayout()
      fab = MyFloatingActionButton(text='floating_button')
      layout.add_widget(fab)
      return layout

MyApp().run()

在上面的程式中,我們首先定義了一個自定義類MyFloatingActionButton,它擴充套件了Kivy中的Button小部件。該類的__init__方法設定了浮動操作按鈕的大小、形狀和位置,並呼叫animate方法來啟動動畫。

animate方法建立一個動畫物件,使用“out_quad”和“in_quad”緩動函式在螢幕上上下移動浮動操作按鈕。它將動畫的repeat屬性設定為True,使其無限重複,並在浮動動畫按鈕小部件上啟動動畫。

最後,我們透過在Animation物件上呼叫start()方法並將浮動操作按鈕作為引數傳遞來啟動動畫。

MyApp類定義了主應用程式並建立了MyFloatingActionButton類的新例項。它將浮動操作按鈕小部件新增到BoxLayout中,並將佈局作為應用程式的根小部件返回。

執行程式時,它將建立一個新的Kivy應用程式並在螢幕上顯示動畫浮動操作按鈕。浮動動畫按鈕將持續上下浮動,直到應用程式關閉。

輸出

開啟命令提示符並在命令提示符中鍵入以下程式碼:

python main.py

在命令提示符中鍵入上述程式碼後,按Enter鍵,它將給出以下輸出。

結論

總而言之,Kivy中的動畫浮動操作按鈕是使用Python建立互動式和視覺上吸引人的使用者介面的強大工具。動畫的使用為使用者介面增加了一層複雜性,並增強了整體使用者體驗。我們利用動畫浮動操作按鈕和其他UI元素,建立了一個引人入勝且直觀的應用程式,滿足了使用者的需求。

更新於:2023年5月31日

瀏覽量:387

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.