How to fade in/out DX?

[FlyingSpoon]

showMenu = false

function showMenu()
  
dxDrawImage(x*0, y*0, x*1920, y*1080, "img/bg.png", 0, 0, 0, tocolor(255,255,255,255), false) -- Background Image

dxDrawRectangle(x*0, y*0, x*1920, y*80, tocolor(0, 0, 0, 126), false) -- Top Bar 
dxDrawRectangle(x*0, y*80, x*1920, y*10, tocolor(0, 96, 94, 126), false) -- Semi Top Bar

end

function bindMenu()
if showMenu == false then
   addEventHandler("onClientRender", root, showMenu)
   showMenu = true
else
   removeEventHandler("onClientRender", root, showMenu)
   showMenu = false
  end
end
bindKey("F1", "down", bindMenu)

I want to know how to fade this DX in, when it is visible, and fade out when it is turned off?

[AE.]

make a variable for the alpha 


 

alp = 255 -- this is the alpha variable
--and then put the aplha in tocolor like this
-------------------------

dxDrawImage(x*0, y*0, x*1920, y*1080, "img/bg.png", 0, 0, 0, tocolor(255,255,255,alp), false) -- Background Image

dxDrawRectangle(x*0, y*0, x*1920, y*80, tocolor(0, 0, 0, alp), false) -- Top Bar 
dxDrawRectangle(x*0, y*80, x*1920, y*10, tocolor(0, 96, 94, alp), false) -- Semi Top Bar

--and now fade it out with timer like this

function bindMenu()
if showMenu == false then
  addEventHandler("onClientRender", root, showMenu)
  setTimer(function()
if alp == 254 then
   showMenu = true
end
alp = alp + 1
end,50,255)

else
 
  setTimer(function()
if alp == 1 then
  removeEventHandler("onClientRender", root, showMenu)
  showMenu = false
end
alp = alp - 1
end,50,255)
 
  end
end
bindKey("F1", "down", bindMenu)

 

[FlyingSpoon]

alp = 255 -- this is the alpha variable
--and then put the aplha in tocolor like this
-------------------------

menu = false

function showMenu()
dxDrawRectangle(0, 0, 1920, 80, tocolor(0, 0, 0, alp), false) -- Top Bar 
dxDrawRectangle(0, 80, 1920, 10, tocolor(0, 96, 94, alp), false) -- Semi Top Bar
end

--and now fade it out with timer like this

function bindMenu()
if menu == false then
  addEventHandler("onClientRender", root, showMenu)
  setTimer(function()
if alp == 25 then
   menu = true
end
alp = alp + 1
end,50,255)

else
 
  setTimer(function()
if alp == 1 then
  removeEventHandler("onClientRender", root, showMenu)
  menu = false
end
alp = alp - 1
end,50,255)
 
  end
end
bindKey("F1", "down", bindMenu)

 

Fixed up your code a little, you were missing a few things, but seems like when I press F1, it fades in then disappears and repeats the process. A little buggy, any fix?

[TRtam]

I think you can made it with 2 variables; the first for the state and the second for the alpha using math.min/max
Here is an example:

local show = false
local alpha = 0

addEventHandler("onClientRender", getRootElement(),
	function()
    	if show then
      		alpha = math.min(alpha + 20, 255)
      	else
      		alpha = math.max(alpha - 20, 0)
        end
    
    	dxDrawRectangle(200, 200, 200, 200, tocolor(255, 255, 255, alpha))
    end
)

bindKey("F1", "down",
	function()
		show = not show  
  	end
)

 

[#BrosS]

Another way 

local show = false
local alpha = 0
tick = 0

addEventHandler("onClientRender", getRootElement(),
	function()
    	if show then
      	   alpha = interpolateBetween(alpha, 0, 0, 255, 0, 0, (getTickCount()-tick)/1000, "Linear")
      	else
      		alpha = interpolateBetween(255, 0, 0, 0, 0, 0, (getTickCount()-tick)/1000, "Linear")
        end
    
    	dxDrawRectangle(200, 200, 200, 200, tocolor(255, 255, 255, alpha))
    end
)

bindKey("F1", "down",
	function()
		show = not show
        tick = getTickCount()		
  	end
)

I'm not sure cuz i'm on mobile

[FlyingSpoon]

Works perfectly @#BrosS

[#BrosS]

28 minutes ago, raysmta said:

Works perfectly @#BrosS

Okey i'm glad 

Edited June 10, 2017 by #BrosS
-_-

[FlyingSpoon]

if show then
		local anim = interpolateBetween(757, 0, 0, 0, 0, 0, progress, "Linear" )
		local alpha = interpolateBetween(255, 0, 0, 0, 0, 0, ((getTickCount()-tick)/1000), "Linear")
		dxDrawText(guiGetText(edit_username), anim, 528, 1142, 581, tocolor(255, 255, 255, alpha), 2.00, "default", "left", "center", false, false, true, false, false)
		else
        dxDrawText(guiGetText(edit_username), 757, 528, 1142, 581, tocolor(255, 255, 255, alpha), 2.00, "default", "left", "center", false, false, true, false, false)
		end

Okay I tried something, but its not perfect, how can I make the animation more smoother, so what happens is when it clicks the button, it fades away. How can I do that more smother, right now it isnt smooth, and its my first time using interpolate c;

Edited June 10, 2017 by raysmta

[Hale]

local alpha = interpolateBetween(255, 0, 0, 0, 0, 0, (getTickCount()-tick)/700, "Linear")

Try changing the number you're dividing the tick amount with (in my case 700, in your 1000).