flet-dev / examples

Flet sample applications
MIT License
423 stars 172 forks source link

Animate button sides with scale #47

Closed TingTingin closed 1 year ago

TingTingin commented 1 year ago

I am attempting to the scale of some buttons when I do the buttons scale from the center "anchor point"

Is it possible to have buttons scale from a different "anchor point" i.e have the left side of the button stay put as the left and top side scale up

FeodorFitsner commented 1 year ago

Yes, you can set alignment for scale transform (which is center by default):

2022-11-27_20h27_05

import flet as ft

def main(page: ft.Page):

    c = ft.Container(
        width=100,
        height=100,
        bgcolor="blue",
        border_radius=5,
        scale=ft.transform.Scale(scale=0.5, alignment=ft.alignment.top_left),
        animate_scale=ft.animation.Animation(600, ft.AnimationCurve.BOUNCE_OUT),
    )

    def animate(e):
        c.scale = ft.transform.Scale(scale=2, alignment=ft.alignment.top_left)
        page.update()

    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
    page.spacing = 30
    page.add(
        c,
        ft.ElevatedButton("Animate!", on_click=animate),
    )

ft.app(target=main)
TingTingin commented 1 year ago

Thanks alot!