Как сделать плавный переход между спрайтами кнопки?

[EIvanov]

В юнити у кнопки есть режим смены спрайтов transition - sprite swap. Мы перетаскиваем в поля спрайты и при наведении, нажатии на кнопку они изменяются.
Но всё это делается мгновенно, картинка сразу заменяется другой. И это не красиво.
Как сделать плавный переход между спрайтами кнопки?

Пробовал вариант c DOTween - но там тоже есть свои "проблемы". Нужно согласовывать анимации.

Скрытый текст: показать

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;
using DG.Tweening;

public class DOTweenButtonController : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler, IPointerUpHandler, IPointerClickHandler
{
[SerializeField] private Sprite onPointerEnterButtonSprite;
[SerializeField] private Sprite onPointerExitButtonSprite;
[SerializeField] private Sprite onPointerDownButtonSprite;

private Image buttonImage;
private Sprite originalButtonSprite;
private Color originalButtonColor;

private bool isAnimating;

private void Awake()
{
buttonImage = GetComponent<Image>();
originalButtonSprite = buttonImage.sprite;
originalButtonColor = buttonImage.color;
}

public void OnPointerEnter(PointerEventData eventData)
{
if (!isAnimating)
{
isAnimating = true;
buttonImage.DOFade(0f, 0.5f).OnComplete(() =>
{
buttonImage.sprite = onPointerEnterButtonSprite;
buttonImage.DOFade(1f, 0.5f).OnComplete(() => isAnimating = false);
});
}
}

public void OnPointerExit(PointerEventData eventData)
{
if (!isAnimating)
{
isAnimating = true;
buttonImage.DOFade(0f, 0.5f).OnComplete(() =>
{
buttonImage.sprite = onPointerExitButtonSprite;
buttonImage.DOFade(1f, 0.5f).OnComplete(() => isAnimating = false);
});
}
}

public void OnPointerDown(PointerEventData eventData)
{
if (!isAnimating)
{
isAnimating = true;
buttonImage.DOFade(0f, 0.5f).OnComplete(() =>
{
buttonImage.sprite = onPointerDownButtonSprite;
buttonImage.DOFade(1f, 0.5f).OnComplete(() => isAnimating = false);
});
}
}

public void OnPointerUp(PointerEventData eventData)
{
if (!isAnimating)
{
isAnimating = true;
buttonImage.DOFade(0f, 0.5f).OnComplete(() =>
{
buttonImage.sprite = onPointerExitButtonSprite;
buttonImage.DOFade(1f, 0.5f).OnComplete(() => isAnimating = false);
});
}
}

public void OnPointerClick(PointerEventData eventData)
{
Debug.Log("Mouse click");
}
}

[Tolking]

Там есть режим анимации

[EIvanov]

Там есть режим анимации

Можно пример, как настроить анимацию для плавного перехода (Fade) спрайтов на кнопке? Об этом почти ничего не пишут.

PS
С анимацией я работал, но у меня небольшой опыт в анимации параметров (Scale и т.д.).
В основном использовал аниматор для покадровой анимации (перетаскивание спрайтов в аниматор), настройка переходов между состояниями (стрелки, переменные, условия).
Потом забил на аниматор юнити и начал анимировать в SPINE PRO.

[Alkos26Rus]

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/class-CanvasGroup.html
Наверно тебе нужно юзать ConvasGroup, можно сделать плавное появление\исчезновение элемента при помощи анимации. Параметр Alpha изменяй просто

[1max1]

Нужно 2 спрайта, первый меняет альфу в 0, второй - одновременно с первым меняет альфу на 1.

[EIvanov]

Alkos26Rus
1max1

Сделал на DOTween - работает и даже вроде красиво (если нужен код этой вундервафли могу написать), но есть одна проблема - всё глючит при Time.timeScale = 0f;
Эти кнопки размещены у меня на меню паузы.
Вот пример кода состояния кнопки

Синтаксис:

Синтаксис: [ Показать ]

Используется csharp

public void OnPointerUp(PointerEventData eventData)
 {
pressedButtonImage.DOFade(0f, fadeDuration).SetUpdate(UpdateType.Late, true);                
}
 

При вызове меню паузы я ставлю Time.timeScale = 0f; И анимации меню паузы начинают глючить и тормозить. Даже с SetUpdate(UpdateType.Normal, true);
Без SetUpdate(UpdateType.Normal, true); всё просто виснет.