Unity Dotween 定位点的制作

news2024/11/26 1:43:52

前言

一、动画预览

二、动画拆分

三、素材准备

四、曲线 OutCirc详解

五、速度分类详解

六、代码

七、组件和设置

八、作者的话

前言

我答应我的粉丝接下来更新Dotween系列，但是我一直没想好，从哪里开始讲。

Dotween的安装我就跳过了，因为这个到处都有。

最后思考了一下，从常用案例开始讲吧，对案例有需求的也可以写在评论区中。

一、动画预览

一般定位点很喜欢用这个动画（如图1所示），但如果用视频或者序列帧，有点大材小用了，灵活性都不太好，因此，这里用简单的图片来制作这个动画。

二、动画拆分

这是由两个相同动画的圈组成的，只不过他们一个慢了0.5秒开始播，所以单个圈的动画（如图2所示）。

单个圆圈再拆分：

大小角度：如果把圆最大的时候当做1，它是从1/4的时候开始逐渐变大。

出现和消失角度：假设这个圆的动画是1秒，前1/3秒在逐渐出现，然后花了1/4秒消失，余下的时间全黑，什么都看不见。

三、素材准备

只需要一个透明白色的圈（如图3所示），你实在没有，去PPT里画一个？下面这个图是不能用的哈，只是给你们示例一下啊。

四、曲线 OutCirc详解

dotween里面的曲线有很多，但up认为，如果你没有仔细观察过，最后是不知道哪个用起来效果更好的，所以这里带大家观察一下这个曲线。

Circ:圆形曲线的缓动( sqrt(1-t^2)）

注释：sqrt是根号的意思，这个公式其实是 $\sqrt{1-t^2}$ ，图像（如图4所示）

这段有兴趣的可以看一下：

把这个公式稍微变一下

1.把t变成x

2.变成等式

$y=\sqrt{1-x^2}$

再变一下

$1=x^2+y^2$

是不是就很眼熟了，这是圆形公式，再去看他的英文Circ = Circle

是不是一切都说通了。

五、速度分类详解

这里引用了以下两个文章的内容，侵权立删。

Unity Dotween插件的运动曲线（Ease）介绍Ease选项Ease效果示例以及C#修改动画曲线功能_dotween ease-CSDN博客

Unity Dotween Ease曲线图表效果展示_dotween曲线展示-CSDN博客

实际曲线图像（如图5所示）

一个好好的圆形图像变成了这样，是因为取的时间不是匀速的，有时候快有时候慢。
In:            从0开始加速
Out:         减速到0
lnOut:      前半段从0开始加速，后半段减速到0的缓动

实际动画图像

InCirc介绍（如图6所示）：时间越来越快，变得越来越快，曲线比较接近圆弧

OutCirc介绍（如图7所示）：时间越来越慢，变得越来越慢，曲线比较接近圆弧

InOutCirc介绍（如图8所示）：先按InCirc运动，再按OutCirc运动，所以是慢-快-快-慢

六、代码

按照之前动画拆分，把每一步都做了

//找到设置大小的组件
    public RectTransform rect;
    //找到图片
    private Image img;
    //记录初始大小
    private Vector2 origSize;

    //动画持续时间
    public float duration;
    //动画延迟时间
    public float delay;

    void Start()
    {
        //图片复制
        img = rect.GetComponent<Image>();

        //初始化透明度
        img.DOFade(0, 0);

        //记录初始大小
        origSize = rect.sizeDelta;

        //设置初始大小为四分之一
        rect.sizeDelta = origSize / 4f;

        //执行动画
        StartCoroutine(Delay());

    }

    IEnumerator Delay()
    {
        //动画延迟几秒执行
        yield return new WaitForSeconds(delay);
        //执行动画
        Animate();
    }

    public void Animate()
    {
        //建立动画队列
        Sequence s = DOTween.Sequence();
        //加入动画              让图片在duration秒内变回初始大小           //选择OutCirc曲线
        s.Append(rect.DOSizeDelta(origSize, duration).SetEase(Ease.OutCirc));
        //和上面一起开始的动画    把图片透明度变成1，用1/3的总时长
        s.Join(img.DOFade(1, duration / 3));
        //和上面一起开始的动画    把图片透明度变成0，用1/4总时长，但需要延迟1/3的总时长再执行
        s.Join(img.DOFade(0, duration / 4).SetDelay(duration / 1.5f));
        //重复播放
        s.SetLoops(-1);
    }