Personnellement, je préfère faire des animations MG. J'ai fait beaucoup d'animations avec Unity. Une fois que j'ai quelques idées, je prévois de les écrire. J'espère que cela pourra être utile à tout le monde ~
1. Animation d'affichage du panneau d'interface utilisateur :
Lorsqu'un panneau d'interface utilisateur est affiché, il s'affiche sous forme d'animation.Diagramme d'effet : Étapes de 
mise en œuvre : ①Montez le composant Animation
sur l'objet principal du panneau d'interface utilisateur.②Appuyez sur la touche de raccourci Ctrl+6 pour ouvrir la fenêtre d'animation et enregistrer l'image clé. ③Ce sera fait Faites glisser et déposez le clip d'animation dans l' option Animation du composant Animation et assurez-vous que Lire automatiquement est coché.Masquez et affichez le panneau de l'interface utilisateur, et vous verrez le panneau affiché sous forme d'animation.
2. Animation d'affichage du panneau d'interface utilisateur + animation de masquage :
Lorsqu'un panneau d'interface utilisateur est affiché ou masqué, il est représenté sous forme d'animation. Les rendus sont les suivants :
Étapes de mise en œuvre :
①Écrivez un script nommé "AnimPlayer" et montez-le sur l'objet du panneau. Le contenu du script est le suivant :
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;
}
}
② Pour obtenir le même effet que l'objet caché, vous pouvez ajouter un composant " CanvasGroup ", changer l' Alpha à 0 et décocher BlocksRaycasts . Dans l'animation d'affichage du panneau, ces deux éléments doivent être modifiés.
③ Faites une autre animation de masquage de panneau. L'animation doit changer la valeur Alpha dans le composant CanvasGroup à 0, et décochez BlocksRaycasts pour éviter les faux déclenchements. ④De cette manière, il est possible d'appeler les fonctions _____ Ouvrir et _____ Fermer dans le script AnimPlayer . Notez que le nom de la variable de script doit correspondre au nom du clip d'animation. ⑥Le contenu de l'animation peut être un peu plus riche. Voici l'effet que j'ai créé :
3. Animation de fusion du panneau d'interface utilisateur :
L'animation est connectée, un miroir à la fin, rendus :
Aperçu des étapes de mise en œuvre :
①Le clip d'animation doit être répété du début à la fin . ②Chaque
panneau fera deux animations, une pour montrer l'animation et l'autre pour la masquer. . Lorsque l'interaction est déclenchée, l'animation masquée du panneau précédent est lue et l'animation d'affichage du panneau suivant est lue en même
temps.③Vous pouvez ajouter un événement d'animation à l'animation de fin pour déclencher l'animation suivante ou l'animation de début du panneau suivant pour libérer d'abord quelques images, qui doivent être ajustées en fonction de
la situation . le CanvasGroup est décoché ③Le processus d'animation est très ennuyeux, vous comprendrez en regardant mes images clés /(ㄒoㄒ)/~~, mais c'est aussi l'étape centrale de l'implémentation
Quatrièmement, animation d'objet d'interface utilisateur :
Elfe indépendant, répétant sa propre petite animation, rendus :
chaque objet dynamique de l'image répète sa propre animation indépendante, bien sûr, il n'y a qu'une seule animation, s'il y a plusieurs animations, telles que courir, sauter, des transitions naturelles sont également requises , mieux implémenté avec une machine d'état Animator.
Étapes de mise en œuvre :
①Le wrapMode du clip est changé en boucle, de sorte que l'animation sera lue à plusieurs reprises.②Assurez-
vous que l'option Animation d'Animation a des clips d'animation et que Lire automatiquement est coché, de sorte que lorsque la scène est en cours d'exécution, l'animation sera lue. automatiquement.
Cinq, compétences de l'éditeur d'animation Unity :
1. Ajustement de l'espacement des images de l'animation :
appuyez sur le raccourci Ctrl+A pour sélectionner toutes les images clés et faites glisser la barre verticale bleue 
2. Inversion de l'image de l'animation :
appuyez sur le raccourci Ctrl+A pour sélectionner toutes les images clés et faites glisser la barre verticale 3.
Mode image :
①Cliquez sur le bouton d'enregistrement, définissez directement la valeur du paramètre Et transition d'animation non linéaire : comme indiqué sur la figure : Comme le montre l'animation de la figure, la transition d'animation par défaut de Unity n'est pas linéaire, mais commence à accélérer, et décélère à la fin. On peut voir sur la courbe que la courbe n'est généralement pas utilisée, juste Pas grand chose à dire, si la transition d'animation doit être changée en linéaire, un la méthode simple que j'utilise généralement consiste à sélectionner l'image clé, à cliquer avec le bouton droit de la souris et à sélectionner "Auto", comme indiqué sur la figure :
Six, compétences en production d'animation :
1. La micro-animation
fait référence à l'animation avec une petite plage d'animation. L'utilisation de la micro-animation peut améliorer l'expérience visuelle de l'utilisateur et le coût de production est faible
. Exemple :
par rapport à l'absence d'animation :
2. L'animation de saut
fait référence à un tampon à la fin de la animation, de sorte que la valeur du paramètre ne soit pas directement Pour atteindre la valeur cible, mais d'abord supérieure à la valeur cible, puis inférieure à la valeur cible... et enfin atteindre la valeur cible. L'utilisation du saut peut rendre l'effet d'animation plus vif et est souvent utilisée dans les projets de divertissement et interactifs, tels que certains jeux occasionnels, et est moins utilisée dans certains logiciels de plate-forme d'affaires gouvernementales.
Exemple :
animation de saut plus grande : animation de saut
plus petite :
pas d'animation de saut :
3. L'animation séquentielle
fait référence à l'animation séquentielle des éléments de l'interface utilisateur, ce qui peut améliorer l'effet visuel.
Les animations séquentielles sont généralement mieux implémentées dans le code ou les plugins Dotween, car le nombre d'éléments d'interface utilisateur peut être inconnu.
Si le nombre d'éléments est relativement petit et que le nombre est fixe et non évolutif, les trames K peuvent être utilisées pour une mise en œuvre temporaire.
Faire une animation de séquence en quelques secondes :
rendus :
il vaudra mieux superposer un effet de saut :
Affichage d'effets d'animation plus séquentiels :
battements superposés :
Sauts superposés :
J'écrirai ici d'abord, j'ajouterai de nouvelles idées plus tard, merci d'avoir regardé ~