flex动画小白也能看懂，Flet简明中文教程二十
flex动画小白也能看懂，Flet简明中文教程二十import flet from flet import Container ElevatedButton Page Stack def main(page: Page): c1 = Container(width=50 height=50 bgcolor="red" animate_position=1000) c2 = Container( width=50 height=50 bgcolor="green" top=60 left=0 animate_position=500 ) c3 = Container( width=50 height=50 bgcolor="blue" top=120 left=0 animate_posit
隐式动画隐式动画，是通过设置一个目标值来显示动态变化;每当目标值发生改变时，控件就会使属性从旧值变为新值。动画在给定的持续时间内生成新旧值之间的变化。默认情况下，动画是线性变换的，当然也可以应用曲线变化。例如，easeOutCubic曲线在动画开始时快速增加动画值，然后减速，直到达到目标值:
每个控件都提供animate_{something}属性，如下所述，以启用其外观的隐式动画:
- animate_opacity
- animate_rotation
- animate_scale
- animate_offset
- animate_position
- animate (Container)
animate_* properties 应设置以下值：
- animate.Animation类：允许设置动画的持续时间(以毫秒为单位)和曲线，例如animate_rotation=animation.Animation(duration=300 curve="bounceOut")，curve默认是线性的。
- int 值 ： 动画持续时间int毫秒，线性变化。
- bool 值：动画持续时间1000毫秒，线性变化。
设置控件的animate_opacity为True、number或一个Animation实例。
import flet
from flet import Container ElevatedButton Page
def main(page: Page):
c = Container(
width=150
height=150
bgcolor="blue"
border_radius=10
animate_opacity=300
)
def animate_opacity(e):
c.opacity = 0 if c.opacity == 1 else 1
c.update()
page.add(
c
ElevatedButton(
"Animate opacity"
on_click=animate_opacity
)
)
flet.app(target=main)animate_rotation 动画
设置控件的animate_rotation为True、number或一个Animation实例。
from math import pi
import flet
from flet import Container ElevatedButton Page alignment animation transform
def main(page: Page):
c = Container(
width=100
height=70
bgcolor="blue"
border_radius=5
rotate=transform.Rotate(0 alignment=alignment.center)
animate_rotation=animation.Animation(duration=300 curve="bounceOut")
)
def animate(e):
c.rotate.angle = pi / 2
page.update()
page.vertical_alignment = "center"
page.horizontal_alignment = "center"
page.spacing = 30
page.add(
c
ElevatedButton("Animate!" on_click=animate)
)
flet.app(target=main)animate_scale 动画
设置控件的animate_scale为True、number或一个Animation实例。
import flet
from flet import Container ElevatedButton Page animation
from flet.transform import Scale
def main(page: Page):
c = Container(
width=100
height=100
bgcolor="blue"
border_radius=5
scale=Scale(scale=1)
animate_scale=animation.Animation(600 "bounceOut")
)
def animate(e):
# c1.rotate = 1
c.scale = 2
page.update()
page.vertical_alignment = "center"
page.horizontal_alignment = "center"
page.spacing = 30
page.add(
c
ElevatedButton("Animate!" on_click=animate)
)
flet.app(target=main)animate_offset 动画
offset属性是transform.Offset的一个实例。偏移量类，指定按控件大小在水平x和垂直y的偏移量。例如，offset(-0.25 0)将使控件宽度的四分之一的水平左移。
import flet
from flet import Container ElevatedButton Page animation transform
def main(page: Page):
c = Container(
width=150
height=150
bgcolor="blue"
border_radius=10
offset=transform.Offset(-2 0)
animate_offset=animation.Animation(1000)
)
def animate(e):
c.offset = transform.Offset(0 0)
c.update()
page.add(
c
ElevatedButton("Reveal!" on_click=animate)
)
flet.app(target=main)animate_position 动画
控件的postion只在Stack控件中生效
import flet
from flet import Container ElevatedButton Page Stack
def main(page: Page):
c1 = Container(width=50 height=50 bgcolor="red" animate_position=1000)
c2 = Container(
width=50 height=50 bgcolor="green" top=60 left=0 animate_position=500
)
c3 = Container(
width=50 height=50 bgcolor="blue" top=120 left=0 animate_position=1000
)
def animate_container(e):
c1.top = 20
c1.left = 200
c2.top = 100
c2.left = 40
c3.top = 180
c3.left = 100
page.update()
page.add(
Stack([c1 c2 c3] height=250)
ElevatedButton("Animate!" on_click=animate_container)
)
flet.app(target=main)Animated container 动画
设置Container.animate为True 数值或一个Animation实例，支持容器属性的隐式动画，如属性size bgcolor border gradient的变化。
import flet
from flet import Container ElevatedButton Page animation
def main(page: Page):
c = Container(
width=150
height=150
bgcolor="red"
animate=animation.Animation(1000 "bounceOut")
)
def animate_container(e):
c.width = 100 if c.width == 150 else 150
c.height = 50 if c.height == 150 else 150
c.bgcolor = "blue" if c.bgcolor == "red" else "red"
c.update()
page.add(c ElevatedButton("Animate container" on_click=animate_container))
flet.app(target=main)AnimatedSwitcher 控件
AnimatedSwitcher是显示旧控件到新控件的动画控件。
import time
import flet
from flet import AnimatedSwitcher ElevatedButton Image Page
def main(page: Page):
i = Image(src="https://picsum.photos/150/150" width=150 height=150)
def animate(e):
sw.content = Image(
src=f"https://picsum.photos/150/150?{time.time()}" width=150 height=150
)
page.update()
sw = AnimatedSwitcher(
i
transition="scale"
duration=500
reverse_duration=500
switch_in_curve="bounceOut"
switch_out_curve="bounceIn"
)
page.add(
sw
ElevatedButton("Animate!" on_click=animate)
)
flet.app(target=main)AnimatedSwitcher 属性
duration
旧控件到新控件变化持续时间，默认1000毫秒
reverse_duration
新控件到旧控件变化持续时间，默认1000毫秒
switch_in_curve
转换新控件的变化曲线，默认线性
switch_out_curve
移除旧控件所使用的变化曲线，默认线性
transition
过度动画，支持fade (默认) rotation scale
Flet文字动画显示示例
import random
from math import pi
import flet
from flet import Container ElevatedButton Page Stack colors
def main(page: Page):
size = 40
gap = 6
duration = 2000
c1 = colors.PINK_500
c2 = colors.AMBER_500
c3 = colors.LIGHT_GREEN_500
c4 = colors.DEEP_PURPLE_500
all_colors = [
colors.AMBER_400
colors.AMBER_ACCENT_400
colors.BLUE_400
colors.BROWN_400
colors.CYAN_700
colors.DEEP_ORANGE_500
colors.CYAN_500
colors.INDIGO_600
colors.ORANGE_ACCENT_100
colors.PINK
colors.RED_600
colors.GREEN_400
colors.GREEN_ACCENT_200
colors.TEAL_ACCENT_200
colors.LIGHT_BLUE_500
]
parts = [
# F
(0 0 c1)
(0 1 c1)
(0 2 c1)
(0 3 c1)
(0 4 c1)
(1 0 c1)
(1 2 c1)
(2 0 c1)
# L
(4 0 c2)
(4 1 c2)
(4 2 c2)
(4 3 c2)
(4 4 c2)
(5 4 c2)
(6 4 c2)
# E
(8 0 c3)
(9 0 c3)
(10 0 c3)
(8 1 c3)
(8 2 c3)
(9 2 c3)
(10 2 c3)
(8 3 c3)
(8 4 c3)
(9 4 c3)
(10 4 c3)
# T
(12 0 c4)
(13 0 c4)
(14 0 c4)
(13 1 c4)
(13 2 c4)
(13 3 c4)
(13 4 c4)
]
width = 16 * (size gap)
height = 5 * (size gap)
canvas = Stack(
width=width
height=height
animate_scale=duration
animate_opacity=duration
)
# spread parts randomly
for i in range(len(parts)):
canvas.controls.append(
Container(
animate=duration
animate_position=duration
animate_rotation=duration
)
)
def randomize(e):
random.seed()
for i in range(len(parts)):
c = canvas.controls[i]
part_size = random.randrange(int(size / 2) int(size * 3))
c.left = random.randrange(0 width)
c.top = random.randrange(0 height)
c.bgcolor = all_colors[random.randrange(0 len(all_colors))]
c.width = part_size
c.height = part_size
c.border_radius = random.randrange(0 int(size / 2))
c.rotate = random.randrange(0 90) * 2 * pi / 360
canvas.scale = 5
canvas.opacity = 0.3
go_button.visible = True
again_button.visible = False
page.update()
def assemble(e):
i = 0
for left top bgcolor in parts:
c = canvas.controls[i]
c.left = left * (size gap)
c.top = top * (size gap)
c.bgcolor = bgcolor
c.width = size
c.height = size
c.border_radius = 5
c.rotate = 0
i = 1
canvas.scale = 1
canvas.opacity = 1
go_button.visible = False
again_button.visible = True
page.update()
go_button = ElevatedButton("Go!" on_click=assemble)
again_button = ElevatedButton("Again!" on_click=randomize)
randomize(None)
page.horizontal_alignment = "center"
page.vertical_alignment = "center"
page.spacing = 30
page.add(canvas go_button again_button)
flet.app(target=main)
