Tutorial: Text fade in, fade out, fade in + out

Hi there,

I wanted to post a simple example for text fade in, fade out, and fade in + out.
Downloadable file: mega.nz/#!ilYzFSqI!Sx5ug_pKlJK- … klV_BgkQyI
(feel free to adjust and use this however you like in your project)

Now, the code and explanation:

[size=150]Fade in:[/size]

[size=150]Fade out:[/size]

[size=150]Fade in+out:[/size]

I have used sine waves (sin function) for this example as it might be one of the simplest ways to write fade in+out.

[size=150]How it works:[/size]
Fade in works by increasing the variable “Value” by 0.1*TimeDelta() in each cycle, until it reaches 0.5. TimeDelta() is there to ensure the same speed on every computer. Alternatively we can use timers, but not as reliable.

So, value goes from 0 to 0.5 in fade in.

This is because 0 multiplied by anything will always give us 0 (so text will be completely faded out, 0 visibility), but sin(0.5*Pi) will give us 1 (full value, top part of the wave if visualized).

So , if we have sin(0Pi) to ending with sin(0.5Pi) we would get text opacity from 0 to 1.
But, text opacity goes to 255, so we need a value from 0 to 255. How do we get that? We multiply the result by 255.

So, now we have:
start point: sin(0Pi)255=0255=0
end point: sin(0.5
Pi)255=1255=255

So, our range is now from 0 to 255, a full fade in!

We used 3.14159 for Pi value, so the full function we use for text opacity is:

sin( Variable(Value)*3.14159 )*255

Note: There will be some inaccuracy as Pi is not exactly 3.14159 but an infinite chain of numbers.

Fade out works the same as fade in but we inverted the condition and starting value. So now “value” goes from 0.5 to 0. Note that we did not need to invert conditions, but could have used value from 0.5 to 1 instead, because at this part of the wave, value drops down from 1 to 0 (0.5pi gives 1, but 1pi gives 0).

Fade in+out
For this example we are using more of the wave, both the part where it goes from 0 to 1 (rises) and the part where it goes from 1 to 0 (falls) so we have a full text fade in+out done very simply.

So, we increase “Value” from 0 to 1.

When value is:
0 > sin(0Pi)=0
0.5 > sin(0.5
Pi)=1
1 > sin(1*Pi)=0

2 Likes