【Unity】Teamsの入力中のアニメーションを実装してみる

Teams のチャットで相手が入力中の時にモニョモニョと表示される印字メーターのアニメーションを Unity + DOTween で実装してみました。

この機能、気が散るので OFF にしたいですがそういう設定はないみたいですね。

作成環境

  • Unity 2021.3
  • DOTween

実装コード

アニメーションしてる紫色のスクリプトになります。動作は DOTween を使用しています。

このスクリプトを玉にそれぞれ追加して Manager から Play メソッド順番にを呼び出します。

using System;
using DG.Tweening;
using Takap.Utility;
using UnityEngine;
using UnityEngine.UI;

public class Circle : MonoBehaviour
{
    [SerializeField] float _downDuration = 0.2f;
    [SerializeField] float _upDuration = 0.1f;
    [SerializeField] float _yReduction = 6;
    [SerializeField] float _moveDistance = -3.5f;
    [SerializeField] 
    Color _pressColor = new Color(0.26666f, 0.27843f, 0.56862f);
    [SerializeField] 
    Color _normalColor = new Color(0.7803922f, 0.7803922f, 0.7803922f);

    RectTransform _myRect;
    Image _myImage;
    Tween _seq;

    private void Awake()
    {
        _myRect = transform as RectTransform;
        this.SetComponent(ref _myImage);
    }

    public void Init()
    {
        _myRect.SetLocalPosY(-10);
        _myRect.SetSize(20, 20);
        _myImage.SetColor(_normalColor);
    }

    // 実行すると一回玉が下がって上がる
    public void Play(Action onPlayCompleted = null)
    {
        _seq.Kill();
        Init();

        _myImage.SetColor(_pressColor);

        Sequence root = DOTween.Sequence();
        
        Sequence s1 = DOTween.Sequence(); // 下に下がるとき
        s1.Append(_myRect.DOLocalMoveY(_moveDistance, 
            _downDuration).SetEase(Ease.OutSine).SetRelative());
        s1.Join(_myRect.DOSizeDelta(new Vector2(20, 15), _downDuration));
        
        Sequence s2 = DOTween.Sequence(); // 上にあがるとき
        s1.Append(_myRect.DOLocalMoveY(-_moveDistance, 
            _upDuration).SetEase(Ease.Linear).SetRelative());
        s2.Join(_myRect.DOSizeDelta(new Vector2(20, 20), _upDuration));

        root.AppendInterval(0.02f);
        root.Append(s1);
        root.Append(s2);
        root.AppendInterval(0.02f);

        root.OnComplete(() =>
        {
            _myImage.SetColor(_normalColor);
            onPlayCompleted?.Invoke();
        });
        root.SetLink(this);
        _seq = root;
    }
}