interpolateBetween image from below

[Fabioxps]

I don't know how to use ' interpolateBetween ' I want the images that I am creating with this effect

I want the images in and out of the corner of the screen

local sX,sY = guiGetScreenSize() 
local SCALE = (sX/1920)*(sY/1200) 
local KEY = {"F1"} 
  
local _function = { 
    ANIMATION = false, 
    ANIMATIONS = false, 
    TOP = { 
        SIZE = {sX,sY/13}, 
        POS = {0,0-sY/13-sY/13/40}, 
        FONT = 6*SCALE, 
    }, 
    BOTTON = { 
        SIZE = {sX,sY/10}, 
        POS = {0,sY+sY/10+40}, 
        IMAGEMS = { 
            URL = {"img/map.png","img/tune.png","img/music.png","img/stats.png","img/plus.png","img/options.png"}, 
            POS = {{sX/2-(((sY/10)+(sY/40))*3),50},{sX/2-(((sY/10)+(sY/40))*3),120},{sX/2-(((sY/10)+(sY/40))*3),190},{sX/2-(((sY/10)+(sY/40))*3),260},{sX/2-(((sY/10)+(sY/40))*3),330},{sX/2-(((sY/10)+(sY/40))*3),400}}, 
            SIZE = {sY/2,sY/15}, 
            VISIBLE = {150,150,150,150,150,150,150} 
        }, 
        _dxDrawText = {"RACES","CUSTOMIZE CAR","MUSIC","STORE","RANKING","OPTIONS"} 
    }, 
    VISIBLE = 0, 
    TICK = getTickCount(), 
    LEFT = 0, 
    BLOOCK = true, 
} 
  
_LISTSELECTDX = function() 
    for _G = 1,#_function.BOTTON.IMAGEMS.URL do 
        dxDrawImage(_function.BOTTON.IMAGEMS.POS[ _G ][1],_function.BOTTON.IMAGEMS.POS[ _G ][2],_function.BOTTON.IMAGEMS.SIZE[1],_function.BOTTON.IMAGEMS.SIZE[2],_function.BOTTON.IMAGEMS.URL[ _G ],0,0,0,tocolor(255,255,255,_function.BOTTON.IMAGEMS.VISIBLE[ _G ]),true) 
    end 
end 
addEventHandler("onClientRender",getRootElement(),_LISTSELECTDX) 
  
  
function ANIMATIONS_function() 
    if not _function.ANIMATION then 
        _function.TICK = getTickCount() 
        _function.ANIMATION = true 
        _function.ANIMATIONS = true 
        showCursor(true) 
        addEventHandler("onClientPreRender",getRootElement(),ANIMATION_functionOn) 
    else 
        _function.TICK = getTickCount() 
        _function.ANIMATION = false 
        _function.ANIMATIONS = true 
        showCursor(false) 
        addEventHandler("onClientPreRender",getRootElement(),ANIMATION_functionOff) 
    end 
end 
  
bindKey(KEY[1],"down",function() 
    if not _function.ANIMATIONS then 
            ANIMATIONS_function() 
    end 
end) 
  
  
  
function ANIMATION_functionOn() 
    local TICK = getTickCount() - _function.TICK 
    local progress = TICK/500 
    if progress >= 1 then progress = 1 removeEventHandler("onClientPreRender",getRootElement(),ANIMATION_functionOn) _function.ANIMATIONS = false end 
    _function.BOTTON.POS[2] = interpolateBetween(sY,0,0,sY-sY/10,0,0,progress,"Linear") 
    for _G = 1,#_function.BOTTON.IMAGEMS.URL do 
        _function.BOTTON.IMAGEMS.POS[ _G ][2] = _function.BOTTON.POS[2] 
    end 
end 
  
  
  
function ANIMATION_functionOff() 
    local TICK = getTickCount() - _function.TICK 
    local progress = TICK/500 
    if progress >= 1 then progress = 1 removeEventHandler("onClientPreRender",getRootElement(),ANIMATION_functionOff) _function.ANIMATIONS = false end 
    _function.BOTTON.POS[2] = interpolateBetween(sY-sY/10,0,0,sY+_function.TOP.SIZE[2]/40,0,0,progress,"Linear") 
    for _G = 1,#_function.BOTTON.IMAGEMS.URL do 
        _function.BOTTON.IMAGEMS.POS[ _G ][2] = _function.BOTTON.POS[2] 
    end 
end 

[Fabioxps]

yeerrr

[kevenvz]

Just use the X position and not the Y position.

[Fabioxps]

I have done this but does not work

[IIYAMA]

You don't need to use interpolateBetween for dx image when you only use "Linear".

Well just as example:

You image is 500px x 200px

Your resolution is: 1920px x 1080px.

You start drawing the image at:

1420px x 1080px

NOT TESTED

local sX,sY = guiGetScreenSize() 
  
local moveTime = 3000 -- define how long it takes before the animation is complete. 
  
local imageXSize,imageYSize = 500,200 -- define the image size 
  
local imageXStart,imageYStart = sX-imageXSize,sY-- define where you start drawing you image 
  
local imageX_Distance = sX-imageXStart -- define how much you move 
  
local imageMoveStateOut = true -- define the state you are using 
  
local imageTimeEnd = getTickCount()+moveTime -- set up the time before the animation ends. 
  
addEventHandler("onClientRender",root, 
function () 
  
    local timeNow = getTickCount() 
     
    if timeNow > imageTimeEnd then -- check if the future time is still higher then the time now. Else we: 
        imageTimeEnd = timeNow+moveTime-- set new future time. 
        imageMoveStateOut = not imageMoveStateOut-- swap animation 
    end 
     
    local progress = (imageTimeEnd-timeNow)/moveTime -- calculate the progress. 
  
    dxDrawImage( imageMoveStateOut and imageXStart+(imageX_Distance*progress) or imageXStart+(imageX_Distance*(1-progress)),imageYStart,imageXSize,imageYSize,"myImage") 
  
end) 
  

imageXStart+(imageX_Distance*progress) -- out 
imageXStart+(imageX_Distance*(1-progress)) -- in 

With other words, its is easier then you think.

Also if you want to choose something else then "linear":

Then you better can use: getEasingValue Which will give the same result.