Transition_Ease - ProGUI Reference Manual

Syntax

Value.d = Transition_Ease(t.d, b.d, c.d, d.d)

Description

Calculates an intermediate value using a standard "ease" transition curve. This curve starts relatively fast, slows down significantly in the middle, and then finishes quickly. It's equivalent to a specific cubic-bezier(0.25, 0.1, 0.25, 1) curve.

Parameters

t.d
The current elapsed time of the animation in milliseconds.

b.d
The starting value of the property being animated.

c.d
The total change in value (target value - starting value).

d.d
The total duration of the animation in milliseconds.

Return Value

Returns the interpolated value (Double) at the current time `t` according to the "ease" curve.

Remarks

This is a predefined easing function based on the CSS `ease` timing function. It provides a common S-curve shape for transitions.

Example

IncludeFile "ProGUI_PB.pbi"

Structure MyAnimData
  TargetValue.d
  StartValue.d
  x.d
EndStructure

Procedure DrawHandler(Window, EventType, *EventData.PG_EventDraw, *UserData.MyAnimData)
  
    DrawClear(RGB(200, 200, 200), 1) ; Grey background

    DrawBox(*UserData\x, (*EventData\height / 2) - 25, 50, 50, RGB(0, 0, 255))
    
EndProcedure

Procedure AnimateHandler(Window, EventType, *EventData.PG_EventAnimate, *UserData.MyAnimData)
  
  Select *EventData\state
  
    Case #PG_Event_Animate_Start

      Debug "Animation started."
      
    Case #PG_Event_Animate_Update

      ; Calculate intermediate value using a transition function
      *UserData\x = Transition_Ease(*EventData\currentTime, *UserData\StartValue, *UserData\TargetValue - *UserData\StartValue, *EventData\duration)
      
      WindowRedraw(Window)

      Debug "Animation " + *EventData\id + " Update: Time=" + *EventData\currentTime + "ms, Value=" + StrD(CurrentValue)
      
    Case #PG_Event_Animate_End

      Debug "Animation " + *EventData\id + " ended"
        
      ; Optional, repeat the animation with a random target upto the size of width
      ; *UserData\TargetValue = Random(*EventData\width)
      StartAnimation(Window, *EventData\id, 2000)

  EndSelect

EndProcedure

StartProGUI()

MyWindow = CreateWindow(0, 0, 300, 200, "StartAnimation Example")

If MyWindow
    
  ; Setup data for animation
  *AnimData.MyAnimData = AllocateStructure(MyAnimData)
  *AnimData\StartValue = 10
  *AnimData\TargetValue = 200
    
  AddEventHandler(MyWindow, #PG_Event_Draw, @DrawHandler(), *AnimData)
  AddEventHandler(MyWindow, #PG_Event_Animate, @AnimateHandler(), *AnimData)

  ; Start an initial 2-second animation
  AnimID = StartAnimation(MyWindow, #PG_Any, 2000)
  Debug "Started animation with ID: " + AnimID

  WindowShow(MyWindow, #True, #PG_Window_ScreenCentered)
  Repeat : Event = WaitWindowEvent() : Until Event = #PB_Event_CloseWindow
  
  StopAnimation(Window, AnimID)
  FreeStructure(*AnimData)
  
EndIf 

StopProGUI()

Supported OS

Windows, Linux