[Question] how to use Animation end callback?

[jjjunehkim]

Question

I want to repeat the animation action of moving the text inside a container from the rightmost side of the container to the left side of the container.
The document on the homepage(flet.dev) explains as follows:
I don't understand how to use "on_animation_end event handler"
How should I use the "on_animation_end event handler" to execute the animation action repeatedly?

All controls with animate_* properties have on_animation_end event handler which is called when animation complete and can be used to chain multiple animations.

Event's object data field contains the name of animation:

opacity
rotation
scale
offset
position
container

For example:

c = ft.Container(
ft.Text("Animate me!"),
# ...
animate=ft.animation.Animation(1000, "bounceOut"),
on_animation_end=lambda e: print("Container animation end:", e.data)
)

Code sample

self.notice_text = ft.Text(value = "hello, this is for animate testing!!! hello",
                           text_align = "center",
                            size = self.height_value*0.08,
                            weight=ft.FontWeight.W_500,
                            color = ft.colors.WHITE,)
ft.Row(
     controls = [
         notice_text_container :=ft.Container(
         offset=ft.transform.Offset(0.75, 0),
         animate_offset=ft.animation.Animation(duration=18000), 
         on_animation_end = lambda e: animate_repeat(self, e.data),
         content =  self.notice_text
)

def animate_repeat(self, e):
    time.sleep(0.5)  
    if e=="offset":
       notice_text_container.offset = ft.transform.Offset(0.75, 0)
       notice_text_container.animate_offset = ft.animation.Animation(15000)
       notice_move_thread_2 = threading.Thread(target=animate_container, args=(self,))
       notice_move_thread_2.daemon = True
       notice_move_thread_2.start()  
     

def animate_container(self):
    time.sleep(0.5)  
    notice_text_container.offset = ft.transform.Offset(-1, 0)
    self.update()

notice_move_thread = threading.Thread(target=animate_container, args=(self,))
notice_move_thread.daemon = True
notice_move_thread.start()

Error message

Animation actions do not repeat

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

If you want someone to try your code and eventually help, then please share a runnable code repro.

[jjjunehkim]

oh. I see.
There was no detailed explanation on how to use the "on_animation_end event handler" in the document on the homepage (flet.dev), so I only uploaded a partial code while asking how to operate it repeatedly.
I am uploading the executable code once again, so please check and help.

((code))
import flet as ft
import time
import threading

class Ui(ft.UserControl):
def init(self, page, window_width, window_height):
super().init(expand = True)
self.page = page
self.border_red = ft.border.all(0.5, "red")
self.border_blue = ft.border.all(0.5, "blue")
self.width_value = window_width
self.height_value = window_height
self.color_value = ft.colors.WHITE
self.color_value_1 = ft.colors.TEAL
self.color_value_2 = ft.colors.GREY_100
self.color_value_3 = ft.colors.BLACK87
self.notice_text = ft.Text(value = "Now, I'm testing about animation.... it works........",
text_align = "center",
size = self.height_value*0.08,
weight=ft.FontWeight.W_500,
color = ft.colors.WHITE,
)

    self.left_sub_container= ft.Container(
                                alignment = ft.alignment.center,  # ft.alignment.top_center,
                                # expand = True,
                                border = self.border_red,

                                width = (self.width_value - self.height_value*0.015*3)*0.75,
                                # height = self.height_value,
                                content = ft.Column(
                                    expand = True,
                                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                                    controls=[
                                        ft.Container(
                                            alignment = ft.alignment.center,  
                                            # expand = True,
                                            border_radius=10,
                                            border = self.border_blue,
                                            height= (self.height_value - self.height_value*0.015*3)*0.85,
                                            bgcolor = self.color_value_2,
                                            content = ft.Text(
                                                "Container 1"
                                            )
                                        ),
                                        ft.Container(
                                            alignment = ft.alignment.center,  # ft.alignment.top_center,
                                            margin = ft.margin.only(self.width_value*0.005, self.height_value*0, self.width_value*0.005, self.height_value*0),
                                            border_radius=10,
                                            border = self.border_blue,
                                            height= (self.height_value - self.height_value*0.015*3)*0.15,
                                            bgcolor = self.color_value_3,
                                            content = ft.Row(
                                                controls = [
                                                    notice_text_container :=ft.Container(
                                                                                offset=ft.transform.Offset(0.75, 0),
                                                                                animate_offset=ft.animation.Animation(duration=18000),
                                                                                on_animation_end = lambda e: animate_repeat(self, e.data),
                                                                                # on_animation_end = lambda e: print("Container animation end:", e.data),
                                                                                content =  self.notice_text
                                                    )
                                                ]
                                            )
                                        )
                                    ]
                                ),
    )

    self.right_sub_container = ft.Container(
                                alignment = ft.alignment.center,  
                                border = self.border_red,
                                width = (self.width_value - self.height_value*0.015*3)*0.25,
                                content = ft.Column(
                                    expand = True,
                                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                                    controls=[
                                        ft.Container(
                                            alignment = ft.alignment.center, 
                                            border = self.border_blue,
                                            height= (self.height_value - self.height_value*0.015*3)*0.25,
                                            bgcolor = self.color_value,
                                            content = ft.Column(
                                                alignment=ft.MainAxisAlignment.CENTER,
                                                controls = [
                                                    ft.Text(value = "Container_2",
                                                                    text_align = "center",
                                                                    size = self.height_value*0.04,
                                                                    weight=ft.FontWeight.W_500,
                                                                    )
                                                ]
                                            ),
                                        ),
                                        ft.Container(
                                            alignment = ft.alignment.center,  
                                            expand = True,
                                            border_radius=10,
                                            border = self.border_blue,
                                            height= (self.height_value - self.height_value*0.015*3)*0.75,
                                            bgcolor = self.color_value_2,
                                            content = ft.Column(
                                                controls = [
                                                    ft.Container(
                                                        border = self.border_red,
                                                        content = ft.Row(
                                                            alignment = ft.alignment.center,
                                                            controls = [
                                                                ft.Text(
                                                                    value = "Container_3"),
                                                            ],
                                                        )
                                                    ),
                                                ]
                                            )
                                        )
                                    ]
                                )
    ) 



    def animate_repeat(self, e):

        print(e)
        time.sleep(0.5) 
        if e=="offset":
            notice_text_container.offset = ft.transform.Offset(0.75, 0)
            notice_text_container.animate_offset = ft.animation.Animation(15000)
            notice_move_thread_2 = threading.Thread(target=animate_container, args=(self,))
            notice_move_thread_2.daemon = True
            notice_move_thread_2.start()  

    def animate_container(self):
        time.sleep(0.5)  
        notice_text_container.offset = ft.transform.Offset(-1, 0)
        self.update()
    
    notice_move_thread = threading.Thread(target=animate_container, args=(self,))
    notice_move_thread.daemon = True
    notice_move_thread.start()            

    self.main_container = ft.Container(
                            alignment = ft.alignment.center, 

                            padding =ft.padding.only(self.height_value*0.015, self.height_value*0.015, self.height_value*0.015, self.height_value*0.015),
                            bgcolor= self.color_value,

                            content = ft.Row(
                                alignment = ft.MainAxisAlignment.SPACE_BETWEEN,
                                controls=[
                                    self.left_sub_container,
                                    self.right_sub_container,
                                ]
                            )
    )

def build(self):
    return self.main_container     

def main(page: ft.Page):

page.theme_mode = ft.ThemeMode.LIGHT 

page.window_width = 1920
page.window_height = 1080

window_width = page.window_width
window_height = page.window_height

page.window_full_screen = True  
page.window_resizable = False  

page.padding = 0

page.title = "animation test"

page.vertical_alignment = ft.MainAxisAlignment.CENTER
page.horizontal_alignment = ft.MainAxisAlignment.CENTER

page.add(Ui(page, window_width, window_height))

ft.app(target=main)

[jjjunehkim]

I found a solution. There was a part where I was mistaken, but I resolved it.

I modified the "def animate_repeat(self, e):" function part.
And then, I created another function and placed inside it a code that calls the function “def animate_container(self)” using “thread”.

Modified portion of the "def animate repeat(self, e)" function
->
def animate_repeat(self, e):
print(e)
time.sleep(0.5)
if e=="offset":
notice_text_container.animate_offset.duration=0
notice_text_container.offset = ft.transform.Offset(0.6, 0)
self.update()