Kivy中实现Label沿Bezier曲线路径动画的问题求助

原代码的错误点 #

• Label控件没有points属性，直接给它动画这个属性完全无效，Kivy动画只能作用于控件已存在的可动画属性（比如pos、x、y这类）。
• 把Bezier的控制点列表当成动画目标是概念错误：Bezier的points是控制点集合，不是路径上的连续坐标，动画需要的是路径上每个时刻的具体位置，而非这些控制点。

修正方案 #

我们可以自定义一个progress属性，用动画驱动这个属性从0到1变化，然后在属性变化时调用Bezier的get_point()方法计算Label当前的位置，从而实现沿路径移动的效果。

修正后的完整代码：

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.widget import Widget
from kivy.graphics import Color, Bezier
from kivy.animation import Animation
from kivy.properties import NumericProperty

class BezierLabel(Label):
    # 自定义进度属性，用于驱动动画
    progress = NumericProperty(0)

    def __init__(self, bezier_path, **kwargs):
        super().__init__(**kwargs)
        self.bezier = bezier_path

    def on_progress(self, instance, value):
        # 当progress变化时，计算当前Bezier路径上的位置
        x, y = self.bezier.get_point(value)
        # 设置Label的位置（减去自身一半尺寸让中心对齐路径）
        self.pos = (x - self.width/2, y - self.height/2)

class BezierPath(Widget):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        with self.canvas:
            Color(1, 0, 0)
            # Kivy的Bezier默认是三次贝塞尔，四个点分别为：起点、控制点1、控制点2、终点
            self.bezier = Bezier(points=[100, 100,  # 起点
                                     200, 300,  # 控制点1
                                     300, 100,  # 控制点2
                                     400, 400]) # 终点

class BezierLabelApp(App):
    def build(self):
        bezier_path = BezierPath()

        # 创建绑定了Bezier路径的Label
        label = BezierLabel(bezier_path.bezier, text="Follow me!", font_size=20)
        bezier_path.add_widget(label)

        # 动画驱动progress从0到1，持续5秒，循环播放
        animation = Animation(progress=1, duration=5)
        animation.repeat = True
        animation.start(label)

        return bezier_path

if __name__ == "__main__":
    BezierLabelApp().run()

代码说明 #

1. 自定义BezierLabel类，添加progress数值属性，用于接收动画的进度值（0对应路径起点，1对应路径终点）。
2. 实现on_progress回调方法，当progress变化时，调用Bezier的get_point(value)获取当前路径位置，调整Label的pos让其中心对齐路径，避免偏移。
3. 动画目标改为progress属性，通过0到1的变化覆盖Bezier路径的完整轨迹。
4. 修正了原Bezier点的注释，明确三次贝塞尔曲线的点顺序，避免概念混淆。

内容的提问来源于stack exchange，提问作者Timson