DoTween常用动画效果

左手的ㄟ右手 2021-09-18 00:56 904阅读 0赞

首先记得引入命名空间：using DG.Tweening;

# 1.渐隐渐现 #

protected CanvasGroup canvasGroup;
        protected void Start()
        {
            if(canvasGroup == null)
            {
                canvasGroup = GetComponent<CanvasGroup>();
            }
        }
        /// <summary>
        /// 界面被显示出来。可设置显示界面动画
        /// </summary>
        public virtual  void OnEnter()
        {
            if (canvasGroup == null) canvasGroup = GetComponent<CanvasGroup>();
            canvasGroup.alpha = 0;
            canvasGroup.blocksRaycasts = true;
            canvasGroup.DOFade(1, .2f);
        }

![20190209200927488.gif][]

# 2.左移右移 #

public override void OnEnter()
        {
            if (canvasGroup == null) canvasGroup = GetComponent<CanvasGroup>();
            canvasGroup.alpha = 1;
            canvasGroup.blocksRaycasts = true;
    
            Vector3 temp = transform.localPosition;
            temp.x = 600;
            transform.localPosition = temp;
            transform.DOLocalMoveX(0, .3f);
        }
    
        public override void OnExit()
        {
            canvasGroup.blocksRaycasts = false;
    
            transform.DOLocalMoveX(600, .3f).OnComplete(() => canvasGroup.alpha = 0);
        }

![20190209201528211.gif][]

# 3.由小变大 #

public override void OnEnter()
        {
            if (canvasGroup == null) canvasGroup = GetComponent<CanvasGroup>();
            canvasGroup.alpha = 1;
            canvasGroup.blocksRaycasts = true;
    
            transform.localScale = Vector3.zero;
            transform.DOScale(0.5f, .3f);
        }
    
        public override void OnExit()
        {
            canvasGroup.blocksRaycasts = false;
    
            transform.DOScale(0, .3f).OnComplete(() => canvasGroup.alpha = 0);
        }

![2019020920190274.gif][]

[20190209200927488.gif]: /images/20210725/99883e61f84e4b5e936297badf91f211.png
[20190209201528211.gif]: /images/20210725/3439dea0439b4b7bbe8b6830ba3d833f.png
[2019020920190274.gif]: /images/20210725/bffdc110d7a44aa78ac9e6f1acf94f96.png