主题
AnimationCurve 继承自：Enum
动画曲线。
示例
python
import asyncio
import flet as ft
def main(page: ft.Page):
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
duration_ms = 1200
track_width = 248
racer_size = 26
lane_padding = 10
lane_inner_width = track_width
lane_width = lane_inner_width + lane_padding * 2
travel_units = (lane_inner_width - racer_size) / racer_size
card_animations: list = []
def showcase_card(curve: ft.AnimationCurve) -> ft.Container:
state = {"forward": False}
progress = ft.Container(
width=0,
height=6,
border_radius=3,
bgcolor=ft.Colors.PRIMARY_CONTAINER,
animate=ft.Animation(duration_ms, curve=curve),
)
racer = ft.Container(
width=racer_size,
height=racer_size,
border_radius=13,
bgcolor=ft.Colors.PRIMARY,
shadow=ft.BoxShadow(
blur_radius=12, spread_radius=1, color=ft.Colors.PRIMARY
),
alignment=ft.Alignment.CENTER,
content=ft.Icon(ft.Icons.BOLT, size=14, color=ft.Colors.ON_PRIMARY),
offset=ft.Offset(0, 0),
rotate=0,
scale=1,
animate_offset=ft.Animation(duration_ms, curve=curve),
animate_rotation=ft.Animation(duration_ms, curve=curve),
animate_scale=ft.Animation(duration_ms, curve=curve),
)
status = ft.Text("idle", size=11, color=ft.Colors.ON_SURFACE_VARIANT)
def animate(forward: bool):
state["forward"] = forward
racer.offset = ft.Offset(travel_units if forward else 0, 0)
racer.rotate = 1 if forward else 0
racer.scale = 1.25 if forward else 1
progress.width = track_width if forward else 0
status.value = "forward" if forward else "reverse"
racer.update()
progress.update()
status.update()
def replay(e):
animate(not state["forward"])
card_animations.append(animate)
return ft.Container(
width=340,
padding=12,
border=ft.Border.all(1, ft.Colors.RED),
border_radius=10,
bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
content=ft.Column(
spacing=9,
controls=[
ft.Text(curve.name, weight=ft.FontWeight.BOLD),
ft.Container(
width=track_width,
height=6,
border_radius=3,
bgcolor=ft.Colors.SURFACE_CONTAINER_HIGH,
content=progress,
),
ft.Container(
width=lane_width,
height=48,
padding=lane_padding,
border=ft.Border.all(1, ft.Colors.OUTLINE),
border_radius=8,
clip_behavior=ft.ClipBehavior.HARD_EDGE,
bgcolor=ft.Colors.SURFACE,
content=ft.Stack(
controls=[
ft.Row(
spacing=0,
alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
controls=[
ft.Container(
width=4,
height=22,
bgcolor=ft.Colors.OUTLINE,
),
ft.Container(
width=4,
height=22,
bgcolor=ft.Colors.OUTLINE,
),
],
),
racer,
],
),
),
ft.Row(
alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
controls=[
status,
ft.Button("Replay", icon=ft.Icons.REPLAY, on_click=replay),
],
),
],
),
)
def play_all(e):
for animate in card_animations:
animate(True)
def reverse_all(e):
for animate in card_animations:
animate(False)
async def wave_all():
for animate in card_animations:
animate(True)
await asyncio.sleep(0.04)
page.appbar = ft.AppBar(title="AnimationCurve Showcase")
page.add(
ft.SafeArea(
content=ft.Column(
controls=[
ft.Text(
"Curve Lab: compare timing profiles across motion, "
"progress, and spin."
),
ft.Row(
wrap=True,
spacing=8,
alignment=ft.MainAxisAlignment.CENTER,
controls=[
ft.Button(
"Play all", icon=ft.Icons.PLAY_ARROW, on_click=play_all
),
ft.Button(
"Reverse all",
icon=ft.Icons.REPLAY,
on_click=reverse_all,
),
ft.Button(
"Wave", on_click=lambda e: page.run_task(wave_all)
),
],
),
ft.Row(
wrap=True,
spacing=12,
expand=True,
scroll=ft.ScrollMode.AUTO,
alignment=ft.MainAxisAlignment.CENTER,
controls=[showcase_card(curve) for curve in ft.AnimationCurve],
),
]
)
)
)
if __name__ == "__main__":
ft.run(main)值
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
BOUNCE_IN | — | 'bounceIn' | 以弹跳效果进入的缓动。 |
BOUNCE_IN_OUT | — | 'bounceInOut' | 在开始和结束处都产生弹跳的缓动。 |
BOUNCE_OUT | — | 'bounceOut' | 以弹跳效果退出的缓动。 |
DECELERATE | — | 'decelerate' | 起步很快，随后逐渐减速到终点。 |
EASE | — | 'ease' | 标准对称的 ease-in/ease-out 曲线。 |
EASE_IN | — | 'easeIn' | 缓慢起步并逐渐加速。 |
EASE_IN_BACK | — | 'easeInBack' | 带有轻微初始回缩过冲的 ease-in 曲线。 |
EASE_IN_CIRC | — | 'easeInCirc' | 圆形 ease-in 曲线。 |
EASE_IN_CUBIC | — | 'easeInCubic' | 三次 ease-in 曲线。 |
EASE_IN_EXPO | — | 'easeInExpo' | 指数 ease-in 曲线。 |
EASE_IN_OUT | — | 'easeInOut' | 对称的 ease-in/ease-out 曲线。 |
EASE_IN_OUT_BACK | — | 'easeInOutBack' | 在两端附近有过冲的 ease-in/ease-out 曲线。 |
EASE_IN_OUT_CIRC | — | 'easeInOutCirc' | 圆形 ease-in/ease-out 曲线。 |
EASE_IN_OUT_CUBIC | — | 'easeInOutCubic' | 三次 ease-in/ease-out 曲线。 |
EASE_IN_OUT_CUBIC_EMPHASIZED | — | 'easeInOutCubicEmphasized' | Material 3 强调型三次 ease-in/ease-out 曲线。 |
EASE_IN_OUT_EXPO | — | 'easeInOutExpo' | 指数 ease-in/ease-out 曲线。 |
EASE_IN_OUT_QUAD | — | 'easeInOutQuad' | 二次 ease-in/ease-out 曲线。 |
EASE_IN_OUT_QUART | — | 'easeInOutQuart' | 四次 ease-in/ease-out 曲线。 |
EASE_IN_OUT_QUINT | — | 'easeInOutQuint' | 五次 ease-in/ease-out 曲线。 |
EASE_IN_OUT_SINE | — | 'easeInOutSine' | 正弦 ease-in/ease-out 曲线。 |
EASE_IN_QUAD | — | 'easeInQuad' | 二次 ease-in 曲线。 |
EASE_IN_QUART | — | 'easeInQuart' | 四次 ease-in 曲线。 |
EASE_IN_QUINT | — | 'easeInQuint' | 五次 ease-in 曲线。 |
EASE_IN_SINE | — | 'easeInSine' | 正弦 ease-in 曲线。 |
EASE_IN_TO_LINEAR | — | 'easeInToLinear' | 从 ease-in 运动过渡到匀速运动。 |
EASE_OUT | — | 'easeOut' | 起步很快，并在终点处减速。 |
EASE_OUT_BACK | — | 'easeOutBack' | 末尾带有过冲的 ease-out 曲线。 |
EASE_OUT_CIRC | — | 'easeOutCirc' | 圆形 ease-out 曲线。 |
EASE_OUT_CUBIC | — | 'easeOutCubic' | 三次 ease-out 曲线。 |
EASE_OUT_EXPO | — | 'easeOutExpo' | 指数 ease-out 曲线。 |
EASE_OUT_QUAD | — | 'easeOutQuad' | 二次 ease-out 曲线。 |
EASE_OUT_QUART | — | 'easeOutQuart' | 四次 ease-out 曲线。 |
EASE_OUT_QUINT | — | 'easeOutQuint' | 五次 ease-out 曲线。 |
EASE_OUT_SINE | — | 'easeOutSine' | 正弦 ease-out 曲线。 |
ELASTIC_IN | — | 'elasticIn' | 弹性弹簧式的 ease-in 曲线。 |
ELASTIC_IN_OUT | — | 'elasticInOut' | 弹性弹簧式的 ease-in/ease-out 曲线。 |
ELASTIC_OUT | — | 'elasticOut' | 弹性弹簧式的 ease-out 曲线。 |
FAST_LINEAR_TO_SLOW_EASE_IN | — | 'fastLinearToSlowEaseIn' | 以匀速起步，随后缓入到较慢的终点。 |
FAST_OUT_SLOWIN | — | 'fastOutSlowIn' | Material 运动曲线：起步很快，收尾柔和。 |
LINEAR | — | 'linear' | 无缓动的匀速运动。 |
LINEAR_TO_EASE_OUT | — | 'linearToEaseOut' | 以匀速起步，并过渡到 ease-out 收尾。 |
SLOW_MIDDLE | — | 'slowMiddle' | 在动画中间阶段放慢。 |
