Animator内の遷移にイージーイン・アウトは可能でしょうか?

Question

あるアニメーションから、もう一方(1フレーム）のアニメーションに遷移させるとき、Animator内では動きに自動で補間がききますが、
その動きを一定速でなく、変化のあるものにしたいです。（イージーイン・アウト）
アニメーションクリップ同士の遷移にイージーイン・アウトさせることは可能でしょうか？

画像内の、IdleクリップとShootposeクリップ(1フレーム)を遷移させる際にイージーイン・アウトをさせたいです。

Answer 1

パート2

そしてプロジェクト内にEditorフォルダを作り、コンポーネント編集用の下記スクリプトを入れておきました。

using System.Collections.Generic;
using System.Linq;
using UnityEditor;
using UnityEditor.Animations;
using UnityEngine;

[CustomEditor(typeof(TransitionModifier))]
public class TransitionModifierEditor : Editor
{
	private readonly Dictionary<AnimatorState, string> stateFullPaths = new Dictionary<AnimatorState, string>();

	public override void OnInspectorGUI()
	{
		var targetModifier = this.target as TransitionModifier;
		if (targetModifier == null)
		{
			EditorGUILayout.HelpBox("No component.", MessageType.Error);
			return;
		}

		var animator = targetModifier.GetComponent<Animator>();
		if (animator == null)
		{
			EditorGUILayout.HelpBox("No Animator.", MessageType.Warning);
			return;
		}

		if (EditorApplication.isPlaying)
		{
			EditorGUILayout.HelpBox("Running.", MessageType.Info);
			return;
		}

		var animatorController = animator.runtimeAnimatorController as AnimatorController;
		if (animatorController == null)
		{
			EditorGUILayout.HelpBox("No Controller.", MessageType.Warning);
			return;
		}

		this.stateFullPaths.Clear();
		foreach (var layer in animatorController.layers)
		{
			this.GatherStateFullPaths(layer.stateMachine);
		}

		var assets = AssetDatabase.LoadAllAssetsAtPath(AssetDatabase.GetAssetPath(animatorController));
		var states = assets.OfType<AnimatorState>();
		var transitionsWithSource =
			states.SelectMany(state => state.transitions.Select(transition => (transition, state))).ToArray();
		var transitionsWithoutSource = assets.OfType<AnimatorStateTransition>()
			.Except(transitionsWithSource.Select(transition => transition.transition))
			.Select(transition => (transition, (AnimatorState)null));
		this.serializedObject.Update();
		var equationKeys = this.serializedObject.FindProperty("equationKeys");
		var equationValues = this.serializedObject.FindProperty("equationValues");
		var equationWithoutSourceKeys = this.serializedObject.FindProperty("equationWithoutSourceKeys");
		var equationWithoutSourceValues = this.serializedObject.FindProperty("equationWithoutSourceValues");
		foreach (var (transition, fromState) in transitionsWithSource.Concat(transitionsWithoutSource))
		{
			var displayName = transition.GetDisplayName(fromState);
			var path = fromState == null
				? this.stateFullPaths[transition.destinationState]
				: $"{this.stateFullPaths[fromState]} -> {this.stateFullPaths[transition.destinationState]}";
			var hash = Animator.StringToHash(path);
			var previousValue = targetModifier.GetEquation(hash, fromState != null, out var index);
			var newValue = (TransitionModifier.Equation)EditorGUILayout.EnumPopup(displayName, previousValue);
			if (newValue != previousValue)
			{
				var keys = fromState == null ? equationWithoutSourceKeys : equationKeys;
				var values = fromState == null ? equationWithoutSourceValues : equationValues;
				if (index < 0)
				{
					index = keys.arraySize;
					keys.InsertArrayElementAtIndex(index);
					values.InsertArrayElementAtIndex(index);
				}

				keys.GetArrayElementAtIndex(index).intValue = hash;
				values.GetArrayElementAtIndex(index).intValue = (int)newValue;
			}
		}

		this.serializedObject.ApplyModifiedProperties();
	}

	private void GatherStateFullPaths(AnimatorStateMachine stateMachine, string parentPath = "")
	{
		parentPath += $"{stateMachine.name}.";
		foreach (var state in stateMachine.states.Select(childState => childState.state))
		{
			this.stateFullPaths.Add(state, $"{parentPath}{state.name}");
		}

		foreach (var subMachine in stateMachine.stateMachines.Select(childMachine => childMachine.stateMachine))
		{
			this.GatherStateFullPaths(subMachine, parentPath);
		}
	}
}

実験用のアニメーションは「左下で円を描く動き（Motion1）」→「中央上で正方形を描く動き（Motion2）」→「右下で逆五芒星を描く動き（Motion3）」を繰り返すもので、各クリップは長さ4秒、下図のように2反復（結果としてステート滞在時間は8秒）したのち次のステートへ2秒かけて遷移...となっています。

通常通りAnimationControllerによる制御を行った場合は下図のようになります。

図の下半分にPlayableGraphの構造を表示しました。中央付近のAnimationMixerの先が三つ叉に分岐しており、遷移タイミングでブレンド比がじわっと変化しています。
当初の目論見では、このミキサーのブレンド比を操作してイージングできるのではないかと思ったのですが、残念ながらAnimatorController（エメラルドグリーンのノード）より先は外部からの操作が許可されていないようです。
仕方ないのでAnimationClipノードを二つ追加して本来のアニメーションクリップと同一のクリップをセット、AnimationMixerを追加してそれらを混合、出力するようにしてみました。本来のミキサーのブレンド比を監視し、その比率にイージング処理を施してから新しいミキサーに適用することでイージングさせようと考えました。

コンポーネントの設定は下図のようにMotion1からMotion2はEaseInOutQuad（二次関数のカーブを描きながらじわっと加速、じわっと減速）、Motion2からMotion3はEaseOutCirc（最初は急激、そこから円弧を描くカーブでじわっと減速）、Motion3からMotion1はEaseInOutBounce（ボールが跳ねるような動きで高さを増しながら中間点まで移動、そこから逆に高さを減らしながら跳ねて最終点まで移動）を選択しました。

実行するとAnimatorの「Controller」はNoneになり、代わってTransitionModifierが作ったPlayabeGraphによってアニメーションがコントロールされます。

動きは下図のようになりました。比較のため、白いボールに重ねて表示している赤い半透明のボールに本来の線形の動きをさせています。

グラフ右下にAnimationController由来のツリーがあり、そこのミキサーがクリップを切り替えるのと同期して、左上に追加されたミキサーがクリップを切り替えています。
最初に申し上げたように機能としては不完全で、たとえば本来のツリーにあるAnimationPoseとかいう黄色いノードは何をしているのかわからず、完全に無視しました（IK関連の機能?）。他にも、複数のレイヤーを持つアニメーションの場合はAnimationLayerMixerから枝分かれが発生するようですが、それも考慮せずベースレイヤーしか見ていません。また、おそらくノードの評価はAnimationOutputを起点に末端へ向かって進行するだろうと思われ、本来のミキサーがブレンド比を決定するよりも先にTransitionModifierが追加ミキサーのブレンド比を決定するという処理順になっていると想像されます。つまり、TransitionModifierは1フレーム前のグラフの姿を見ているっぽく、アニメーションがわずかに遅れてしまいます。

Answer 2

どうやら標準機能としては提供されていないみたいですね。AnimationControllerによる制御はあきらめて、自前でアニメーションシステムを構築するべきかもしれません。

複雑なステート制御が不要なら、【Unity】AnimationControllerを用意せずAnimatorによるアニメーションを使う - テラシュールブログの実装例のように比較的簡単に作れそうです。
スクリプト末尾のコルーチン内にアニメーションのブレンド比を決めている部分がありますが、そこにイージング処理を挟むことでお好みの緩急をつけられるんじゃないでしょうか?

Unity TechnologiesからもSimpleAnimationなんてものが出ており、ブレンド機能（参考：【Unity】Simple Animationを使ってAnimator Controllerなしでお手軽モーション再生 - LIGHT11）をうまく使えばイージング機能付きクロスフェードを実現できそうに思います。

ああいったシンプルなアニメーションシステムでまかなえそうならばそちらをおすすめしたいところですが、やはりUnity標準のステート管理機能を使いたい...と言われたらどうしようと思い、なにか手はないか検討してみました。
後述しますが、レイヤーを考慮していないなど不完全な出来です...あくまでもアプローチ検討の参考ということでお願いします。

まずAnimatorによってアニメーションするオブジェクトに、下記スクリプトをアタッチしました。

using System;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.Animations;
using UnityEngine.Playables;

[RequireComponent(typeof(Animator))]
public class TransitionModifier : MonoBehaviour
{
	// 0～1の値を0～1の値に変換するイージング処理を記述する
	// Robert Penner's Easing Functionsをベースに簡略化したもの
	// http://robertpenner.com/easing/
	public enum Equation
	{
		Linear,
		EaseInOutQuad,
		EaseOutCirc,
		EaseInOutBounce
	}
	private static readonly Dictionary<Equation, Func<float, float>> TransitionFunctions =
		new Dictionary<Equation, Func<float, float>>
		{
			{Equation.Linear, t => t},
			{Equation.EaseInOutQuad, t => t < 0.5f ? (t *= 2.0f) * t * 0.5f : 1.0f - ((t = (1.0f - t) * 2.0f) * t * 0.5f)},
			{Equation.EaseOutCirc, t => Mathf.Sqrt(1.0f - ((t -= 1.0f) * t))},
			{Equation.EaseInOutBounce, t => t < 0.5f ? (1.0f - EaseOutBounce(1.0f - (t * 2.0f))) * 0.5f : (EaseOutBounce((t * 2.0f) - 1.0f) * 0.5f) + 0.5f}
		};
	private static float EaseOutBounce(float v)
	{
		if (v < (1 / 2.75f))
		{
			return 7.5625f * v * v;
		}

		if (v < (2 / 2.75f))
		{
			return (7.5625f * (v -= 1.5f / 2.75f) * v) + 0.75f;
		}

		if (v < (2.5 / 2.75))
		{
			return (7.5625f * (v -= 2.25f / 2.75f) * v) + 0.9375f;
		}

		return (7.5625f * (v -= 2.625f / 2.75f) * v) + 0.984375f;
	}

	// どのトランジションに対してどのイージングを適用するかを記憶しておくためのフィールド
	// 本来ならDictionaryのようなコレクションを使いたいところではあるが、シリアライズするために
	// キー（トランジションまたはステートのフルパスハッシュ）と値をそれぞれListとして保持する
	// リストは2組用意し、前者はステート間トランジション、後者はAny Stateからの場合のような
	// ソースステートを持たないトランジションに使う
	// ソースなしトランジションでもAnimatorTransitionInfo.fullPathHashはそれっぽい値を返すので、
	// ソースなしの場合のハッシュの元となる文字列の作り方がわかればリストは1組ですむはずなのだが...
	// リファレンスには載っておらず、勘で試してもハズレばかりであきらめた
	[SerializeField] private List<int> equationKeys = new List<int>();
	[SerializeField] private List<Equation> equationValues = new List<Equation>();
	[SerializeField] private List<int> equationWithoutSourceKeys = new List<int>();
	[SerializeField] private List<Equation> equationWithoutSourceValues = new List<Equation>();

	private PlayableGraph animationGraph;
	private Animator animator;
	private RuntimeAnimatorController runtimeAnimatorController;

	// ハッシュからEquationを引っ張ってくるのに使うヘルパーメソッド
	// TransitionModifierEditorが使う
	public Equation GetEquation(int hash, bool hasSource, out int index)
	{
		index = (hasSource ? this.equationKeys : this.equationWithoutSourceKeys).FindIndex(i => i == hash);
		return index < 0 ? Equation.Linear : (hasSource ? this.equationValues : this.equationWithoutSourceValues)[index];
	}

	private void Start()
	{
		// まずPlayableGraphを新規作成する
		this.animator = this.GetComponent<Animator>();
		this.runtimeAnimatorController = this.animator.runtimeAnimatorController;
		this.animationGraph = PlayableGraph.Create("Animation");
		this.animationGraph.SetTimeUpdateMode(DirectorUpdateMode.GameTime);
		var animatorOutput = AnimationPlayableOutput.Create(this.animationGraph, "AnimatorOutput", this.animator);
		var animatorController = AnimatorControllerPlayable.Create(
			this.animationGraph,
			this.runtimeAnimatorController);
			
		// ハッシュ値とイージングファンクションを対応づけたDictionaryを作り...
		var transitionFunctions = new Dictionary<int, Func<float, float>>();
		foreach (var (key, value) in this.equationKeys.Zip(this.equationValues, (key, value) => (key, value)))
		{
			transitionFunctions.Add(key, TransitionFunctions[value]);
		}
		var transitionWithoutSourceFunctions = new Dictionary<int, Func<float, float>>();
		foreach (var (key, value) in this.equationWithoutSourceKeys.Zip(
			this.equationWithoutSourceValues,
			(key, value) => (key, value)))
		{
			transitionWithoutSourceFunctions.Add(key, TransitionFunctions[value]);
		}

		// メインの処理を担当するTransitionModifierPlayableを作成、必要なデータを投入する
		var modifierPlayable = ScriptPlayable<TransitionModifierPlayable>.Create(this.animationGraph, 1);
		modifierPlayable.GetBehaviour().Initialize(
			modifierPlayable,
			animatorController,
			this.animator,
			transitionFunctions,
			transitionWithoutSourceFunctions);
			
		// AnimatorのruntimeAnimatorControllerはnullにして黙らせ、代わりに
		// できあがったPlayableGraphを起動してアニメーションを行わせる
		animatorOutput.SetSourcePlayable(modifierPlayable);
		this.animator.runtimeAnimatorController = null;
		this.animationGraph.Play();
	}

	private void OnEnable()
	{
		this.runtimeAnimatorController = this.animator.runtimeAnimatorController;
		this.animator.runtimeAnimatorController = null;
 
		if (this.animationGraph.IsValid())
		{
			this.animationGraph.Play();
		}
	}

	private void OnDisable()
	{
		if (this.animationGraph.IsValid())
		{
			this.animationGraph.Stop();
		}

		if ((this.animator != null) && (this.runtimeAnimatorController != null))
		{
			this.animator.runtimeAnimatorController = this.runtimeAnimatorController;
		}
	}

	private void OnDestroy()
	{
		if (this.animationGraph.IsValid())
		{
			// 生成したPlayableGraphは明示的に破棄しないとクラッシュするらしい...!
			// http://tsubakit1.hateblo.jp/entry/2017/07/30/032008#%E6%B3%A8%E6%84%8F%E7%82%B9
			this.animationGraph.Destroy();
		}
	}

	private class TransitionModifierPlayable : PlayableBehaviour
	{
		private Dictionary<int, Func<float, float>> transitionFunctions;
		private Dictionary<int, Func<float, float>> transitionWithoutSourceFunctions;
		private Animator animator;
		private PlayableGraph animationGraph;
		private AnimationMixerPlayable referenceMixer;
		private AnimationMixerPlayable actualMixer;
		private AnimationClipPlayable mirrorClip0;
		private AnimationClipPlayable mirrorClip1;

		public void Initialize(
			ScriptPlayable<TransitionModifierPlayable> self,
			AnimatorControllerPlayable animatorController,
			Animator animator,
			Dictionary<int, Func<float, float>> transitionFunctions,
			Dictionary<int, Func<float, float>> transitionWithoutSourceFunctions)
		{
			// AnimatorControllerによるノードツリー内の、トランジション前後のモーション混合を
			// 行っているミキサーを監視し、そのブレンド比をイージングファンクションで変化させ、
			// それを別途用意したミキサーに適用する作戦
			// AnimatorControllerのノードツリーは編集不許可のようなので、こんな回りくどい方法をとった
			this.transitionFunctions = transitionFunctions;
			this.transitionWithoutSourceFunctions = transitionWithoutSourceFunctions;
			this.animator = animator;
			this.referenceMixer = (AnimationMixerPlayable)animatorController.GetInput(0).GetInput(0);
			this.animationGraph = this.referenceMixer.GetGraph();
			var referenceClip0 = (AnimationClipPlayable)this.referenceMixer.GetInput(0).GetInput(0);
			var referenceClip1 = (AnimationClipPlayable)this.referenceMixer.GetInput(1).GetInput(0);
			this.mirrorClip0 = AnimationClipPlayable.Create(this.animationGraph, referenceClip0.GetAnimationClip());
			this.mirrorClip1 = AnimationClipPlayable.Create(this.animationGraph, referenceClip1.GetAnimationClip());
			this.actualMixer = AnimationMixerPlayable.Create(this.animationGraph, 3);
			this.actualMixer.ConnectInput(0, this.mirrorClip0, 0, 1.0f);
			this.actualMixer.ConnectInput(1, this.mirrorClip1, 0);
			this.actualMixer.ConnectInput(2, animatorController, 0);
			self.ConnectInput(0, this.actualMixer, 0, 1.0f);
		}

		public override void PrepareFrame(Playable playable, FrameData info)
		{
			// アニメーションクリップが変わっていたらノードを差し替え、その後再生位置を同期させる
			this.UpdateMirror(
				(AnimationClipPlayable)this.referenceMixer.GetInput(0).GetInput(0),
				ref this.mirrorClip0,
				0);
			this.UpdateMirror(
				(AnimationClipPlayable)this.referenceMixer.GetInput(1).GetInput(0),
				ref this.mirrorClip1,
				1);

			// 遷移中ならミキサーの混合比を同期させる
			// このときイージング処理を施し緩急をつける
			var transitionInfo = this.animator.GetAnimatorTransitionInfo(0);
			var functions = transitionInfo.anyState
				? this.transitionWithoutSourceFunctions
				: this.transitionFunctions;
			var transitionHash = transitionInfo.anyState
				? this.animator.GetNextAnimatorStateInfo(0).fullPathHash
				: transitionInfo.fullPathHash;
			if (transitionHash != 0)
			{
				var weight0 = this.referenceMixer.GetInputWeight(0);
				var weight1 = this.referenceMixer.GetInputWeight(1);
				var weightSum = weight0 + weight1;
				if (weightSum > 0.0f)
				{
					var normalizedWeight1 = weight1 / weightSum;
					if (functions.TryGetValue(transitionHash, out var function))
					{
						normalizedWeight1 = function(normalizedWeight1);
					}

					var normalizedWeight0 = 1.0f - normalizedWeight1;
					this.actualMixer.SetInputWeight(0, normalizedWeight0);
					this.actualMixer.SetInputWeight(1, normalizedWeight1);
				}
			}

			base.PrepareFrame(playable, info);
		}

		private void UpdateMirror(AnimationClipPlayable reference, ref AnimationClipPlayable mirror, int port)
		{
			if (mirror.GetAnimationClip() != reference.GetAnimationClip())
			{
				mirror.Destroy();
				mirror = AnimationClipPlayable.Create(this.animationGraph, reference.GetAnimationClip());
				this.actualMixer.ConnectInput(port, mirror, 0, port == 0 ? 1.0f : 0.0f);
			}

			mirror.SetTime(reference.GetTime());
		}
	}
}

（パート2へ続く...）

Comments

[Lovedelic_VR]

ご丁寧に様々な角度から実装のイメージをアドバイスいただきまして、ありがとうございます。
Unityの仕様把握やAnimationController内部のシステム構築の理解につながりました。

自身のプロジェクトでは、キャラ制御をAnimationController依存でレイヤーを使用した実装で進めていましたので、Bongo様のコードを参考にPlayabeGraphでの実装を試してみたいと思います。
自身のプロジェクトで解決せずとも、これからのシステム設計や実装の方針を決める際に考慮するべき知見を収集できた点からみても大変有意義な質問となりました。ご回答ありがとうございました。