Achieving smooth transparency and glowing

Generally when you want something to flash on and off in a smooth fashion you have a duration that you want an icon to fade in and out at. You then tend to have a timer that increments up to the fade value and when it hits the fade value begins to decrement again down to zero. See the code below for an example of this in action

static const f32 totalFadeTime = 4.0

if (m_fadeUp)
{
	timer += delta;
	if (m_timer > m_revealTime)
	{
		timer = m_revealTime;
		m_fadeUp = false;
	}
}
else
{
	timer -= delta;
	if (timer < 0.0f)
	{
		timer = 0.0f;
		m_fadeUp = true;
	}
}

const f32 alpha = timer / totalFadeTime;

icon->SetAlpha(alpha);

The approach above uses linear interpolation so the fade looks quite even and bland. To get a nicer smooth fade you can use sin or cos alongside the linear value to give you a smoother looking effect. This is because of the curve of cos is not linear cos curve. Add the following lines to achieve this effect:

const f32 alpha = timer / totalFadeTime;
const f32 newAlpha = (cosf(TwoPi * alpha) - 1.0f) * -0.5f;
icon->SetAlpha(alpha);

Unfortunately I don’t have an example of this on hand to show but I does the trick nicely.