前言
我们在制作动画时经常使用这个Dotween插件,在移动、旋转、透明度等等参数的控制都可以使用该插件,而且在这个插件上的控制动画可以设置曲线,内置的曲线有这些: 
内置曲线
以InOutSine的曲线进行往右移动: 
效果是这样的: 
能看出开始是从0提速,最后是慢慢减速至0的效果。
4个类型的效果: In: 从0开始加速; Out: 减速到0; lnOut:前半段从0开始加速,后半段减速到0的缓动 Linear: 直线效果,匀速的效果;
不同的缓动方式: Flash: 闪烁效果,时而快时而慢(个人认为的) Quad:二次方的; Cubic:三次方的; Quart:四次方的; Quint:五次方的; Sin:正弦曲线的缓动( sin(t)) ; Expo:指数曲线的缓动(2At) ; Circ:圆形曲线的缓动( sqrt(1-t^2)) ; Elastic :指数衰减的正弦曲线缓动; Back:超过范围的三次方缓动((s+1)tN3 - st^2) ; Bounce:指数衰减的反弹缓动。
以上方式的组合形成了这些内置的曲线。
各个曲线的效果图:     
以上效果图转自:https://zhuanlan.zhihu.com/p/161106076
脚本修改内置曲线
主要就是通过SetEase()(有重载)函数设置即可:
Ease easeType = Ease.OutQuad;
tween.SetEase(easeType);
自定义曲线
不过最后一个选项(::AnimationCurve)可以进行自定义的曲线,这里随意拖拽一个曲线: 
效果是这样的:

动画定义的是按钮延x方向移动600(向右),但是自定义的曲线开始为负值,所以动画是先向左移动了才往右移动。
脚本自定义曲线
该方式是通过定义AnimationCurve(动画曲线)类型,设置动画曲线实现:
AnimationCurve easeCurve = new AnimationCurve(new Keyframe(0, 0), new Keyframe(1, 1));
tween.SetEase(easeCurve);
其它脚本设置曲线
设置曲线支持的所有函数如图:

可以看出也可以通过设置EaseFunction的方法来实现。
|