In order to create a shining effect, we can use an image of a shining star. We also need a transparent background for this image. After we have placed the image in Extendable and Rotating Element, let's rescale the image and place it in our UI, where we want to have the shining effect. Set speed to 10, rotationSpeed to 30, and surviveTime to 1. Next, press the play button to see the shining effect. If our image is unique, or if we are not completely satisfied with the effect, we can tweak the variables until we reach a good effect that suits our needs. Otherwise, we can refer to the following section.

In this section, we will see how to improve our shining effect by making it appear and then disappear. To do this, we need to rewrite the code using a coroutine.

To begin, let's add a new public bool variable. Thus, we can set it in the Inspector. It will store information on whether we want to reverse the rotation or not. Therefore, we can add this line:

public bool reverseRotation;

In the Start() function, let's consider this line:

GetComponent<Image>().CrossFadeAlpha(0f, surviveTime, false);

Substitute it with these two:

GetComponent<Image>().CrossFadeAlpha(0f, 0f, false);
GetComponent<Image>().CrossFadeAlpha(1f, surviveTime, false);

The explanation of this can be found in the previous recipe, in the Fade in instead of fade out section.

Next, we have to double the time before the object is destroyed, so we rewrite the Destroy() function in this way:

GameObject.Destroy(gameObject, surviveTime*2);

Finally, at the end of the Start() function, we have to call our coroutine, even if we haven't created it yet, like this:

StartCoroutine ("fadeAway");

After we have done this, we need to write our coroutine. Hence, we can add this portion of code at the end of our script:

IEnumeratorfadeAway(){
  yield return new WaitForSeconds(surviveTime);
  GetComponent<Image>().CrossFadeAlpha(0f, surviveTime, false);
  if(reverseRotation)
    rotationSpeed = -rotationSpeed;
}

The first instruction waits for the initial fade effect to finish. Then, in the second line of the script, we launch another fade effect to make our extendable and rotating UI element fade away. In the if statement, we check whether the variable that we have set in the Inspector is true, and if it is, it will reverse the sign of the rotationSpeed variable in order to change the direction of rotation.

Let's save the script and finally test whether everything works as expected.

We are not limited to using only one axis of rotation. In fact, we can substitute the following line with the next one:

rectTransform.Rotate (0, 0 , Time.deltaTime * rotationSpeed);

Here is the line that we can use instead of the preceding one:

rectTransform.Rotate (Time.deltaTime * rotationSpeed, 0 , Time.deltaTime * rotationSpeed);

In this case, we are rotating the object along the x axis as well. But feel free to test different combinations as you wish, such as this one:

rectTransform.Rotate (Time.deltaTime * rotationSpeed, Time.deltaTime * rotationSpeed , 0);

In the preceding case, we are rotating only on the x and y axes.

We may want to make the effect more customizable in order to get very nice variations. To do this, we can add more variables to be set in the Inspector, and control each axis of rotation. Along with the Changing the speed for each axis subsection in the There's more… section of the previous recipe, this allows us to gain full control over the effect. If we use our imagination, the number of beautiful effects that we can create is endless.

Let's start! First of all, we have consider the following variable:

public float rotationSpeed;

Substitute it with these:

public float rotationSpeedX;
public float rotationSpeedY;
public float rotationSpeedZ;

By doing this, we can control each axis independently of the others, whereas this didn't happen in the previous section.

Now, let's look at the following line in the Update() function:

rectTransform.Rotate (0, 0, Time.deltaTime * rotationSpeed);

Substitute it with this one, in which the speed variable is different for each axis:

rectTransform.Rotate (Time.deltaTime * rotationSpeedX, Time.deltaTime * rotationSpeedY , Time.deltaTime * rotationSpeedZ);

Save the script, and try different numbers along all the rotation speed variables. Of course, don't forget to use a nice image. Refer to the next section to get an idea on how to use this script.

If we made the changes in the previous section, creating a butterfly should not be a problem. In fact, simply use a symmetric image of a butterfly and set both rotationSpeedX and rotationSpeedZ to 0. Now, just set a positive number for rotationSpeedY, maybe more (around 300). Remember that the higher the value, the faster the butterfly's wings flap.