使用Flet框架自主创新实现复杂动画贝塞尔曲线路径动画自定义模板：点击添加商品按钮后商品沿着贝塞尔曲线缓缓飞入购物车动画示例源代码IDE运行和调试通过

[传奇开心果编程]

一、示例源代码

import flet as ft
import asyncio

def main(page: ft.Page):
    # 初始购物车图标（彩色）
    cart_icon_colored = ft.Icon(name=ft.icons.SHOPPING_CART, size=40, color=ft.colors.AMBER)
    # 商品图标（彩色）
    product_icon_colored = ft.Icon(name=ft.icons.SHOPPING_BAG, size=40, color=ft.colors.PINK)

    # 创建购物车容器
    cart_container = ft.Container(
        content=cart_icon_colored,
        width=50,
        height=50,
        alignment=ft.alignment.center,
        left=20,
        top=300,  # 购物车位置不变
    )

    # 创建商品容器
    product_container = ft.Container(
        content=product_icon_colored,
        width=50,
        height=50,
        alignment=ft.alignment.center,
        left=150,
        top=50,
    )

    # 贝塞尔曲线函数
    def bezier_curve(t, p0, p1, p2):
        return (1 - t)**2 * p0 + 2 * (1 - t) * t * p1 + t**2 * p2

    # 动画函数
    async def animate_product(e):
        duration = 3  # 动画持续时间（秒）
        steps = 100  # 动画步数
        trail_points = []
        for i in range(steps + 1):
            t = i / steps
            x = bezier_curve(t, 150, 200, 20)
            y = bezier_curve(t, 50, 200, 300)
            trail_points.append((x, y))
        for i in range(steps +1):
            t = i / steps
            x = trail_points[i][0]
            y = trail_points[i][1]
            product_container.left = x
            product_container.top = y
            if i == steps:  # 当商品到达购物车时
                product_container.content.size = 25  # 变小到25像素
                product_container.top = cart_container.top - 10 # 向上移动3像素
            page.update()
            await asyncio.sleep(duration / steps)
        # 更改购物车图标为彩色图标
        cart_container.content = ft.Icon(name=ft.icons.SHOPPING_CART_OUTLINED, size=40, color=ft.colors.GREEN)
        cart_container.update()

    # 添加到页面
    page.add(
        ft.Stack(
            [product_container, cart_container],
            width=400,
            height=400,
        ),
        ft.ElevatedButton("添加商品到购物车", on_click=animate_product),  # 按钮文本为中文
    )

ft.app(target=main)

二、优点解释说明

这个示例代码是一个使用 Flet 框架创建的复杂动画，展示了一个商品图标沿着贝塞尔曲线飞入购物车图标的特技动画效果。以下是这个示例的优点：

1. 直观的动画效果：通过贝塞尔曲线函数创建平滑的动画轨迹，使商品图标沿着预定路径移动，增加了用户界面的互动性和视觉吸引力。

2. 动态图标变化：商品图标在飞入购物车后大小发生变化，模拟了商品被添加到购物车中的效果，增强了用户体验。

3. 响应式设计：使用 Flet 框架的异步函数animate_product，确保动画流畅，提高了应用的响应性。

4. 可定制性：通过调整贝塞尔曲线的控制点和动画参数，可以轻松定制动画效果，提供了高度的可定制性。

5. 易于实现：使用 Flet 框架的简洁的 API，使得动画的实现变得简单，降低了开发难度。

6. 跨平台：Flet 框架支持跨平台运行，可以在不同平台上运行，增加了应用的可用性。

7. 代码清晰：代码结构清晰，逻辑简单，易于理解和维护。

8. 实时更新：动画过程中，页面实时更新，确保动画效果的连续和流畅。

9. 用户交互：通过按钮触发动画，提供了用户与应用的交互。

10. 视觉反馈：动画提供了即时的视觉反馈，增强了用户体验。