Transitions

A lot of TDLib's classes are transision based - these apply special effects when you hover over a panel, type in a text box, click a button, and more.

Transition Functions

Transitions work internally by changing a value based on the outcome of a Transition Function. Transition Functions are predefined in all transition classes for you, and look like this:

Example transition function

function(panel) return panel:IsHovered() end

The value is created when the class is applied. In the panel's Think function, said value is interpolated from 0 to 1 linearly based on whether the transition function returned true or false. This allows us to have very nicely animated button hover effects, an example would be drawing a box with a color directly based off of the interpolated value.

This is great because you do not need to do anything out of the box to animate button hovers, simply apply a class like so, the transition function is defined for you internally by TDLib:

Example of a class that uses a predefined transition function internally

-- This will draw white box over the panel with opacity n*30,
-- n being the lerped progress from 0-1 based on if the button is hovered or not. 
<Panel>:FadeHover(Color(255, 255, 255, 30))

Custom Transition Functions

The best part? Transition functions are amazing because you can supply your own before applying a class, and the class will use your custom one instead of it's predefined one. This behavior easily lets us apply hover effects to buttons being depressed, as an example.

Custom transition functions are applied like so:

local but = vgui.Create("DButton")
but:SetTransitionFunc(function(s) return s:IsDepressed() end) -- Set a custom func which will be used for all future transition-based classes on this button
    :FadeHover(Color(0, 255, 0, 255)) -- Button will now fade to green when it's depressed, and fade out when it isnt.

Clearing Custom Transition Functions

Clearing a panel's transition func will force all future transition class calls on the panel to use their predefined functions. This is useful if you want to apply a custom function for one transition, and use the default ones for all other calls.

This is done like so:

<Panel>:ClearTransitionFunc()

Real example:

local but = vgui.Create("DButton")
but:SetTransitionFunc(function(s) return s:IsDepressed() end)
    :FadeHover() -- This transition will use the custom transition func above
    :ClearTransitionFunc()
    :BarHover() -- This one will not, reverting to its default

Creating Transitions from Scratch

Creating a transition for your own needs is easy.

Example

<Panel>:SetupTransition("TransitionName", speedOfTransition, transitionFunction)

Your panel will now have a variable on it named TransitionName which is interpolated from 0 to 1 according to your transition function, described above. The speed is a number which internally is multiplied by FrameTime().