【ユニティノート】UIアニメーションのやり方

個人的にはMGのアニメーションが好きです。Unityを使ってたくさんのアニメーションをやっています。洞察が得られたら、書き留めておくつもりです。皆さんのお役に立てば幸いです〜


1. UIパネル表示アニメーション:

UIパネルが表示されると、アニメーション形式で表示されます。効果図:画像の説明を追加してください
実装手順:
①UIパネルのメインオブジェクトにアニメーションコンポーネントを
マウントする②ショートカットキーCtrl + 6を押して、アニメーションウィンドウを開き、キーフレームを記録します。 ③アニメーションクリップをアニメーションコンポーネントのアニメーションオプションにドラッグアンドドロップし、[自動再生]がオンになっていることを確認し
ます。UIパネルを非表示にして表示すると、アニメーションの形式でパネルが表示されます。
ここに画像の説明を挿入


2. UIパネルのアニメーションの表示+アニメーションの非表示:

UIパネルを表示または非表示にすると、アニメーションの形式で表示されます。レンダリングは次のとおりです。画像の説明を追加してください

実装手順
①「AnimPlayer」という名前のスクリプトを作成し、パネルオブジェクトにマウントします。スクリプトの内容は次のとおりです。

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;
    }
}

②非表示のオブジェクトと同じ効果を得るには、「CanvasGroup」コンポーネントを追加し、Alphaを0に変更して、 BlocksRaycastsのチェックを外します。パネル表示アニメーションでは、これら2つの項目を変更する必要があります。
ここに画像の説明を挿入
③アニメーションを非表示にする別のパネルを実行します。アニメーションは、 CanvasGroupコンポーネントのAlpha値を0に変更し、誤ったトリガーを回避するためにBlocksRaycastsのチェックを外す必要があります。
ここに画像の説明を挿入
④このようにして、 AnimPlayerスクリプトで_____Open関数と_____Close関数を呼び出してもかまいません。script変数の名前はアニメーションクリップの名前と一致する必要があることに注意してください。
✧アニメーションの内容を少し豊かにすることができます。これが私が作った効果です。画像の説明を追加してください


3. UIパネルフュージョンアニメーション:

アニメーションは接続され、1つのミラーが最後にレンダリング
画像の説明を追加してください
されます:実装手順の概要:
①アニメーションクリップは最初から最後までエコーされる必要があります。②各
パネルは2つのアニメーションを実行し、1つはアニメーションを表示し、もう1つはアニメーションを非表示にします。 インタラクションがトリガーされると、前のパネルの非表示のアニメーションが再生され、同時に次のパネルの表示アニメーションが再生されます
。③終了アニメーションにアニメーションイベントを追加して、次のアニメーションまたは開始アニメーションをトリガーできます。次のパネルの最初の数フレームを空けるために、状況に応じて調整する必要があります。
注意点:
①プロセスプロジェクトにのみ適しています②
アニメーションの再生中は、制御できない状態、つまりCanvasGroupがチェックされていない
③アニメーションプロセスは非常に退屈で、私のキーフレーム/(ㄒoㄒ)/ ~~を見ると理解できますが、これは実装のコアステップでもあります
ここに画像の説明を挿入

第4に、UIオブジェクトのアニメーション:

独立したエルフ、独自の小さなアニメーションを繰り返し、レンダリング:
画像の説明を追加してください
画像内の各動的オブジェクトは独自の独立したアニメーションを繰り返しています。もちろん、実行、ジャンプ、自然な遷移などの複数のアニメーションがある場合は、アニメーションは1つだけです。 、Animatorステートマシンで実装するのが最適です。
実装手順:
①クリップのwrapModeがループに変更され、アニメーションが繰り返し再生されるようになります
ここに画像の説明を挿入
。②アニメーションの[アニメーション]オプションにアニメーションクリップがあり、[自動再生]がオンになっていることを確認して、シーンの実行中にアニメーションが再生されるようにします。自動的。
ここに画像の説明を挿入


5、Unityアニメーションエディターのスキル:

1.アニメーションフレーム間隔の調整:
Ctrl + Aショートカットを押してすべてのキーフレームを選択し、青い垂直バーをドラッグし画像の説明を追加してください
ます。2.アニメーションフレーム反転:
Ctrl + Aショートカットを押してすべてのキーフレームを選択し、左側の垂直バーをドラッグします。右側の垂直バーの前面。3。
画像の説明を追加してください
フレームモード:
記録ボタンをクリックし、パラメータ値を直接設定します②パラメータを右クリック
画像の説明を追加してください
し、[キーの追加]を選択します。図に示すように:図のように図のアニメーションから、Unityのデフォルトのアニメーション遷移は線形ではなく、加速し始め、最後に減速します。曲線から、曲線は一般的に使用されていないことがわかります。アニメーションの遷移は線形に変更されます。私が一般的に使用する簡単な方法は、図に示すように、キーフレームを選択し、右クリックして[自動]を選択することです。
画像の説明を追加してください


画像の説明を追加してください


画像の説明を追加してください

画像の説明を追加してください

6、アニメーション制作スキル:

1.マイクロアニメーション
とは、アニメーションの範囲が狭いアニメーションを指します。マイクロアニメーションを使用すると、ユーザーの視覚体験が向上し、制作コストが低くなり
ます。例:
画像の説明を追加してください
アニメーションなしとの比較:
画像の説明を追加してください
2。ジャンプアニメーション
とは、アニメーションの最後にあるバッファを指します。アニメーション。パラメータ値が直接目標値に到達するのではなく、最初に目標値より大きく、次に目標値より小さくなり、最後に目標値に到達します。ジャンプを使用すると、アニメーション効果をより鮮やかにすることができ、娯楽やカジュアルゲームなどのインタラクティブなプロジェクトでよく使用され、一部の政府関連プラットフォームソフトウェアではあまり使用されません。
例:
大きなジャンプアニメーション:

小さなジャンプアニメーション:
画像の説明を追加してください
ジャンプアニメーションなし:
画像の説明を追加してください
3。シーケンシャルアニメーション
とは、視覚効果を向上させることができるUI要素のシーケンシャルアニメーションを指します。
UI要素の数が不明な場合があるため、シーケンシャルアニメーションは、通常、コードまたはDotweenプラグインでより適切に実装されます。
要素の数が比較的少なく、数が固定されていてスケーラブルでない場合は、Kフレームを一時的な実装に使用できます。
数秒でシーケンスアニメーションを実行します。
画像の説明を追加してください
レンダリング:
画像の説明を追加してください
ジャンプ効果を重ね合わせた方がよいでしょう。
画像の説明を追加してください


より連続したアニメーション効果の表示:
画像の説明を追加してください
スーパーインポーズ:
画像の説明を追加してください


画像の説明を追加してください
オーバーレイジャンプ:
画像の説明を追加してください


最初にここに書きます、後で新しいアイデアを追加します、見てくれてありがとう〜

おすすめ

転載: blog.csdn.net/m0_55907341/article/details/123277926
おすすめ