Jump to content

[REL] Little Animation Class


DKongHD

Recommended Posts

This is a small class/function that helps you to work with animations.

So, if you want to create an animation, e.g. fading the alpha, you have to start the function like this:

CEase:start(time, type)

You should save the returned value/instance in a variable.

You can get a list of all the animation types here:https://wiki.multitheftauto.com/wiki/Easing

This are the "easing functions".

To get the returned value, which is from 0 to 1 in the most cases, I make a little example for you:

  
local myEase = CEase:start(1000, "InOutQuad") 
function renderSth() 
   dxDrawRectangle(0, 0, 500, 500, tocolor(0, 0, 0, myEase.value*255)) 
end 
addEventHandler("onClientRender", getRootElement(), renderSth) 
  

With this small script, the alpha of the rectangle gets calculated from 0 to 255 in 1000 milliseconds.

The returned value, that you have to use for the animations, you always get like this: variable.value.

This script does not create animations, it just helps a lot at the calculating part.

Here is the class/script:

  
CEase = {} 
CEase.__index = CEase 
  
function CEase:start(time, typ)  
    local data = {} 
    data.start = getTickCount() 
    data.ending = data.start+time 
    data.typ = typ 
    data.value = 0   
    setmetatable(data, self)     
    data.easeFunc = function() 
        local tick = getTickCount() 
        local elapsed = tick-data.start 
        local duration = data.ending - data.start 
        local progress = elapsed / duration  
        data.value = getEasingValue(progress, data.typ)  
        if tick > data.ending then           
            removeEventHandler("onClientRender", getRootElement(), data.easeFunc) 
        end 
    end 
    addEventHandler("onClientRender", getRootElement(), data.easeFunc)   
    return data 
end 
  

I hope I've explaned everything right. I think, all should work, because I've used the same class here:

So if you want to have a lot of animations in your GUIs, this could help you a lot.

Link to comment
I think that using class in MTA is a low efficient method.

That makes completely no sense.

Regarding the OP, I don't want to steal the topic, but you can as well use kikito's tween library which has far more easing functions built-in (and allows you to specify your own easing functions if you want) - it was made based on LOVE's design, though it can easily be ported to MTA since it has no specific code from it. All you need to do is remove "return tween" from line 379 and make the table "tween" defined at line 7 global. To use it, just call tween.update in the event onClientPreRender, passing the argument dt to it. Then you can use tween.start, tween.stopAll and all the other functions normally.

Example of usage:

addEventHandler("onClientPreRender", root, function ( dt ) tween.update ( dt * 0.001 ) end) 
  
-- taken from tween's doc 
-- increase the volume of music from 0 to 5 in 10 seconds 
local music = { volume = 0, path = "path/to/file.mp3" } 
tween(10, music, { volume = 5 }) 
  
-- make some text fall from the top of the screen, bouncing on y=300, in 4 seconds 
local label = { x=200, y=0, text = "hello" } 
tween(4, label, { y=300 }, 'outBounce') 
  
-- fade background to black in 2 seconds, and then print a message on the terminal 
local backgroundColor = {255,255,255} 
tween(2, backgroundColor, {0,0,0}, 'linear', print, "hello!") 

Regardless, the idea is nice, and there is absolutely no problem with using "classes".

Edited by Guest
Link to comment
  • 3 weeks later...
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...