I'm making my own app but when I came to make the animation I didn't know how to make auto animation.
Animation: These animation that I should make it is four dots moving up and downward.
Description of the page:
It's a welcome page contains app logo and two texts. Then, under the two texts there are the dots animation.
First text: Welcome to our app Second text: Please Wait
I try the Docs of flet framework, YouTube videos, and the Ai. I'm expecting that I will found the solution(code) of these problem by your helps.
Answer
import flet as ft
import asyncio
async def main(page: ft.Page):
page.title = "Welcome Page"
page.bgcolor = ft.colors.WHITE
page.horizontal_alignment = "center"
page.vertical_alignment = "center"
# Welcome and Please Wait texts
welcome_text = ft.Text("Welcome to our app", size=30, weight="bold")
please_wait_text = ft.Text("Please Wait", size=20)
# Four dots as CircleAvatars
dots = [ft.Container(
width=15, height=15,
border_radius=7.5,
bgcolor=ft.colors.BLACK,
animate_offset=300 # ms for smooth offset animation
) for _ in range(4)]
# Put dots in a row
dot_row = ft.Row(dots, alignment="center", spacing=10)
# Add elements to the page
page.add(welcome_text, please_wait_text, dot_row)
# Animation logic
offset_values = [0, -10, 0, 10] # Movement values for bouncing
index = 0
while True:
for i, dot in enumerate(dots):
dot.offset = ft.Offset(0, offset_values[(index + i) % len(offset_values)] / 30) # /30 to scale down
await page.update_async()
await asyncio.sleep(0.2) # Adjust speed as needed
index = (index + 1) % len(offset_values)
ft.app(target=main)