How to make things look snazzy by animation?

Hey,

I have never tried animation (well, i gave it a go, then stopped to not know what to do). How do i do it?

Im trying to draw slot machine thing.

Any help? Thanks!

Very good question. I would really love to know this aswell.

Learn about linear interpolation (easy), quadratic interpolation (requires highschool maths) and bezier interpolation (a whole bunch of nested linear interpolations).

Lua provides you a Lerp() function, but you’ll need to create your own quad-interp and bezier-interp functions yourself.

Use bezier interpolation when you want things to follow a path.

Use quadratic interpolation for a more natural-looking transition. it is also known as “easing in” or “easing out”.

I really recommend downloading a lua tween library https://github.com/kikito/tween.lua/blob/master/tween.lua

These functions are pretty simple, say you want a box bouncing on your screen, you can use InSine (try the Demo described in that github repository to see what all tweens do), you’ll want something like:



local t = 0
hook.Add("HUDPaint", "Test", function()
    t = t + FrameTime() -- "t" is now like a clock, always ticking up, it's also FPS independent so the animation is smoooooth

    if t > 2 then t=t-2 end -- If we've reached the end, reset the clock (by going back 2 seconds in time instead of setting to 0 we are once again FPS independent)

    --Most easings take 4 arguments:
        -- Time: Put your clock here, should always be an incrementing/decrementing number in seconds
        -- Begin: Your starting number
        -- Change: How big difference there should be between start and end, in our case we want the screen width.
        -- Duration: How long time until we get there

    local xpos = tween.easing.inSine(t, 20, ScrW()-20, 2)

    surface.SetDrawColor(Color(200,100,100))
    surface.DrawRect(xpos, ScrH()/2, 40, 40)
end)