To create a swipe transition effect, follow these steps:

1. Open a scene.
2. Create an Image in the Hierarchy. To do so, go to Game Object | UI | Image menu on the top of the screen.
3. Image and Canvas game objects will be created in the Hierarchy.
4. Select the Image game object and set its name to BlackScreen.
5. Right-click on the Canvas game object and choose Create Empty to create an empty game object.
6. Set the name of the newly created game object to FadeAnimator. This object will animate the effect.
7. Set the Anchor Preset of the BlackScreen and FadeAnimator game objects to stretch in both X and Y coordinates the same way as we did in the previous recipe.
8. Select the Canvas game object and add a Canvas Scaler component to it. We will need it to scale our effect when players change the screen resolution in our game.
9. Set the UI Scale Mode in the Canvas Scaler component to Scale With Screen Size to scale the whole canvas, depending on the screen resolution.
10. Set the Left, Top, Right, and Bottom position parameters to 0 in both the BlackScreen and FadeAnimator game objects the same way as we did in the previous recipe.
11. Set the color of the Image component in the BlackScreen game object to fully opaque black.
12. Parent the BlackScreen game object to the FadeAnimator game object in the Hierarchy.

13. Make sure the Scene View is set to 2D. Set the Right position parameter in the BlackScreen game object to –20 pixels and the Left position parameter to a number bigger than your current Game View screen resolution. The BlackScreen game object should be visible as a very thin strip on the right of the Canvas in the Scene View, as shown in the following screenshot:

14. Select the FadeAnimator game object and go to Window | Animation to open the Animation View.
15. Create a new Animation Clip by clicking on the Create button. Name the clip Alpha_0; this will be our default animation.
16. Make sure the record button is pressed and select the BlackScreen game object. Click on the Left position input field in the Inspector and enter the same value again. It should insert the key frame for all position values. Disable the BlackScreen game object; it should also create a key frame. This Animation Clip should only have one key frame on the frame 0; delete any unwanted key frames.
17. Select the FadeAnimator game object again and create another Animation Clip. Name it Alpha_100.

18. Make sure the record button is pressed and select the BlackScreen game object. Set the Right and Left positions to 0. Enable the BlackScreen game object (make sure a Game Object.Is Active property shows in the Animation View, and, if not, click on the game object's enable checkbox twice). This Animation Clip should also have only one key frame on the frame 0; remove any other key frames. The whole Game View should show a black screen.
19. Select the FadeAnimator game object again and create another animation. Name it FadeIn. With the record button pressed, select the BlackScreen game object and create two key frames: one on frame 0 and one on 1-second mark. The BlackScreen game object's position on frame 0 should be set to the same values as in the Alpha_0 animation (Right to –20 and Left to a number bigger than the Game View screen resolution). On the 1-second frame, the position should be set to Left 0, Right 0. Also enable the game object in both frames. When you play the animation in the Animation View, you should see the BlackScreen game object swipe from right to left (from a clear game screen to a complete black screen).
20. Select the FadeAnimator game object again and create another animation. Name it FadeOut. With the record button pressed, select the BlackScreen game object and create two key frames: one on frame 0 and one on 1-second mark. The position of the BlackScreen game object in frame 0 should be set to Left 0 and Right 0. In the 1-second mark frame, the Left position should be set to –20 and the Right position to a number higher than the Game View's screen resolution. Also make sure to enable the BlackScreen game object in both key frames. When you play the animation in the Animation View, you should see the BlackScreen game object swipe from right to left (from a full black screen to a clear game screen).
21. Open the Animator Controller assigned to the FadeAnimator game object.
22. Create a Trigger parameter and call it Fade.
23. Create a loop of transitions:

•   Alpha_0 | FadeIn with the trigger Fade set as condition and Has Exit Time set to false
•   FadeIn | Alpha_100 with no conditions and Has Exit Time set to true
•   Alpha_100 | FadeOut with the trigger Fade set as condition and Has Exit Time set to false
•   FadeOut | Alpha_0 with no conditions and Has Exit Time set to true

24. Set every Transition Duration to 0.

25. Write a script to set the Fade Trigger parameter in the Animator Controller. In this example, we use the same script as in the previous recipe. Whenever player presses the space bar button, the Fade Trigger is set. You can find the Fade.cs script in the provided example Unity project in the Chapter 03 2D and user interface animationRecipe 05 Creating a fade out - fade in transition with the animation viewScripts directory:

if (Input.GetKeyDown(KeyCode.Space))
{
     animator.SetTrigger("Fade");
}

26. Attach the script to the FadeAnimator game object.