Let’s talk about the homework of the last class first. The three animations we asked everyone to make all have fade-in and fade-out effects, but if you look closely, you will find differences.
The first animation gradually appears as the text moves. The text is most obvious when it is halfway through the movement, and then gradually disappears as it moves. If you use frame transition to make it, you need to determine 3 key frames first. The text in the first frame should be at the right end with an opacity of 0% (or hide the layer); the text in the second frame should be in the center with a transparency of 100%. ;The text in frame 3 is at the far left, and the opacity returns to 0% (or hides the layer). Approximately as shown below.
Then transition between frame 12 and frame 23 respectively, adding about 5 frames each. The frame delay time can be set by yourself. In this animation, the text fades in and out simultaneously with the movement. Transparency changes throughout the move.
In the second animation, the text is still when it fades in at the far right end, and starts to move after it is fully visible. After moving to the far left, it fades out while still. Then its key frames should be 4 frames, roughly as shown in the left picture below. Just set the transition between these 4 frames respectively.
Although the specific number of transition frames can be set arbitrarily, from a design perspective, the transition between frame 12 and frame 34 should be less, about 3 to 4 frames. There should be relatively more transitions between frames 23, about 6 to 7 frames. This is because when moving over the same distance, the fewer the number of frames, the faster the movement per frame, and the higher the number of frames, the slower the movement. As shown in the right picture below, it is the movement distance of each frame of 3 frames, 4 frames, and 7 frames. Theoretically, the higher the number of frames, the richer and more detailed the animation will be.
Our animation mainly displays text content, so that viewers can see it clearly. If you set the number of fade-in and fade-out frames to be very large and the number of moving frames to be very small, it will create a situation where the text fades in very delicately, then moves quickly, and then fades out very delicately. Perhaps the viewer can still understand the content of the text, but this presentation method is inappropriate. Although sometimes this can also become an unconventional expression technique.
Now we've created two animations on the same subject, both with fade and move effects, but they both have expressive shortcomings. The disadvantage of the first animation is that the opacity transition is too long. The text is only fully visible in one frame during the entire animation. It was semi-transparent before and after. This does not emphasize the importance of the text and may make it difficult for the viewer to read.
You may think that this problem does not exist, because the text in the first animation looks very clear. But we use 100% opacity as the final display state. In this way, according to the 5-frame transition, each frame has an increment of 20%. That is, although the first frame is 0%, the second frame reaches 20%, so there is basically no problem in reading. If in another situation, the final opacity is not 100%, but only 30% or lower, the opacity increment in each frame becomes very small, so although the final opacity of 30% is enough It is necessary for reading, but the fade-in process will be difficult to see clearly and affect reading. You can set the final opacity to 30%, 10%, etc. and try again.
In contrast, the second animation avoids this shortcoming. It makes the fade-in and fade-out separately. It only starts to move after the fade-in is completed (the text reaches its final appearance state). This ensures that the text always maintains its original shape during the movement. The final manifested state, whether it is 100% or 30% or whatever. However, it also has another disadvantage, that is, the text is stationary at the starting point and end point, which destroys the continuity of movement.
Now we want to combine the two together to create an animation that has a fade-in and fade-out effect and can also better display text. The idea is to keep the text in the first animation moving throughout the whole process, but compress the fade-in and fade-out into a few frames at the beginning and end, so as to ensure that the text maintains its final appearance during most of the movement. As shown in the left picture below, the two-way arrows represent the fade-in and fade-out processes. The upper half shows the first animation. It can be seen that the sum of fade-in and fade-out equals the entire animation process. Shown below is our current idea, with the fade in plus fade out taking up half or less of the entire sequence. This allows the text to complete most of its movement in its final appearance.
The key frame setting is as shown in the right picture below. Just set the transition at the time of two adjacent frames. Although the text cannot be seen in frame 1, you can know that it is located at the far right end of the screen. In frame 2, all the text has been displayed and the position has moved slightly to the left. In this way, the transition of frame 12 completes the entire change in opacity and completes a small part of the movement at the same time. After that, the text moves a certain distance (frame 23 transition), and then starts to fade out while moving near the left end (frame 34 transition), which is the opposite of fading in.
I wonder if you have thought of another problem that will be encountered in the production of this animation, that is, how to ensure that the movement distance of frame 12 corresponds to the distance of frame 23. The correspondence here does not mean equal, but means that the distance moved by each frame is the same. Assume that the transition of frame 12 is 3 frames (ABC), and the transition of frame 23 is 6 frames (DEFGHI), that is, 1ABC2DEFGHI3, a total of 12 frames. Then the movement distance of the text in each of these 12 frames should be equal to achieve a better movement effect. But people often make the effect of going fast in front and going slow in the back, or going slow in front and going fast in the back, because they don’t judge the distance of movement enough. This problem is difficult to solve. Unless you use a ruler to accurately calculate the distance, you can only try several times to find the most appropriate number of transition frames.
What you need to master in this lesson is how to handle fade-in and fade-out when combined with movement. The best way is to use a shorter number of frames to complete the fade in and out while continuing to move, while keeping the movement distance of each frame similar. This operation is a bit cumbersome, but don't worry, there will be a solution soon.
anisample01.rar
We provide the source files for making the third animation here ( anisample01.rar ), it’s not that I think everyone can’t do it, but in order to ensure the unity of teaching, we need to use this animation to continue learning. You can also use your own work. There is no homework for this class, but there is a thinking question, which is how to create the animation as shown below while keeping the original 20 frame settings of anisample01.psd unchanged.
In the next section we introduce the limitations of transition frame animation .