Creating an extendable element with a final fade effect
In this recipe, you will learn how to create an extendable UI element with a final fade effect. These kinds of decorative elements are useful in the background with smaller graphics such as nice images or simple shapes. Often, they are used in main or pause menus in order to make the background dynamic and give more life to the menu. Additional techniques about how to animate the menu itself can be found in Chapter 6, Animating the UI.
How to do it...
First of all, we need to create a UI element. In this example, we will use a square, but you can also use a decorative star or another shape that you prefer. To do this, right-click on the Hierarchy panel and then navigate to UI | Image. Rename it to Extendable Element. Of course, it is possible to resize, change the source image, and place an image that we have chosen.
Next, we need to create a script that extends our image on the screen and gradually decreases the alpha channel of the color...
