Through the study of the previous three lessons, we have mastered the method of making animation, although the animation produced is still very crude. Do you still remember that when you were learning the basics, you were exposed to a single color block for a long time? That hasn't affected everyone's current level of performance. Similarly, soon we will start making more detailed animations. But before all this comes, everyone must learn some necessary design thinking. The so-called design thinking refers to the planning and considerations before making animations. This planning includes many aspects.
First, let’s talk about the organization of layers. The final finished animation does not contain layer information. The layers mentioned here only refer to those in production. For animations produced using layer position changes, an obvious problem is that the layers must be arranged reasonably , because the smallest unit of movement is the layer, so if you need to make multiple objects with different motion trajectories, they must Must be distributed in different layers. You also need to consider the distance of movement in advance. The size and placement of the image need to leave enough space for movement. This is one of them.
The second is to consider whether it will intersect with other layers, and how to handle the intersection, who will cover whom, that is, the hierarchical arrangement of the layers. The following figure lists three ways of intersecting. The two on the far left are When both layers are at 100%, green covers red. The other two show the different coverage effects of different layers at 50% opacity. If green covers red, then the intersection will be greener, and vice versa. This is all in the normal blending mode. If you choose other blending modes such as overlay, you must pay more attention to the layer.
The above mentioned are all technical issues, now let’s talk about plot issues. Generally speaking, if an object is always moving in the image, there is no need to account for it. But if the object was not in the picture originally but entered the picture later, or was originally in the picture and later moved out of the picture, you need to explain the appearance and disappearance of the object. This explanation is a transition, allowing the viewer to have a more natural psychology. change. A common technique is to make objects gradually appear (also called fade-in) or gradually disappear (also called fade-out). As shown in the figure below, it demonstrates the comparison of the effect of fading in and fading out in the same text movement.
You can move the mouse into the playback area to watch the actual animation effect, and move the mouse out of the playback area to stop playback. Through comparison, I believe everyone will feel that the effect of adding fade-in and fade-out processing is better.
In addition, the loop setting is also a plot issue. We have actually mentioned this before, that is, in some situations, infinite loop animation can be used, while in other situations it is not suitable. For example, if the animation of a column title text fading in is repeated continuously, it will make the entire web page look messy and make viewers feel uncomfortable. The most suitable approach at this time is to play it once, so that the effect can be displayed without affecting the overall web page. A cycle set to 2 to 3 times is generally acceptable, and any more is not good.
However, animations that only play once are best placed at the top of the web page so that they can be seen as soon as you enter the web page. If placed at the bottom of the web page, the animation may have finished playing by the time the viewer reaches that point. In that case, it would be meaningless to create animations, and it would be better to use static pictures instead.
It should be noted that the animated GIF image will be played again every time it is called. If some people already have knowledge of web page production, they can use this property to set corresponding actions in web page production software. For example, this is how you move the mouse here to watch the animation of the example. The animation always starts from the beginning after each move. In this way, even if the animation is played only once, it can be played multiple times on the web page. Don’t worry if you don’t have knowledge about web page production. This will not affect our subsequent animation learning. .
An important issue to consider with regard to fade effects that look great is that browsers can be set to disable animations. At this time, the animation will only display the first frame of the animation. Then an animation similar to the "quietly coming and going" above will be blank in the web page, because the first frame is originally blank. This can easily cause misunderstandings among viewers.
Maybe you will think that no one will deliberately turn off the animation display, but since this factor cannot be ruled out, we need to consider the visitor's situation from the broadest level. In the overall layout of the web page, avoid using fade animations in important text or indicator parts. After placing the animation into the web page, it is best to manually turn off the animation playback to check if there is any problem. In addition to turning off the animation playback, if the visitor presses the ESC key when the page is displayed, the animation playback will also be interrupted, and the screen will stay at the moment of interruption.
If you want to take care of visitors who are prohibited from playing animations and those who are allowed to play animations at the same time, and strike a balance between the two, then you should follow a principle in the production of animations, that is, the main part should not move and the modified parts should be animated. As shown in the picture below, the text itself is not animated, only the edges of the text are animated. In this way, even if the still animation is played or interrupted during playback, it will not affect the viewer's understanding of the content.
However, as long as the content can be accurately reflected at all times and the disappearance of the text or excessive deformation is avoided, the main text can also be moved.
The content described in this lesson is not related to the technology of animation production. However, when you want to apply animation to web pages, you must consider the production and performance methods of animation from a broad perspective. Simply learning these contents is a bit boring. Just leave an impression on everyone and apply it in future productions.
This assignment is to create the animation of "Quietly Come and Go". In addition, the following two derived animations are also produced.
In the next section, we introduce how to express fade-in and fade-out in animation.