使用Dotween创建可在编辑器预览的Tween补间动画

DoTween是一款非常好用的补间动画插件&＃xff0c;但是其不支持在非运行状态下预览动画

所以我尝试对DoTween进行扩展&＃xff0c;让其能够支持非运行时预览

首先编写一个BaseTween基类

public enum EaseType
{Ease,AnimationCurve,
}public abstract class BaseTween : MonoBehaviour
{[Header("BaseTween")] [LabelText("动画时长")]public float tweenTime &＃61; 1f;[LabelText("循环")] public int loopTimes &＃61; -1;[LabelText("动画曲线类型")]public EaseType easeType &＃61; EaseType.Ease;[LabelText("动画曲线")] [ShowIf("&＃64;easeType&＃61;&＃61;EaseType.Ease")]public Ease ease &＃61; Ease.Linear;[LabelText("动画曲线")] [ShowIf("&＃64;easeType&＃61;&＃61;EaseType.AnimationCurve")]public AnimationCurveanimationCurve &＃61; AnimationCurve.Linear(0, 0, 1, 1);[LabelText("动画速度缩放")] public float tweenScale &＃61; 1f;[LabelText("倒放")] public bool isReserve &＃61; false;public Tweener tweener;[ShowInInspector] [ReadOnly][LabelText("当前百分比")] protected float currentPercent;public float CurrentPercent{get &＃61;> currentPercent;set &＃61;> currentPercent &＃61; value;}[Range(0, 1)][LabelText("预览百分比")] public float previewPercent;protected virtual void Awake(){currentPercent &＃61; 0;}[Button("播放动画")]public virtual Tweener PlayTween(){if (tweener !&＃61; null){tweener.Goto(currentPercent * tweenTime, true);}else{ResetTween();}return tweener;}[Button("暂停动画")]public virtual Tweener PauseTween(){if (tweener !&＃61; null){tweener.Pause();}return tweener;}[Button("停止动画")]public virtual Tweener StopTween(){if (tweener !&＃61; null){tweener.Pause();tweener.Kill();}return tweener;}[Button("重置动画")]public virtual Tweener ResetTween(){if (tweener !&＃61; null){tweener.Kill();}tweener &＃61; DOTween.To(() &＃61;> isReserve ? 1f : 0f,value &＃61;> OnTweenUpdate(value),isReserve ? 0f : 1f, tweenTime).SetLoops(loopTimes);//percent已经在此倒置switch (easeType){case EaseType.Ease:tweener.SetEase(ease);break;case EaseType.AnimationCurve:tweener.SetEase(animationCurve);break;}return tweener;}protected virtual Tweener OnTweenUpdate(float percent){currentPercent &＃61; percent;if (tweener !&＃61; null){tweener.timeScale &＃61; tweenScale;}return tweener;}protected virtual void OnValidate(){}protected virtual void Reset(){}
}


其中直接使用了DOTween.To从0到1进行补间&＃xff0c;这个值表示动画百分比&＃xff0c;然后在OnTweenUpdate中编写对应百分比时执行的操作即可。

编辑器下预览脚本如下&＃xff0c;原理就是绑定EditorApplication.update回调&＃xff0c;再调用OnTweenUpdate即可

public abstract class BaseTween : MonoBehaviour
{//#region 编辑器下预览#if UNITY_EDITORprotected float editorTimer; //计时器protected float editorStartTime; //起始运行时间protected int editorTimes; //运行次数[Button("编辑器中预览")][HorizontalGroup("Editor")]public virtual void PreviewInEditor(){editorTimer &＃61; 0;editorTimes &＃61; 0;editorStartTime &＃61; Time.realtimeSinceStartup;EditorApplication.update -&＃61; OnEditorUpdated;EditorApplication.update &＃43;&＃61; OnEditorUpdated;}[Button("停止预览")][HorizontalGroup("Editor")]public virtual void StopPreviewInEditor(){EditorApplication.update -&＃61; OnEditorUpdated;}protected virtual void OnEditorUpdated(){editorTimer &＃61; Time.realtimeSinceStartup - editorStartTime;var percentTimer &＃61;MathTool.MapClamped(editorTimer, 0, tweenTime, 0, 1);//计算动画曲线实际百分比if (easeType &＃61;&＃61; EaseType.Ease){OnTweenUpdate(EaseManager.Evaluate(ease, null, editorTimer,tweenTime, DOTween.defaultEaseOvershootOrAmplitude,DOTween.defaultEasePeriod));}if (easeType &＃61;&＃61; EaseType.AnimationCurve){OnTweenUpdate(animationCurve.Evaluate(percentTimer));}if (editorTimer > tweenTime){editorTimes&＃43;&＃43;;editorStartTime &＃61; Time.realtimeSinceStartup;if (loopTimes >&＃61; 0){if (editorTimes >&＃61; loopTimes){Debug.Log($"{name}动画预览完成,动画时长{tweenTime}s,循环{editorTimes}次,实际耗时{editorTimer * loopTimes}s");EditorApplication.update -&＃61; OnEditorUpdated;editorTimes &＃61; 0;}}editorTimer &＃61; 0;}}
#endif#endregion
}


下面以一个简单的位置补间为例

public class TweenTransform : BaseTween
{[Header("TweenTransform")][LabelText("目标物体")]public Transform target;[LabelText("起点")]public Transform from;[LabelText("终点")]public Transform to;[TabGroup("位置")][LabelText("使用位置")]public bool tweenPosition &＃61; true;[TabGroup("位置")][LabelText("使用X坐标")]public bool useX &＃61; true;[TabGroup("位置")][LabelText("使用Y坐标")]public bool useY &＃61; true;[TabGroup("位置")][LabelText("使用Z坐标")]public bool useZ &＃61; true;[TabGroup("旋转")][LabelText("使用旋转")]public bool tweenRotation &＃61; true;protected override Tweener OnTweenUpdate(float percent){if (target !&＃61; null&&&＃64;from!&＃61;null&&to!&＃61;null){if (tweenPosition){target.position &＃61; new Vector3(!useX? target.position.x: Mathf.Lerp(&＃64;from.position.x, to.position.x, percent),!useY? target.position.y: Mathf.Lerp(&＃64;from.position.y, to.position.y, percent),!useZ? target.position.z: Mathf.Lerp(&＃64;from.position.z, to.position.z, percent));}if (tweenRotation){target.rotation &＃61;Quaternion.Lerp(&＃64;from.rotation, to.rotation, percent);}}return base.OnTweenUpdate(percent);}protected override void OnValidate(){base.OnValidate();OnTweenUpdate(previewPercent);}
}


面板如图所示

在非运行状态下预览的效果如下

甚至可以继续扩展为曲线路径&＃xff0c;然后在非运行状态下预览