MTA PAINEL COM ANIMAÇAO

Daniel Reis · December 27, 2017

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 · December 29, 2017

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 · January 2, 2018

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 · January 2, 2018

14 hours ago, Daniel Reis said:

Eu nao consegui nao mano..

Qual animação vc está tentando fazer?

Daniel Reis · January 2, 2018

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 · January 3, 2018

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.

Edited January 3, 2018 by DNL291

Gw8 · January 4, 2018

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 · January 8, 2018

Vc pode me manda alguma animaçao feita??

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

Lord Henry · January 8, 2018

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 · January 8, 2018

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 · January 8, 2018

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 · January 8, 2018

@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 · January 8, 2018

ok,vlw por me ajudar....

Lord Henry · January 8, 2018

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

Sign In

MTA PAINEL COM ANIMAÇAO

Recommended Posts

Daniel Reis

Link to comment

Lord Henry

Link to comment

Daniel Reis

Link to comment

Lord Henry

Link to comment

Daniel Reis

Link to comment

DNL291

Link to comment

Gw8

Link to comment

Daniel Reis

Link to comment

Lord Henry

Link to comment

Daniel Reis

Link to comment

Lord Henry

Link to comment

DNL291

Link to comment

Daniel Reis

Link to comment

Lord Henry

Link to comment

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

Activity

MTA Network

Social Media