Animations and Blur

Since Blur is the new comic sans, I want to hop on board with it.
I’ve been wanting to create blur backgrounds and animate numbers/bars when going up/down.
Could anyone point me in the right direction so I can achieve this?
Thank you very much.

I wouldn’t mind some insight on this as well, as I’ve barely done any UI design and would be interested in how different people do it.

Frame blurring - use the pp/blurscreen material and draw it over anything to make a blur. Though you have to change the $blur float on the material and then recompute it:

[lua]
local matBlurScreen = Material(“pp/blurscreen”)

local blurlevel = 1.5

local frame = vgui.Create(“DFrame”)
frame:SetTitle(“Blur Frame!”)
frame:SetSize(500, 500)
frame:Center()
frame:MakePopup()
frame.Paint = function(me, w, h)
local x, y = me:LocalToScreen(0, 0)

if (blurlevel > 0) then
	surface.SetDrawColor(color_white)
	surface.SetMaterial(matBlurScreen)

	for i = 1, 1, 0.33 do
		matBlurScreen:SetFloat("$blur", math.Clamp(blurlevel, 0, 10) * i)
		matBlurScreen:Recompute()
		render.UpdateScreenEffectTexture()
		surface.DrawTexturedRect(-x, -y, ScrW(), ScrH())
	end

	surface.SetDrawColor(100, 100, 100, 150)
	surface.DrawTexturedRect(-x, -y, ScrW(), ScrH())
end

surface.SetDrawColor(color_black)
surface.DrawOutlinedRect(0, 0, w, h)

end

local level = vgui.Create("DNumSlider", frame)
level:SetMinMax(0, 10)
level:SetValue(blurlevel)
level:SetText("Blur intensity")
level:Dock(TOP)
level.OnValueChanged = function(me, val)
	blurlevel = val
end

[/lua]

Result:

https://my.mixtape.moe/zymcob.webm[/vid]

Making a label with numeric text going up/down progressively instead of making it instant - I used Lerp in my example but if you want a linear way of animating numbers, set “ease” to 1 (

Panel:NewAnimation) OR use math.Approach.
Note that this example will not work on non-numeric labels

[lua]
local meta = FindMetaTable(“Panel”)

local function NumberThink(anim, panel, fraction)
if (!anim.StartNumber) then anim.StartNumber = tonumber(panel:GetText()) end

local new = math.Round(Lerp(fraction, anim.StartNumber, anim.Number))
panel:SetText(new)

end

– Make the panel’s text go from the first value to “num” in “length” seconds, after “delay” seconds.
– Refer to this page http://wiki.garrysmod.com/page/Panel/NewAnimation to see how “ease” works
– Will not work if you call this on Labels that aren’t numeric; i.e “Money: 0”
function meta:NumberTo(num, length, delay, ease, callback)
if (self:GetText() == tostring(num)) then
return end

local anim = self:NewAnimation(length, delay, ease, callback)
anim.Number = num
anim.Think = NumberThink

end

local frame = vgui.Create(“DFrame”)
frame:SetTitle(“Number animation!”)
frame:SetSize(500, 500)
frame:Center()
frame:MakePopup()

local lbl = vgui.Create("DLabel", frame)
lbl:SetFont("DermaDefaultBold")
lbl:SetText("Money:")
lbl:Dock(TOP)

local lblmoney = vgui.Create("DLabel", frame)
lblmoney:SetFont("DermaLarge")
lblmoney:SetContentAlignment(5)
lblmoney:SetText("0")
lblmoney:SetColor(color_white)
lblmoney:Dock(FILL)
lblmoney:NumberTo(500, 3, nil, 1) -- Animate to 500 in 3 seconds
lblmoney:NumberTo(400, 1, 5, 1) -- Animate to 400 in 1 second, after 5 seconds elapsed

[/lua]

Result:
[vid]https://my.mixtape.moe/hldpqj.webm

Got it, could you provide an example if I was to draw this on a HUD?

there was a extra function for HUDPaint, look it up :stuck_out_tongue: