KivyMD加载界面Rotate动画失效问题求助

问题根源 #

1. 未使用Kivy属性系统：LoadingWindow中的angle是普通变量，不是NumericProperty，Kivy无法感知其变化，导致旋转动画无法触发界面刷新。
2. 旋转目标错误：KV文件中Rotate指令被添加在空的MDGridLayout画布上，而非实际需要旋转的加载方块网格（id:loading），旋转效果不可见。
3. 动画目标不匹配：代码中尝试动画loading控件的angle，但KV里的旋转并未绑定该属性。

修复步骤 #

1. 修改Python代码（test.py）

将LoadingWindow的angle改为NumericProperty，确保Kivy能监听属性变化并更新界面：

from platform import platform

from kivy.animation import Animation
from kivy.core.window import Window
from kivy.lang import Builder
from kivy.properties import NumericProperty
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.app import MDApp

Builder.load_file("test.kv")

class WindowManager(ScreenManager):
    pass


class LoadingWindow(Screen):
    # 将普通变量改为NumericProperty，初始值45
    angle = NumericProperty(45)

    def __init__(self, **kwargs):
        super(LoadingWindow, self).__init__(**kwargs)

    def loading(self, *kwargs):
        load_grid = self.ids.loading
        # 动画缩放属性
        anim = Animation(height=80, width=80, spacing=[10, 10], duration=0.5)
        anim += Animation(height=60, width=60, spacing=[5, 5], duration=0.5)
        # 动画旋转角度（绑定到LoadingWindow的angle属性）
        anim += Animation(angle=self.angle, duration=0.5)
        self.angle += 45  # 每次完成后角度增加45度
        anim.bind(on_complete=self.loading)
        anim.start(load_grid)


class MyMainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        self.theme_cls.primary_palette = "Orange"
        self.theme_cls.primary_hue = "800"
        self.theme_cls.secondary_palette = "Grey"

        if platform == 'android' or platform == 'ios':
            Window.maximize()
        else:
            Window.size = (620, 1024)
        return WindowManager()


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

2. 修改KV文件（test.kv）

将Rotate指令移到实际需要旋转的loading网格的画布中，并绑定到root.angle，删除无用的空MDGridLayout：

<WindowManager>:
    LoadingWindow:

<LoadingWindow>
    name : "loadingwindow"
    MDFloatLayout:
        md_bg_color : 0,0,0,0
        MDGridLayout:
            id:loading
            rows:2
            cols:2
            size_hint: None,None
            height:60
            width:60
            pos_hint:{"center_x":.5,"center_y":.5}
            spacing:5
            # 添加旋转画布指令，绑定到root的angle属性
            canvas.before:
                PushMatrix
                Rotate:
                    angle : root.angle
                    origin: self.center  # 以网格自身中心为旋转原点
            canvas.after:
                PopMatrix
            
            MDFloatLayout:
                md_bg_color:rgba(242,80,34,255)
            MDFloatLayout:
                md_bg_color:rgba(242,80,34,255)
            MDFloatLayout:
                md_bg_color:rgba(242,80,34,255)
            MDFloatLayout:
                md_bg_color:rgba(242,80,34,255)
    MDRectangleFlatButton :
        id : load_button
        text : "Proceed"
        pos_hint : {"center_x" : 0.5 , "center_y" : 0.25}
        on_release :
            root.loading()

关键说明 #

• NumericProperty：Kivy的属性系统会在属性值变化时自动触发界面刷新，这是旋转动画生效的核心。
• 旋转目标修正：Rotate指令直接作用于加载方块所在的网格，旋转原点设为网格自身中心，动画效果正确显示。
• 动画逻辑调整：动画同时控制网格的缩放和角度变化，每次完成后角度累加45度，形成循环旋转+缩放的加载效果。

内容的提问来源于stack exchange，提问作者アフィク