Panel bounce-in and out transitions?

[Tenrys]

Hello,

Has anyone worked out a way to make a bounce-in and out transitions for showing or hiding a panel yet,
much like [URL="https://a.pomf.cat/gscufe.mp4"]Discord's panels[/URL] or [URL="https://daneden.github.io/animate.css/"]animate.css's bounce-in and out transitions[/URL]? If so, I'd like to hear about that.

The only way I can currently think of is applying some kind of scaled matrix in the panel's Paint hook while disabling clipping, but that didn't seem to work out too well and the scaling doesn't apply to the children.

Thanks!

[Fresh~]

--snip--

[Klaes4Zaugen]

Literally copy pasted from one my addons but you should still know how to use it

[lua]
function Ipsilon.framework.animate.sizeTo(pnl, duration, ease, sizeX, sizeY, callback)
local easeMethod = Ipsilon.framework.ease[ease];

local anim = pnl:NewAnimation(duration);
anim.Size = Vector(sizeX, sizeY, 0);
anim.Think = function(anim, pnl, fract)
local newFract = easeMethod(fract, 0, 1, 1);

if (!anim.StartSize) then
anim.StartSize = Vector(pnl:GetWide(), pnl:GetTall(), 0);
end
local size = LerpVector(newFract, anim.StartSize, anim.Size);
pnl:SetSize(size.x, size.y);
end
anim.OnEnd = function(animData, pnl)
if (!callback) then return; end
callback();
end
end
[/lua]

[lua]
["ease_outback"] =
function(t, b, c, d)
t = t / d;
local ts = t * t;
local tc = ts * t;
return b+c*(0.3*tc*ts + -4.305*ts*ts + 11.71*tc + -12.705*ts + 6*t);
end,
[/lua]

[Tenrys]

Those examples are not what I'm asking for, they just size the panel itself. Imagine some sort of 3D2D panel that comes to you from away, realizes that it went too far, steps back a little and stops (and the other way around for hiding)
(Now that I think about it I [I]could [/I]use the [URL="https://github.com/HandsomeMatt/3d2d-vgui"]3D2D vgui library[/URL] but won't that be too expensive?)

[tehbiga]

If you want it to be 3D in some manner then you'd have to apply a matrix. The anim example could be modified to reposition instead of sizing for slide in/out.

[NeatNit]

Using 3D2D for this is not a bad idea.

Something like (untested):
[lua]cam.Start3D(vector_origin, angle_zero, 90, nil, nil, nil, nil,1)
cam.Start3D2D(Vector(10, 0, 0), angle, scale)
mypanel:PaintAt(x,y)
cam.End3D2D()
cam.End3D()[/lua]

[tehbiga]

I just remember that in a 2D context the znear is basically 0 and you can't just rotate the context with a matrix. You do need 3D2D, but using the 3D2D vgui library is way overkill.

[editline]29th September 2016[/editline]

@Tenrys: Is this what you want?

[vid]https://puu.sh/rsbAo.webm[/vid]

Better video

[editline]29th September 2016[/editline]

If you are looking for something exactly like the Discord popup that isn't just a resize it could also be done the same way I do my stupid thing.

[G😹nz😻]

Create a panel with a black overlay and 0 as alpha
Draw main panel
Draw back panel with a lower Z and 3/4 size
On Main panel use SizeTo to 3/4
On Main panel use MoveTo to 1/8 of actual pos
During this happens, start increasing the black overlay alpha to 255
Once it reach to 255
Increase Z pos in second panel so main panel goes back to it
Start increasing second panel to main size
Move the second panel to main coords
Decrease black overlay panel to 0
Remove black overlay once it reach 0

I think TheBigA panel uses PaintManual and paint it inside a poly, once it reach final pos, it removes the poly and starts drawing the main panel without PaintManual

[Tenrys]

[QUOTE=TehBigA;51128191]I just remember that in a 2D context the znear is basically 0 and you can't just rotate the context with a matrix. You do need 3D2D, but using the 3D2D vgui library is way overkill.

[editline]29th September 2016[/editline]

@Tenrys: Is this what you want?

[vid]https://puu.sh/rsbAo.webm[/vid]

Better video

[editline]29th September 2016[/editline]

If you are looking for something exactly like the Discord popup that isn't just a resize it could also be done the same way I do my stupid thing.[/QUOTE]

That method does look like it could work to do the kind of animation I want.