To change the FOV smoothly, we will need to create an animation that shows a gradual change in the Actor over time. To do so, return to Event Graph of the FirstPersonCharacter Blueprint.
Press Alt and click on the Pressed output execution pin of the InputAction Zoom node to break the connection. Drag a new wire out from Pressed to empty grid space. Search for and select Add Timeline to add a timeline node. A timeline will allow us to change a value (such as the FOV on a camera) over a designated amount of time.
To change the value within the timeline, double-click on the Timeline_0 node. This will open up the Timeline Editor. You will see four buttons in the top-left corner of the Editor. Each of these will add a different kind of value that can be changed over the course of the timeline. Because FOV is represented by a numerical value, we will want to click on the button with the f label (Add Float Track). Doing so will add a track to the timeline and prompt you to name this track. Let's label this as Field Of View. We will now have to edit the values over different time intervals, as shown here:
To accomplish this, hold down Shift and click on a point that is close to the 0.0 point on the graph. You will see the Time and Value fields appear in the top-left part of the graph. These allow precision tuning of our timeline. Ensure that the time is set to exactly 0.0 and set the value to 90, our default FOV. If the point disappears from the view, you can use the two small buttons in the top-left of the graph to zoom into the graph so that the point becomes visible.
We want the zoom animation to be quick, so at the top of the Timeline Editor, find the field next to Length and change to value to 0.3 to limit the range of the animation to 0.3 seconds. Now, press Shift and click at the end of the light gray area of the graph. Fine-tune the fields to 0.3 for Time and 45 for Value:
Notice how the line that represents the value gradually slopes down from 90 degrees to 45 degrees. This means that when this animation is called, the player's FOV will smoothly transition from being zoomed out to being zoomed in, rather than a jarring switch between the two values. This is the advantage of using timelines over changing the values directly with a set value Blueprint.
Now, return to Event Graph. We want to connect our timeline into our set FOV operation, just like what is shown in this screenshot:
Drag the new Field Of View output pin to the Field Of View field in the Set node, overriding your value of 45. Now, link the Update output execution pin from the Timeline node to the Set node. This sets up the Functions so that every time the FOV value is updated, it passes the new value to the Set Field Of View Function. Because of our timeline setup, many values between 90 and 45 will be passed to set, enabling a gradual transition between the two extremes over 0.3 seconds.
Finally, we want the zooming to end when the right mouse button is released. To do this, drag the Released pin from the InputAction Zoom node to the Reverse pin of the Timeline node. This will cause the timeline animation to play in reverse order when the right mouse button is released, ensuring that we have a smooth transition back to our normal camera view. Also, remember to apply a comment to the node group so that you remember what this functionality does if you revisit it later.
Now, compile, save, and play to test the transition in and out of your zoom view by holding down the right mouse button.