MTA PAINEL COM ANIMAÇAO

[Daniel Reis]

Galera queria por animaçao nos meu paineis, alguem ai pode me explica como colocar, ou tem algum video ensinando? ..

Edited December 27, 2017 by Daniel Reis

[Lord Henry]

Hoje em dia ninguém faz painéis com animações, pois isso consome muito processamento do servidor.
Mas caso você não se importe com lag e queira fazer mesmo assim, use isso:
InterpolateBetween

[Daniel Reis]

On 29/12/2017 at 16:42, Lord Henry said:

Hoje em dia ninguém faz painéis com animações, pois isso consome muito processamento do servidor.
Mas caso você não se importe com lag e queira fazer mesmo assim, use isso:
InterpolateBetween

Eu nao consegui nao mano..

[Lord Henry]

14 hours ago, Daniel Reis said:

Eu nao consegui nao mano..

Qual animação vc está tentando fazer?

[Daniel Reis]

17 minutes ago, Lord Henry said:

Qual animação vc está tentando fazer?

Tipo um painel vem diferente,vo manda um video para vc,tipo essas animaçao.

 

[DNL291]

Isso é feito com a função interpolateBetween que já foi citada acima. Não é simples assim de usar, e se você ainda não sabe o básico de Lua - como ajustar e redimensionar GUI/DX na tela, recomendo primeiro aprender isso e depois partir pra animações e etc.

Você pode encontrar algumas funções úteis que vai te ajudar muito, mas o conhecimento pra saber usá-las é obrigatório.

• https://wiki.multitheftauto.com/wiki/DxDrawAnimWindow
• https://wiki.multitheftauto.com/wiki/Animate
• https://wiki.multitheftauto.com/wiki/IsMouseInPosition

Edited January 3, 2018 by DNL291

[Gw8]

vou tentar ser o mais simples possível pra ensinar usar o  InterpolateBetween..

interpolateBetween(a,b,c,d,e,f,progresso,efeito) ela cria 3 intervalos, o segredo dessa ferramenta do mta está no progresso é ele que comanda...

A -> D

B -> E   

C -> F

ocorre o seguinte quando se usa isso o valor estabelecido em A ele é transformado em D conforme o progresso. 

exemplo A = 0 e D = 300, quando o progresso estiver em 0.5 o valor será 150

valor = interpolateBetween(0,0,0,300,0,0,0.5,"Linear")

como eu citei encima voce pode criar 3 intervalos de uma unica vez..

 

valor1,valor2,valor3 = interpolateBetween(0,0,0,300,150,50,0.5,"Linear")

entao seria os seguintes valores;

valor1 = 150

valor2 = 75

valor3 = 25

quando o progresso estiver em 0.5... agora creio que essa parte voce ja entendeu vou falar um pouco mais sobre o progresso..

normalmente se usa getTickCount() na maioria das vezes.

local start = getTickCount()

function render()

        local progresso = math.min((getTickCount()-start)/5000,1)

       -- no caso esse efeito sera executado em 5 segundos

end

addEventHandler("onClientRender",root,render)

local pg = 0

function render()

pg = pg +0.1

-- tambem daria certo, sendo que para deixa mais rapido vc ia almentar a soma ou mais lento voce vai diminuir

-- pg = pg + 0.2 mais rapido

-- pg = pg +0.05 mais lento

end

addEventHandler("onClientRender",root,render)

o valor do progresso é sempre entre 0.0 e 1.0, acima disso ou abaixo ele nao considera ou seja menor que 0 fica travado no valor A acima de 1 fica travado no D, espero que tenha entendido foi o mais simples que consegui.

ultimo exemplo :

local pg = 0

function render()

	pg = pg + 0.05

	valor = interpolateBetween(10,0,0,320,0,0,pg,"Linear")

	print(valor)

end

addEventHandler("onClientRender",root,render)

 

[Daniel Reis]

Vc pode me manda alguma animaçao feita??

Para min so dar uma olhada e ver que consigo...

[Lord Henry]

local x,y = guiGetScreenSize()
visible = {}

function fadeInCenter (pX, pY, theWidth, theHeight, red, green, blue, theAlpha, postGUI, theDuration, theType, thePeriod, theAmplitude, theOvershoot)
	local start = getTickCount()
	function renderIn ()
		local now = getTickCount()
		local endTime = start + theDuration
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local alpha, posX, posY = interpolateBetween (0, x/2, y/2, theAlpha, pX, pY, progress, theType, thePeriod, theAmplitude, theOvershoot)
		local width, height = interpolateBetween (0, 0, 0, theWidth, theHeight, 0, progress, theType, thePeriod, theAmplitude, theOvershoot)
		dxDrawRectangle (posX, posY, width, height, tocolor (red, green, blue, alpha), postGUI)
		dxDrawText ("TEXTO", x/2-50, posY+30, x/2+50, posY+50, tocolor(255, 255, 255, alpha), 1.5, "default", "center")
		setTimer (dxDrawRectangle, 100, 1, posX+5, posY+5, width-10, height-10, tocolor (red, green, blue, alpha), postGUI)
		setTimer (dxDrawRectangle, 200, 1, posX+10, posY+10, width-20, height-20, tocolor (red, green, blue, alpha), postGUI)
		visible[localPlayer] = true
	end
	addEventHandler ("onClientRender", getRootElement(), renderIn)
end

function fadeOutCenter (pX, pY, theWidth, theHeight, red, green, blue, theAlpha, postGUI, theDuration, theType, thePeriod, theAmplitude, theOvershoot)
	local start = getTickCount()
	removeEventHandler ("onClientRender", getRootElement(), renderIn)
	function renderOut ()
		local now = getTickCount()
		local endTime = start + theDuration
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local alpha, posX, posY = interpolateBetween (theAlpha, pX, pY, 0, x/2, y/2, progress, theType, thePeriod, theAmplitude, theOvershoot)
		local width, height = interpolateBetween (theWidth, theHeight, 0, 0, 0, 0, progress, theType, thePeriod, theAmplitude, theOvershoot)
		dxDrawRectangle (posX, posY, width, height, tocolor (red, green, blue, alpha), postGUI)
		dxDrawText ("TEXTO", x/2-50, posY+30, x/2+50, posY+50, tocolor(255, 255, 255, alpha), 1.5, "default", "center")
		setTimer (dxDrawRectangle, 100, 1, posX+5, posY+5, width-10, height-10, tocolor (red, green, blue, alpha), postGUI)
		setTimer (dxDrawRectangle, 200, 1, posX+10, posY+10, width-20, height-20, tocolor (red, green, blue, alpha), postGUI)
	end
	addEventHandler ("onClientRender", getRootElement(), renderOut)
	setTimer (function()
		removeEventHandler ("onClientRender", getRootElement(), renderOut)
		visible[localPlayer] = false
	end, theDuration+100, 1)
end

function drawMenu ()
	if not visible[localPlayer] then
		fadeInCenter (x/2-150, y/2-150, 300, 300, 0, 0, 0, 90, false, 2000, "OutElastic", 0.5, 0.1)
	else
		fadeOutCenter (x/2-150, y/2-150, 300, 300, 0, 0, 0, 90, false, 1000, "InBack", 0, 0, 1.5)
	end
end
bindKey ("U", "down", drawMenu) -- Tecla que mostra/oculta o painel.

Nesse exemplo fiz animação no Alpha, posição e na escala. Mas você pode fazer somente na posição como no vídeo.

E sim, fazer essas animações é complexo mesmo.

Obs: No exemplo eu coloquei todos os elementos dentro da função da animação, mas o correto é fazer cada elemento separado.

Edited January 8, 2018 by Lord Henry

[Daniel Reis]

1 hour ago, Lord Henry said:

local x,y = guiGetScreenSize()
visible = {}

function fadeInCenter (pX, pY, theWidth, theHeight, red, green, blue, theAlpha, postGUI, theDuration, theType, thePeriod, theAmplitude, theOvershoot)
	local start = getTickCount()
	function renderIn ()
		local now = getTickCount()
		local endTime = start + theDuration
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local alpha, posX, posY = interpolateBetween (0, x/2, y/2, theAlpha, pX, pY, progress, theType, thePeriod, theAmplitude, theOvershoot)
		local width, height = interpolateBetween (0, 0, 0, theWidth, theHeight, 0, progress, theType, thePeriod, theAmplitude, theOvershoot)
		dxDrawRectangle (posX, posY, width, height, tocolor (red, green, blue, alpha), postGUI)
		dxDrawText ("TEXTO", x/2-50, posY+30, x/2+50, posY+50, tocolor(255, 255, 255, alpha), 1.5, "default", "center")
		setTimer (dxDrawRectangle, 100, 1, posX+5, posY+5, width-10, height-10, tocolor (red, green, blue, alpha), postGUI)
		setTimer (dxDrawRectangle, 200, 1, posX+10, posY+10, width-20, height-20, tocolor (red, green, blue, alpha), postGUI)
		visible[localPlayer] = true
	end
	addEventHandler ("onClientRender", getRootElement(), renderIn)
end

function fadeOutCenter (pX, pY, theWidth, theHeight, red, green, blue, theAlpha, postGUI, theDuration, theType, thePeriod, theAmplitude, theOvershoot)
	local start = getTickCount()
	removeEventHandler ("onClientRender", getRootElement(), renderIn)
	function renderOut ()
		local now = getTickCount()
		local endTime = start + theDuration
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local alpha, posX, posY = interpolateBetween (theAlpha, pX, pY, 0, x/2, y/2, progress, theType, thePeriod, theAmplitude, theOvershoot)
		local width, height = interpolateBetween (theWidth, theHeight, 0, 0, 0, 0, progress, theType, thePeriod, theAmplitude, theOvershoot)
		dxDrawRectangle (posX, posY, width, height, tocolor (red, green, blue, alpha), postGUI)
		dxDrawText ("TEXTO", x/2-50, posY+30, x/2+50, posY+50, tocolor(255, 255, 255, alpha), 1.5, "default", "center")
		setTimer (dxDrawRectangle, 100, 1, posX+5, posY+5, width-10, height-10, tocolor (red, green, blue, alpha), postGUI)
		setTimer (dxDrawRectangle, 200, 1, posX+10, posY+10, width-20, height-20, tocolor (red, green, blue, alpha), postGUI)
	end
	addEventHandler ("onClientRender", getRootElement(), renderOut)
	setTimer (function()
		removeEventHandler ("onClientRender", getRootElement(), renderOut)
		visible[localPlayer] = false
	end, theDuration+100, 1)
end

function drawMenu ()
	if not visible[localPlayer] then
		fadeInCenter (x/2-150, y/2-150, 300, 300, 0, 0, 0, 90, false, 2000, "OutElastic", 0.5, 0.1)
	else
		fadeOutCenter (x/2-150, y/2-150, 300, 300, 0, 0, 0, 90, false, 1000, "InBack", 0, 0, 1.5)
	end
end
bindKey ("U", "down", drawMenu) -- Tecla que mostra/oculta o painel.

Nesse exemplo fiz animação no Alpha, posição e na escala. Mas você pode fazer somente na posição como no vídeo.

E sim, fazer essas animações é complexo mesmo.

Obs: No exemplo eu coloquei todos os elementos dentro da função da animação, mas o correto é fazer cada elemento separado.

Si eu copiar tudo isso, e por na pasta do painel,ja vai estar pronto??

[Lord Henry]

6 minutes ago, Daniel Reis said:

Si eu copiar tudo isso, e por na pasta do painel,ja vai estar pronto??

Não. Isso é só um exemplo de animação. Vc ainda vai ter que construir seu próprio painel, colocar os textos, botões, funções, etc.

[DNL291]

@Daniel Reis, aí você já quer tudo na sua mão né? Primeiro seja mais grato às pessoas, teve posts bem útil pra você aprender aqui e você simplesmente ignora e sequer agradece.

Você mesmo pediu pra que te ensinasse e agora quer tudo pronto? Até agora você não demostrou interesse em aprender nada, apenas posta comentários curtos e que se dane o resto...

[Daniel Reis]

ok,vlw por me ajudar....

[Lord Henry]

Bom, fiz este outro exemplo com animações mais parecidas com aquele vídeo que você mostrou. O resto é com você.

local x,y = guiGetScreenSize()
visible = {}

function fadeInRight1 () -- Função que faz surgir a Aba 1 a partir da Direita.
	local start = getTickCount() -- Recebe o tempo atual antes de começar a animação.
	function renderIn1 () -- Inicia a animação.
		local now = getTickCount() -- Recebe o tempo atual a cada frame.
		local endTime = start + 1500 -- Define o momento final da animação. (tempo de início + duração em milisegundos)
		local elapsedTime = now - start -- Tempo que já passou desde o inicio da animação.
		local duration = endTime - start -- Duração total da animação em milisegundos.
		local progress = elapsedTime / duration -- Progresso atual da animação (valor float de 0 até 1)
		local posX = interpolateBetween (x, 0, 0, x-295, 0, 0, progress, "OutBack", nil, nil, 1.5) -- Interpolação da animação.
		-- posição X inicial, nada, nada, posição X final, nada, nada, progresso atual, tipo de interpolação, facilitação da interpolação, amplitude da interpolação, ultrapassagem da interpolação. (esses 3 últimos são parametros opcionais que dependem de qual tipo de interpolação vc vai usar, são valores float.)
		dxDrawRectangle (posX, y/2-100, 320, 50, tocolor(0, 0, 0, 180), false) -- Desenha um retângulo na tela com tamanho, cor e posição definidas.
		dxDrawText ("Texto 1", posX+10, y/2-87, posX+10, y/2-87, tocolor(255, 255, 255, 255), 1.5, "default") -- Desenha um texto com tamanho, e posição definidas, o resto está padrão.
	end
	addEventHandler ("onClientRender", getRootElement(), renderIn1) -- Faz tudo isso a cada frame.
end

function fadeOutRight1 () -- Função que faz sair a Aba 1 pra Direita.
	local start = getTickCount() -- Tudo igual na anterior porém o movimento é oposto.
	removeEventHandler ("onClientRender", getRootElement(), renderIn1)
	function renderOut1 ()
		local now = getTickCount()
		local endTime = start + 1500
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local posX = interpolateBetween (x-295, 0, 0, x, 0, 0, progress, "InBack", nil, nil, 1.5)
		
		dxDrawRectangle (posX, y/2-100, 320, 50, tocolor(0, 0, 0, 180), false)
		dxDrawText ("Texto 1", posX+10, y/2-87, posX+10, y/2-87, tocolor(255, 255, 255, 255), 1.5, "default")
	end
	addEventHandler ("onClientRender", getRootElement(), renderOut1)
	setTimer (function()
		removeEventHandler ("onClientRender", getRootElement(), renderOut1) -- Depois da animação, para de renderizar isso na tela, pois o retângulo não será mais visível.
	end, 1600, 1)
end

function fadeInRight2 () -- Função que faz surgir a Aba 2 a partir da Direita.
	local start = getTickCount()
	function renderIn2 ()
		local now = getTickCount()
		local endTime = start + 1500
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local posX = interpolateBetween (x, 0, 0, x-295, 0, 0, progress, "OutBack", nil, nil, 1.5)
		
		dxDrawRectangle (posX, y/2-45, 320, 50, tocolor(0, 0, 0, 180), false)
		dxDrawText ("Texto 2", posX+10, y/2-32, posX+10, y/2-32, tocolor(255, 255, 255, 255), 1.5, "default")
	end
	addEventHandler ("onClientRender", getRootElement(), renderIn2)
end

function fadeOutRight2 () -- Função que faz sair a Aba 2 pra Direita.
	local start = getTickCount()
	removeEventHandler ("onClientRender", getRootElement(), renderIn2)
	function renderOut2 ()
		local now = getTickCount()
		local endTime = start + 1500
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local posX = interpolateBetween (x-295, 0, 0, x, 0, 0, progress, "InBack", nil, nil, 1.5)
		
		dxDrawRectangle (posX, y/2-45, 320, 50, tocolor(0, 0, 0, 180), false)
		dxDrawText ("Texto 2", posX+10, y/2-32, posX+10, y/2-32, tocolor(255, 255, 255, 255), 1.5, "default")
	end
	addEventHandler ("onClientRender", getRootElement(), renderOut2)
	setTimer (function()
		removeEventHandler ("onClientRender", getRootElement(), renderOut2)
	end, 1600, 1)
end

function fadeInRight3 () -- Função que faz surgir a Aba 3 a partir da Direita.
	local start = getTickCount()
	function renderIn3 ()
		local now = getTickCount()
		local endTime = start + 1500
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local posX = interpolateBetween (x, 0, 0, x-295, 0, 0, progress, "OutBack", nil, nil, 1.5)
		
		dxDrawRectangle (posX, y/2+10, 320, 50, tocolor(0, 0, 0, 180), false)
		dxDrawText ("Texto 3", posX+10, y/2+23, posX+10, y/2+23, tocolor(255, 255, 255, 255), 1.5, "default")
	end
	addEventHandler ("onClientRender", getRootElement(), renderIn3)
	setTimer (function()
		visible[localPlayer] = true
	end, 1600, 1)
end

function fadeOutRight3 () -- Função que faz sair a Aba 3 pra Direita.
	local start = getTickCount()
	removeEventHandler ("onClientRender", getRootElement(), renderIn3)
	function renderOut3 ()
		local now = getTickCount()
		local endTime = start + 1500
		local elapsedTime = now - start
		local duration = endTime - start
		local progress = elapsedTime / duration
		local posX = interpolateBetween (x-295, 0, 0, x, 0, 0, progress, "InBack", nil, nil, 1.5)
		
		dxDrawRectangle (posX, y/2+10, 320, 50, tocolor(0, 0, 0, 180), false)
		dxDrawText ("Texto 3", posX+10, y/2+23, posX+110, y/2+23, tocolor(255, 255, 255, 255), 1.5, "default")
	end
	addEventHandler ("onClientRender", getRootElement(), renderOut3)
	setTimer (function()
		removeEventHandler ("onClientRender", getRootElement(), renderOut3)
		visible[localPlayer] = false
	end, 1600, 1)
end

function drawMenu ()
	if not visible[localPlayer] then
		fadeInRight1 ()
		setTimer (fadeInRight2, 100, 1)
		setTimer (fadeInRight3, 200, 1)
		visible[localPlayer] = "waiting"
	elseif visible[localPlayer] == true then
		fadeOutRight1 ()
		setTimer (fadeOutRight2, 100, 1)
		setTimer (fadeOutRight3, 200, 1)
		visible[localPlayer] = "waiting"
	end
end
bindKey ("U", "down", drawMenu) -- Tecla que mostra/oculta o painel.

 

Edited January 8, 2018 by Lord Henry