一、UI动效之dotween移动
1.1、页面移入效果
简单方法
-
l 创建一个canvas，添加图片image，重命名为Panel，新建一个按钮，放置下方。
-
l 给按钮添加一个脚本文件，用来检测按钮的点击事件
-
l 对这个按钮：第一次点击将Panel隐藏
-
l 在脚本文件中定义一个OnClick方法监测点击事件
public void OnClick()
{
}
-
l 将onClick方法注册到按钮的OnClick事件上
-
l 当点击按钮时把面板显示出来，如何去做？
-
l 因为要控制面板，所以要先得到Panel的组件
- l 在脚本文件中定义控制的Panel变量，
代码： public RectTransform panelTransform;
- l 现在button中将持有Panel，通过点击按钮button将panel回归页面。
- l 使用dotween的扩展方法，DoMove()
//定义一个方法监测点击事件
public void OnClick()
{
panelTransform.DOMove(new Vector3(0,0,0),2);//將panelTransform从当前位置动画到0,0,0的位置，时间为2秒
}
- l 回到页面运行效果有些出入。
l 原因：不应该变换世界坐标，而是更改局部坐标
//定义一个方法监测点击事件
public void OnClick()
{
//panelTransform.DOMove(new Vector3(0,0,0),2);//將panelTransform从当前位置动画到0,0,0的位置，时间为2秒（修改的是世界坐标）
panelTransform.DOLocalMove(new Vector3(0, 0, 0), 1.5f);
}
效果图：
完整代码：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
public class MyButton : MonoBehaviour
{
//定义控制的Panel变量
public RectTransform panelTransform;
//定义一个方法监测点击事件
public void OnClick()
{
//panelTransform.DOMove(new Vector3(0,0,0),2);//將panelTransform从当前位置动画到0,0,0的位置，时间为2秒（修改的是世界坐标）
panelTransform.DOLocalMove(new Vector3(0, 0, 0), 1.5f);
}
}
1.2、页面移出效果
- l 创建一个布尔值，默认为FALSE，判断panel是否在屏幕当中
public bool isIn = false;
- l 如果bool为FALSE，说明没有进入，点击播放动画，若在屏幕当中，点击让他离开
//定义一个方法监测点击事件
if (isIn == false)
{
//panelTransform.DOMove(new Vector3(0,0,0),2);//將panelTransform从当前位置动画到0,0,0的位置，时间为2秒（修改的是世界坐标）
panelTransform.DOLocalMove(new Vector3(0, 0, 0), 1.5f);//
isIn = true;
}
else
{
//让panel离开屏幕,将这个动画倒放则是离开
panelTransform.DOPlayBackwards();//倒放
isIn = false;
}
- l 但是此处点击按钮倒放出问题，页面没有离开，是因为此处默认动画播放完会销毁，倒放此处会出问题，解决：调用DOLocalMove时有个返回值：Tweener,这个Tweener对象保存的是该动画
//定义一个方法监测点击事件
if (isIn == false)
{
//panelTransform.DOMove(new Vector3(0,0,0),2);//將panelTransform从当前位置动画到0,0,0的位置，时间为2秒（修改的是世界坐标）
Tweener tweener = panelTransform.DOLocalMove(new Vector3(0, 0, 0), 1.5f);//此处默认动画播放完会销毁，倒放此处会出问题
//调用DOLocalMove时有个返回值：Tweener,这个Tweener对象保存的是该动画
//每次调用do类型的方法（关于动画）都会创建一个Tweener对象，这个对象是dotween来管理的
tweener.SetAutoKill(false);//把autokill自动销毁设置为FALSE
isIn = true;
}
else
{
//让panel离开屏幕,将这个动画倒放则是离开
panelTransform.DOPlayBackwards();//倒放
isIn = false;
}
- l 运行后成功进入离开
1.3、优化do动画性能
-
l 在播放页面后层级处会出现一个dotween对象，点击详情会看到Active Tweens有一个动画数量为4，这是因为刚刚创建了4次，所以执行了4次动画，这样浪费性能，只需让其调用一次do方法即可，如何做呢？
-
l 将do方法的调用放置start方法里
void Start()
{
//panelTransform.DOMove(new Vector3(0,0,0),2);//將panelTransform从当前位置动画到0,0,0的位置，时间为2秒（修改的是世界坐标）
Tweener tweener = panelTransform.DOLocalMove(new Vector3(0, 0, 0), 1.5f);//此处默认动画播放完会销毁，倒放此处会出问题
//调用DOLocalMove时有个返回值：Tweener,这个Tweener对象保存的是该动画
//每次调用do类型的方法（关于动画）都会创建一个Tweener对象，这个对象是dotween来管理的
tweener.SetAutoKill(false);//把autokill自动销毁设置为FALSE
}
- l 在start中每次执行都会调用该动画，但是最开始时不执行，把它暂停即可
tweener.Pause(); - l 若要播放，则调用Tweener或panelTransform中的play方法来进行调用
panelTransform.DOPlay(); - 执行后动画只调用了一次，播放执行了doplay方法，倒放执行了DOPlayBackwards方法，只执行了一次，这是为什么呢？是因为DOPlay只会执行一次，所以使用DOPlayForward方法--向前进行播放。
完整代码如下：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
public class MyButton : MonoBehaviour
{
//定义控制的Panel变量
public RectTransform panelTransform;
//定义布尔值判断panel是否在屏幕当中
public bool isIn = false;
void Start()
{
//panelTransform.DOMove(new Vector3(0,0,0),2);//將panelTransform从当前位置动画到0,0,0的位置，时间为2秒（修改的是世界坐标）
Tweener tweener = panelTransform.DOLocalMove(new Vector3(0, 0, 0), 1.5f);//此处默认动画播放完会销毁，倒放此处会出问题
//调用DOLocalMove时有个返回值：Tweener,这个Tweener对象保存的是该动画
//每次调用do类型的方法（关于动画）都会创建一个Tweener对象，这个对象是dotween来管理的
tweener.SetAutoKill(false);//把autokill自动销毁设置为FALSE
//每次执行都会调用该动画，但是最开始时不执行，把它暂停即可
tweener.Pause();
}
//定义一个方法监测点击事件
public void OnClick()
{
if (isIn == false)
{
panelTransform.DOPlayForward();//前放
isIn = true;
}
else
{
//让panel离开屏幕,将这个动画倒放则是离开
panelTransform.DOPlayBackwards();//倒放
isIn = false;
}
}
}
