GUI animations

[Xeno]

How do I do them? ;3

[Anderl]

Using your brain and math Other way is use the brain and built-in functions

[Xeno]

I thought there pre-built functions on the Wiki? I just can't find them anymore ;l

[Anderl]

Other way is use the brain and built-in functions

You can use these functions:

interpolateBetween 
guiSetAlpha 
guiSetPosition 

( And some others )

Or you can make functions by yourself using math, which would be better in my opinion but...

[Xeno]

Probably too advanced for me.

And so there isn't any pre made functions?

[Castillo]

There is the animation library by arc_:

--[[ 
  
  Client animation library by arc_ 
               Version 1.0.0 
   
  Licence 
  ---------------- 
   
  You are free to modify this file and redistribute it with your changes. 
  However, always mention that you changed it (and eventually what changes 
  you made) and keep the original author, version number and licence intact. 
   
  Selling this script or a derivative of it is not allowed. 
   
   
  Documentation 
  ---------------- 
   
  Terminology 
   
    - Animation: a sequence of phases that act on one or more elements 
      and follow each other sequentially in time. 
       
      Multiple animations can be running at the same time. All defined 
      animations run in parallel. 
       
      An animation is in fact one phase with several subphases (see below), 
      with animation specific functions available. 
       
    - Phase: a part of an animation sequence. A phase consists of a 
      paramater that linearly goes from a given starting value to a 
      given ending value, over the specified amount of time, and is 
      applied to one certain element. While a phase is running, its 
      callback function will be called onClientRender with the following 
      arguments: 
       
        phase.fn(element elem, float param, table phase) 
       
      Specifying time and callback function is optional. If no time is 
      specified but a function is, phase.fn(elem) will be called once. 
      If no function is specified but a time is, the phase consists 
      of simply waiting during that time, doing nothing. 
       
      A phase can be run once, repeated multiple times or loop infinitely. 
       
      Phases can also contain phases. In that case the parent phase consists 
      of completing all child phases, in order. This allows you to f.e. 
      make an element move left and right continuously: define a phase for 
      moving it to the left, followed by a phase for moving it back to the 
      right, and encapsulate these two phases in a parent phase that loops 
      forever. 
       
      Phases can be nested to arbitrary depth. The element a subphase works on 
      is inherited from its parent phase (or, if the parent phase doesn't 
      specify an element, from the grandparent, etc). 
  
       
  Definition of a phase 
   
    A phase is simply a table containing properties and (optionally) subphases. 
    Available phase properties are: (the values for the properties are examples, 
    not default values) 
     
    phase = { 
        from = 0,           -- the starting value of the parameter 
        to = 1,             -- the ending value of the parameter 
        [time = 1000,]      -- the time (in ms) in which to go from start to end 
        [fn = callback,]    -- the function to call on each frame update 
        [repeats = 5,]      -- how many times to run this phase before going on to 
                            --   the next. defaults to 1 
  
        [subphase1,]        -- optional subphases. if one or more of these are included, 
        [subphase2,]        --   only the "repeats" property is valid for this parent phase 
        ... 
    } 
  
  Available functions 
   
    anim = Animation.create(elem, phase1, phase2, ...) 
      Creates and returns a new animation. This means nothing more than 
      creating a new phase, putting the specified phases in it as subphases, 
      and making the functions of the Animation class available to it. 
       
      Once an animation is created, it is not yet running. 
       
    anim = Animation.createAndPlay(elem, phase1, phase2, ...) 
      Creates a new animation and immediately starts playing it. 
     
    anim = Animation.createNamed(name, elem, ...) 
      If an animation with the specified name exists, returns that animation. 
      Otherwise creates a new named animation. You can look the animation up 
      again later with Animation.getNamed(name). 
     
    anim = Animation.createNamedAndPlay(name, elem, ...) 
      Self explanatory. 
       
    anim = Animation.getNamed(name) 
      Returns the animation with the specified name if it exists, 
      false otherwise. 
       
    anim:play() 
      Start playing a newly created animation or resume a paused animation. 
       
    anim:pause() 
      Pauses the animation. Resume it later with anim:play() or delete it 
      with anim:remove(). 
       
    anim:remove() 
      Deletes the animation completely. It can not be resumed anymore. 
     
    anim:isPlaying() 
      Returns true if the animation is currently playing, false if not. 
       
    Animation.playingAnimationsExist() 
      Returns true if there is any animation that is currently playing. 
       
       
    anim:addPhase(phase3), phase2:addPhase(phase3) 
      Appends a new subphase to the animation or phase. Can be done while 
      the animation is playing. Note that to be able to use phase2:addPhase(), 
      phase2 first has to be processed (default values filled in, made part of 
      the Phase class) by being passed as an argument to 
      Animation.create[AndPlay] or addPhase. 
       
       
  Examples 
   
    Fade in a picture: 
     
      local pict = guiCreateStaticImage(...) 
      Animation.createAndPlay(pict, { from = 0, to = 1, time = 2000, fn = guiSetAlpha }) 
       
    Fade in a picture using a preset (for more presets, see the end of this file): 
     
      local pict = guiCreateStaticImage(...) 
      Animation.createAndPlay(pict, Animation.presets.guiFadeIn(2000)) 
       
    Move a label to the right while fading it in: 
     
      local label = guiCreateLabel(10, 100, 150, 20, 'Test', false) 
      Animation.createAndPlay(label, Animation.presets.guiMove(200, 100, 2000)) 
      Animation.createAndPlay(label, Animation.presets.guiFadeIn(2000)) 
       
    Move a label left and right forever, without presets: 
     
      function guiSetX(elem, x) 
          local curX, curY = guiGetPosition(elem, false) 
          guiSetPosition(elem, x, curY, false) 
      end 
      local label = guiCreateLabel(10, 100, 150, 20, 'Test', false) 
      Animation.createAndPlay( 
          label, 
          { 
              repeats = 0, 
              { from = 10, to = 200, time = 2000, fn = guiSetX }, 
              { from = 200, to = 10, time = 2000, fn = guiSetX } 
          } 
      ) 
       
                                                 ]]-- 
  
Phase = {} 
Phase.__index = Phase 
  
Animation = setmetatable({}, { __index = Phase }) 
Animation.__index = Animation 
  
Animation.collection = {} 
  
function Animation.create(elem, ...) 
    local anim = setmetatable({ elem = elem, ... }, Animation) 
    anim:_setup() 
    return anim 
end 
  
function Animation.createAndPlay(elem, ...) 
    local anim = Animation.create(elem, ...) 
    anim:play() 
    return anim 
end 
  
function Animation.createNamed(name, elem, ...) 
    local anim = Animation.getNamed(name) or Animation.create(elem, ...) 
    anim.name = name 
    return anim 
end 
  
function Animation.createNamedAndPlay(name, elem, ...) 
    local anim = Animation.createNamed(name, elem, ...) 
    anim:play() 
    return anim 
end 
  
function Animation.getNamed(name) 
    local i, anim = table.find(Animation.collection, 'name', name) 
    return i and anim 
end 
  
function Animation:isPlaying() 
    return self.playing or false 
end 
  
function Animation.playingAnimationsExist() 
    return table.find(Animation.collection, 'playing', true) and true 
end 
  
function Animation:play() 
    if self.playing then 
        return 
    end 
    if not table.find(Animation.collection, self) then 
        table.insert(Animation.collection, self) 
    end 
    if not Animation.playingAnimationsExist() then 
        addEventHandler('onClientRender', getRootElement(), updateAnim) 
    end 
    self.playing = true 
end 
  
function Animation:pause() 
    self.playing = false 
    if not Animation.playingAnimationsExist() then 
        removeEventHandler('onClientRender', getRootElement(), updateAnim) 
    end 
end 
  
function Animation:remove() 
    table.removevalue(Animation.collection, self) 
    if not Animation.playingAnimationsExist() then 
        removeEventHandler('onClientRender', getRootElement(), updateAnim) 
    end 
    self.playing = false 
end 
  
function Phase:_setup(parent) 
    self.parent = parent 
    if self[1] then 
        for i,phase in ipairs(self) do 
            if type(phase) == 'function' then 
                phase = { fn = phase } 
                self[i] = phase 
            end 
            setmetatable(phase, Phase) 
            phase:_setup(self) 
        end 
        self.curphase = 1 
    elseif self.time then 
        self.from = self.from or 0 
        self.to = self.to or 1 
        self.speed = (self.to - self.from) / self.time 
    end 
    self.repeats = self.repeats 

[DakiLLa]

InterpolateBetween function wiki page gives some decent examples that you might have to look at (for gui-window - example #2). They are not that hard as it seems on the first view, tho anyway it requires some time to analyze them. Also you should take in your mind some things like you can't actually press buttons when some animation is in progress and eh... something like that.

[myonlake]

As Solidsnake14 already replied, you can find all the nice smooth animations from the race-resource made by arc_.

[Anderl]

As Solidsnake14 already replied, you can find all the nice smooth animations from the race-resource made by arc_.

That library has bugs. I personally prefer developing animations by myself.

[Castillo]

Yeah, that library has some bugs.