SpiderBasic

- a basic to master the web -
https://forums.spiderbasic.com/

Toast animation

https://forums.spiderbasic.com/viewtopic.php?t=2382

Page 1 of 1

Toast animation

Posted: Thu Apr 20, 2023 11:33 am
by Dirk Geppert
Hi guys, I am currently working on a toast that is to be pushed into view from the bottom edge and then pushes itself out of view again after 5 seconds.

My problem is the fly-in and fly-out animation - its to fast. So my question is: how to smooth animate a window?

Code: Select all

#tWnd = 0
Define w, h

Procedure Close_Toast()
  Protected n, w, h, y
  
  If IsWindow(#tWnd)
    
    ExamineDesktops()
    w = DesktopWidth(0)
    h = DesktopHeight(0)
    
    UnbindEvent(#PB_Event_Timer, @Close_Toast(), #tWnd)
    RemoveWindowTimer(#tWnd, #tWnd)
    
    y = WindowY(#tWnd)
    For n = y To h
      ResizeWindow(#tWnd, #PB_Ignore, n, #PB_Ignore, #PB_Ignore)
    Next
    CloseWindow(#tWnd)
  EndIf
EndProcedure

Procedure Show_Toast()
  Protected w, h, y, n
  
  ExamineDesktops()
  w = DesktopWidth(0)
  h = DesktopHeight(0)
  
  If IsWindow(#tWnd) = 0
    OpenWindow(#tWnd, w/4, h + 200, w/2, 200, "Toast", #PB_Window_TitleBar)
    TextGadget(0, 0, 0, WindowWidth(#tWnd), WindowHeight(#tWnd), "<p>Some importend text here</p>")
    
    BindEvent(#PB_Event_Timer, @Close_Toast(), #tWnd)
    AddWindowTimer(#tWnd, #tWnd, 5000)
    
    y = h - WindowHeight(#tWnd) - 50
    
    For n = h To y Step -1
      ResizeWindow(#tWnd, #PB_Ignore, n, #PB_Ignore, #PB_Ignore)
    Next
    
  EndIf
EndProcedure

Show_Toast()

Re: Toast animation

Posted: Thu Apr 20, 2023 1:40 pm
by Kurzer
Hi Dirk,

the best way to do this is to use a finely resolved timer as a kind of timeline counter (in my exmple a timer with 10 ms).
At certain points of the timeline the actions fade in, stop animation and fade out are executed.
Together with a SIN() function, the window can also be faded in and out smoothly.

Code: Select all

#tWnd = 0

Global dw, dh, th, timecounter, offset, twait

Declare AnimTimer()
Declare Close_Toast()
Declare Show_Toast()


ExamineDesktops()
dw = DesktopWidth(0)
dh = DesktopHeight(0)
th = 200
twait = 2 * 100 ; Show the toast for 2 seconds
offset = 0
timecounter = 0

Procedure AnimTimer()
	If EventTimer() = 0
		timecounter + 1
		Debug timecounter
		If timecounter <= 90
			; In-animation
			ResizeWindow(#tWnd, #PB_Ignore, dh - Sin(Radian(offset)) * th, #PB_Ignore, #PB_Ignore)
			offset + 1	
		ElseIf timecounter > 90 And timecounter <= 90 + twait
			; Show the toast for 'twait' ticks
		ElseIf timecounter > 90 + twait And timecounter <= 180 + twait
			; Out-animation
			ResizeWindow(#tWnd, #PB_Ignore, dh - Sin(Radian(offset)) * th, #PB_Ignore, #PB_Ignore)
			offset + 1
		ElseIf timecounter > 180 + twait
			; Close the toast window and remove the timer
			offset = 0
			timecounter = 0
			UnbindEvent(#PB_Event_Timer, @AnimTimer(), #tWnd)
			RemoveWindowTimer(#tWnd, 0)
			Close_Toast()
			Debug "Window closed"
		EndIf
	EndIf
EndProcedure

Procedure Close_Toast()
	
	If IsWindow(#tWnd)
		CloseWindow(#tWnd)
	EndIf
EndProcedure

Procedure Show_Toast()
	
	If IsWindow(#tWnd) = 0
		OpenWindow(#tWnd, dw/4, dh, dw/2, th, "Toast", #PB_Window_TitleBar)
		TextGadget(0, 0, 0, WindowWidth(#tWnd), WindowHeight(#tWnd), "<p>Some importend text here</p>")
		
		BindEvent(#PB_Event_Timer, @AnimTimer(), #tWnd)
		AddWindowTimer(#tWnd, 0, 10)
	EndIf
EndProcedure

Show_Toast()

Re: Toast animation

Posted: Fri Apr 21, 2023 2:05 am
by Paul
Maybe javascript?

Code: Select all

Declare Toast()
Declare ToastOut()
#tWnd=0

Procedure jsToast_In(Window)  
  ExamineDesktops()
  Protected wid=WindowID(Window) 
  Protected windowheight=DesktopHeight(0)-WindowHeight(Window) 
  ! $(v_wid.element).animate({
  !   top: v_windowheight 
  ! });  
EndProcedure

Procedure jsToast_Out(Window) 
  ExamineDesktops() 
  Protected wid=WindowID(Window) 
  Protected windowheight=DesktopHeight(0) 
  ! $(v_wid.element).animate({
  !   top: v_windowheight
  ! });  
EndProcedure

Procedure ToastOut()
  jsToast_Out(#tWnd)
  UnbindEvent(#PB_Event_Timer,@ToastOut(),#tWnd)
  RemoveWindowTimer(#tWnd,0)  
  ;remove the next 2 lines to stop this demo from repeating
  AddWindowTimer(#tWnd,0,3000)
  BindEvent(#PB_Event_Timer,@Toast(),#tWnd)
EndProcedure

Procedure Toast()
  jsToast_In(#tWnd)
  UnbindEvent(#PB_Event_Timer,@Toast(),#tWnd)
  RemoveWindowTimer(#tWnd,0)
  AddWindowTimer(#tWnd,0,4000)
  BindEvent(#PB_Event_Timer,@ToastOut(),#tWnd)
EndProcedure



ExamineDesktops()
w=DesktopWidth(0)
h=DesktopHeight(0)
OpenWindow(#tWnd, w/4, h + 200, w/2, 200, "Toast", #PB_Window_TitleBar)
TextGadget(0, 0, 0, WindowWidth(#tWnd), WindowHeight(#tWnd), "<p>Some importend text here</p>")


AddWindowTimer(#tWnd,0,2000)
BindEvent(#PB_Event_Timer,@Toast(),#tWnd)
(based on some code I saw a few years back by Peter)

Re: Toast animation

Posted: Fri Apr 21, 2023 7:11 am
by Dirk Geppert
Thank you Paul. Now it looks exactly as I wanted :D

Re: Toast animation

Posted: Wed Apr 26, 2023 9:26 am
by Dirk Geppert
Hi guys, I have another question about animation. Is it possible to define a callback that is triggered after the animation is completed?
I need the information when the animation is finished.

kind regards

Dirk

Re: Toast animation

Posted: Wed Apr 26, 2023 10:32 am
by Peter
Here is Paul's code with the callback extension:

Code: Select all

Declare Toast()
Declare ToastOut()
Declare ToastInCallback()
Declare ToastOutCallback()

#tWnd=0

Procedure jsToast_In(Window, Callback)  
  ExamineDesktops()
  Protected wid=WindowID(Window) 
  Protected windowheight=DesktopHeight(0)-WindowHeight(Window) 
  ! $(v_wid.element).animate({
  !   top: v_windowheight 
  ! }, 500, function() { v_callback() } );  
EndProcedure

Procedure jsToast_Out(Window, Callback) 
  ExamineDesktops() 
  Protected wid=WindowID(Window) 
  Protected windowheight=DesktopHeight(0) 
  ! $(v_wid.element).animate({
  !   top: v_windowheight
  ! }, 500, function() { v_callback() } );  
EndProcedure

Procedure ToastOut()
  jsToast_Out(#tWnd, @ToastOutCallback())
  UnbindEvent(#PB_Event_Timer,@ToastOut(),#tWnd)
  RemoveWindowTimer(#tWnd,0)  
  ;remove the next 2 lines to stop this demo from repeating
  AddWindowTimer(#tWnd,0,3000)
  BindEvent(#PB_Event_Timer,@Toast(),#tWnd)
EndProcedure

Procedure Toast()
  jsToast_In(#tWnd, @ToastInCallback())
  UnbindEvent(#PB_Event_Timer,@Toast(),#tWnd)
  RemoveWindowTimer(#tWnd,0)
  AddWindowTimer(#tWnd,0,4000)
  BindEvent(#PB_Event_Timer,@ToastOut(),#tWnd)
EndProcedure

Procedure ToastInCallback()
  Debug "ToastInCallback() triggered"
EndProcedure

Procedure ToastOutCallback()
  Debug "ToastOutCallback() triggered"
EndProcedure

ExamineDesktops()
w=DesktopWidth(0)
h=DesktopHeight(0)
OpenWindow(#tWnd, w/4, h + 200, w/2, 200, "Toast", #PB_Window_TitleBar)
TextGadget(0, 0, 0, WindowWidth(#tWnd), WindowHeight(#tWnd), "<p>Some importend text here</p>")


AddWindowTimer(#tWnd,0,2000)
BindEvent(#PB_Event_Timer,@Toast(),#tWnd)

Re: Toast animation

Posted: Wed Apr 26, 2023 10:57 am
by Dirk Geppert
Great!!! :D Thank you very much Peter!
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited