Personally, I prefer to do some MG animations. I have done a lot of animations using Unity. After I have some insights, I plan to write them down. I hope it can be helpful to everyone~
1. UI panel display animation:
When a UI panel is displayed, it is displayed in the form of animation. Effect diagram: 
Implementation steps: ①Mount the Animation component
on the main object of the UI panel ②Press the shortcut key Ctrl+6 to open the animation window and record the keyframes ③It will be done Drag and drop the animation clip to the Animation option of the Animation component, and ensure that Play Automatically is checked. Hide and display the UI panel, and you will see the panel displayed in the form of animation.
2. UI panel display animation + hide animation:
When a UI panel is displayed or hidden, it is represented in the form of animation. The renderings are as follows:
Implementation steps :
①Write a script named "AnimPlayer" and mount it on the panel object. The script content is as follows:
using UnityEngine;
[RequireComponent(typeof(Animation))]
public class AnimPlayer : MonoBehaviour
{
private Animation _anim;
private Animation anim => _anim ?? (_anim = GetComponent<Animation>());
[SerializeField] private string openAnim = "open";
[SerializeField] private string closeAnim = "close";
//播放“打开动画”
public void _____Open()
{
PlayAnim(openAnim);
}
//播放“关闭动画”
public void _____Close()
{
PlayAnim(closeAnim);
}
private void PlayAnim(string animName)
{
if (anim.isPlaying)
anim.Stop();
anim.Play(animName);
}
[ContextMenu("首帧状态")]
public void _____First() => _____Reset(anim, openAnim);
[ContextMenu("末尾帧状态")]
public void _____End() => _____Reset(anim, openAnim, 1f);
/// <summary>
/// Animation回到首帧或尾帧状态
/// </summary>
/// <param name = "anim" > Aniamtion </ param >
/// < param name="clipName">ClipName</param>
/// <returns>结果</returns>
public static bool _____Reset(Animation anim, string clipName, float normalTime = 0f)
{
normalTime = Mathf.Clamp01(normalTime);
AnimationClip clip = anim.GetClip(clipName);
if (!clip)
{
Debug.LogError("请检查ClipName！");
return false;
}
clip.SampleAnimation(anim.gameObject, clip.length * normalTime);
return true;
}
}
② To achieve the same effect as the hidden object, you can add a " CanvasGroup " component, change the Alpha to 0, and uncheck BlocksRaycasts . In the panel display animation, these two items need to be changed.
③ Do another panel hiding animation. The animation must change the Alpha value in the CanvasGroup component to 0, and uncheck BlocksRaycasts to avoid false triggering. ④In this way, it is OK to call the _____ Open and _____ Close functions in the AnimPlayer script . Note that the name of the script variable should match the name of the animation clip. ⑥The animation content can be made a little richer. This is the effect I made:
3. UI panel fusion animation:
The animation is connected, one mirror to the end, renderings:
Overview of the implementation steps:
①The animation clip should be echoed from the beginning to the end . ②Each
panel will do two animations, one to show the animation and the other to hide it. When the interaction is triggered, the hidden animation of the previous panel is played, and the display animation of the next panel is played at the same time.
③You can add an animation event to the end animation to trigger the next animation or the start animation of the next panel to first vacate a few frames, which needs to be adjusted according to the situation.
Points to note:
①Only suitable for process projects ②When the
animation is playing, it should be in an uncontrollable state, that is, the BlocksRaycasts of the CanvasGroup is unchecked
③The animation process is very boring, you will understand when you look at my keyframes /(ㄒoㄒ)/~~, but this is also the core step of the implementation
Fourth, UI object animation:
Independent elf, repeating its own small animation, renderings:
each dynamic object in the picture is repeating its own independent animation, of course, there is only one animation, if there are multiple animations, such as running, jumping, Natural transitions are also required, best implemented with an Animator state machine.
Implementation steps:
①The wrapMode of clip is changed to loop, so that the animation will be played repeatedly.
②Ensure that the Animation option of Animation has animation clips and Play Automatically is checked, so that when the scene is running, the animation will be played automatically.
Five, Unity animation editor skills:
1. Adjustment of animation frame spacing:
Press Ctrl+A shortcut to select all keyframes, and drag the blue vertical bar 
. 2. Animation frame reversal:
Press Ctrl+A shortcut to select all keyframes, and drag the left vertical bar Go to the front of the vertical bar on the right . 3.
Frame mode: ①Click
the record button, set the parameter value directly ②Right
-click the parameter, select "Add Key" And nonlinear animation transition: as shown in the figure: As can be seen from the animation in the figure, the default animation transition of Unity is not linear, but starts to accelerate, and decelerates at the end. It can be seen from the curve that the curve is generally not used, just Not much to say, if the animation transition is to be changed to linear, a simple method I generally use is to select the keyframe, right-click and select "Auto", as shown in the figure:
Six, animation production skills:
1. Micro animation
refers to the animation with a small animation range. Using micro animation can improve the user's visual experience and the production cost is low
. Example:
Compared with no animation:
2. Jump animation
refers to a buffer at the end of the animation, so that the parameter value is not directly To reach the target value, but first larger than the target value, and then smaller than the target value... and finally reach the target value. The use of jumping can make the animation effect more vivid, and is often used in entertainment and interactive projects, such as some casual games, and is less used in some government affairs platform software.
Example:
Larger jumping animation:
Smaller jumping animation:
No jumping animation:
3. Sequential animation
refers to the sequential animation of UI elements, which can improve the visual effect.
Sequential animations are generally better implemented in code or Dotween plugins, as the number of UI elements may be unknown.
If the number of elements is relatively small, and the number is fixed and not scalable, K frames can be used for temporary implementation.
Do a sequence animation in a few seconds:
renderings:
it will be better to superimpose a jump effect:
More sequential animation effects display:
superimposed beating:
Overlay jumps:
I will write here first, I will add new ideas later, thank you for watching~