Are there any websites that display user interface animations?

Animation under Blender

When implementing complex animations, a storyboard or script can be used to reduce the project implementation time and to avoid animation errors. If, accordingly, only primitive linear movement sequences are to be implemented, textual and graphic fixations of the animation are usually not necessary, but rather a hindrance with regard to the work process. In this specific case, writing a script and implementing a storyboard is not done because the animations will be primitive. As already described, the virtual monkey head should rotate around all three main axes. The aim is to be able to use and control the animations under Unity.

The animation editor under Blender supports the so-called keyframe process. With this method, so-called key positions (keyframes) are set in the temporal animation grid, which reflect a rough description of the movement. Between these key positions, the computer automatically calculates the necessary intermediate movements of the grid in the temporal animation grid when there are changes in transformation. Keyframes can be used for e.g. B. geometric transformations, material color changes and transparency changes can be set and animated accordingly. The animation editor has a variety of functions for the animation implementation that cannot be discussed in more detail here.


The creation of an animation


The 3D editor should be in object mode [1] so that the entire virtual monkey head can be animated. The timeline editor [3] of the animation editor should be displayed in a window section of the GUI in order to be able to set the controls and the keyframes [2]. The duration of the animation can also be specified here (number of frames [4]). The animation frame rate can be set under the render menu [6]. Figure 7 visualizes the areas of the GUI again.

The standard setting for the animation frame rate is 24 frames per second. Should the virtual monkey head z. For example, if you rotate around one of the main axes in 10 seconds, the parameter for the end of the animation must be set to 241 frames, because the counting starts from frame 1.


Figure 7: The animation editor timeline


Figure 8 shows the selected 3D object, the geometric transformation data of which is displayed in the Properties menu [3] of the 3D editor [1]. The virtual head is now ready to be animated.

The time grid, visualized in Figure 9, should be on the first frame position [1]. For creating the first Keyframes the mouse pointer should be over the 3D object and the I key should be pressed Insert Keyframe Menu is displayed showing the selection of possible animation targets. In the specific case, the animation goal becomes rotation selected [2] and the Euler angle of the z-axis should be 0Â ° [3]. With the help of the keyframe selector [1], which should be assigned the parameter value 120, the animation editor jumps in the time grid to the keyframe 120. The Euler angle of the z-axis is then set to 180Â ° [3] and then the i key pressed again. The menu item is again used as the animation target rotation elected. Ultimately, the temporal jump to keyframe 241 enables the end frame to be set to 360Â °, which corresponds to a full rotation around the z-axis.

Figure 10 illustrates the three keyframes [1 -> 3] and their temporal positions in the animation grid. By default, the animation speed is slowly increased to a maximum value and then decreased again at the end of the animation. This animation principle will Fade in and fadeOut called. But this is not always desirable. In our case, the virtual monkey head should move linearly evenly. Figure 11 shows the active graph editor under Blender [1]. About that Key user interface [2] becomes the Interpolation mode [3] set to linear. This process erases that Fade-in or. Fade out Behavior of object movement. The later successful animation import under Unity requires that the animations are given meaningful names. The NLA editor visualized in Figure 12 enables the animation to be named [1]. These names will also be visible under Unity after importing. The work steps described for rotating the object around the Z axis must be carried out repeatedly for the other two axes of rotation. The implementation of the work steps is completely identical, so that the description is not necessary. The virtual head including animation data can be exported at this point in time, which will be specifically described in the next section of the text.


Figure 8: The Properties menu
Figure 9: Set keyframes
Figure 10: The keyframes of the animation

Figure 11: Graph Editor
Figure 12: The NLA editor

Blenders export function