【Unity学习笔记】DOTween(2)官方案例

在这里插入图片描述

本文中大部分内容学习来自DOTween官方文档

此处无法展示动图(懒得录GIF),请下载官方案例场景自行学习

文章目录

  • 场景1 基本补间
  • 场景2 动态补间
  • 场景3 Shader修改
  • 场景4 路径拟合运动
  • 场景5 序列播放
  • 场景6 UGUI


场景1 基本补间

案例一展示了最基础的一些用法:
在这里插入图片描述

	IEnumerator Start(){// Start after one second delay (to ignore Unity hiccups when activating Play mode in Editor)yield return new WaitForSeconds(1);// Let's move the red cube TO 0,4,0 in 2 secondsredCube.DOMove(new Vector3(0,4,0), 2);// Let's move the green cube FROM 0,4,0 in 2 secondsgreenCube.DOMove(new Vector3(0,4,0), 2).From();// Let's move the blue cube BY 0,4,0 in 2 secondsblueCube.DOMove(new Vector3(0,4,0), 2).SetRelative();// Let's move the purple cube BY 6,0,0 in 2 seconds// and also change its color to yellow.// To change its color, we'll have to use its material as a target (instead than its transform).purpleCube.DOMove(new Vector3(6,0,0), 2).SetRelative();// Also, let's set the color tween to loop infinitely forward and backwardspurpleCube.GetComponent<Renderer>().material.DOColor(Color.yellow, 2).SetLoops(-1, LoopType.Yoyo);}

解读一下代码,redCube的移动是在两秒内移动到了指定坐标0,4,0,而greenCube移动带有From方法,则是从坐标0,4,0移动到原坐标。blueCube指定了SetRelative,则会以自身坐标为原点,移动到相对于自身坐标轴的0,4,0坐标上去。

而purpleCube除了应用Move的坐标变换,还将其组件的材质颜色进行了修改,使其由紫色变为黄色,并用SetLoops将循环模式设置为了-1,LoopType.Yoyo,第一个参数代表循环次数,-1代表了无限循环,第二个参数则代表了循环曲线模式。


场景2 动态补间

在这里插入图片描述

场景2实现了Follower对Followed的实时跟踪

public class Follow : MonoBehaviour
{public Transform target; // Target to followVector3 targetLastPos;Tweener tween;void Start(){// First create the "move to target" tween and store it as a Tweener.// In this case I'm also setting autoKill to FALSE so the tween can go on forever// (otherwise it will stop executing if it reaches the target)tween = transform.DOMove(target.position, 2).SetAutoKill(false);// Store the target's last position, so it can be used to know if it changes// (to prevent changing the tween if nothing actually changes)targetLastPos = target.position;}void Update(){// Use an Update routine to change the tween's endValue each frame// so that it updates to the target's position if that changedif (targetLastPos == target.position) return;// Add a Restart in the end, so that if the tween was completed it will play againtween.ChangeEndValue(target.position, true).Restart();targetLastPos = target.position;}
}

简单三行代码,轻松实现,效果比德芙还丝滑,用SetAutoKill(false)确保Tween不会被自动回收,使用targetLastPos来每帧更新追踪(移动)的目标坐标,使用ChangeEndValue(target.position, true)来改变Tween的结束位置,第一个参数指定结束位置的值,第二个参数指定是否重新移动要从初始设置的值开始(还有一个重载函数public abstract Tweener ChangeEndValue(object newEndValue, float newDuration = -1, bool snapStartValue = false,第二个float值决定是否设置新的Duration时长)。

最后使用Restart()来重新开启补间动画。


场景3 Shader修改

在这里插入图片描述

public class Materials : MonoBehaviour
{public GameObject target;public Color toColor;Tween colorTween, emissionTween, offsetTween;void Start(){// NOTE: all tweens will be created in a paused state, so they can be toggled via the UI// Store the material, since we will tween thatMaterial mat = target.GetComponent<Renderer>().material;// COLORcolorTween = mat.DOColor(toColor, 1).SetLoops(-1, LoopType.Yoyo).Pause();// EMISSION// Note that the float value you see in Unity's inspector, next to the emission's color,// doesn't really exist in the shader (it's generated by Unity's inspector and applied to the material's color),// se we have to tween the full _EmissionColor.emissionTween = mat.DOColor(new Color(0, 0, 0, 0), "_EmissionColor", 1).SetLoops(-1, LoopType.Yoyo).Pause();// OFFSET// In this case we set the loop to Incremental and the ease to Linear, because it's cooleroffsetTween = mat.DOOffset(new Vector2(1, 1), 1).SetEase(Ease.Linear).SetLoops(-1, LoopType.Incremental).Pause();}// Toggle methods (called by UI events)public void ToggleColor(){colorTween.TogglePause();}public void ToggleEmission(){emissionTween.TogglePause();}public void ToggleOffset(){offsetTween.TogglePause();}
}

案例三中介绍了对shader中的材质的各种值的补间变化,定义了colorTween,emissionTween,ToggleOffset三个Tween的补间。DO方法都是相似的,需要注意的是emissionTween由于是直接改变Shader中的值,所以用字符串读取了该Shader中的_EmissionColorSetEase(Ease.Linear)设置了增长类型并设定为线性的。
在这里插入图片描述

所有的Tween在初始化时设置了Pause(),当我们点击按钮时,触发TogglePause()方法,如果正在播放则暂停,如果暂停则播放。


场景4 路径拟合运动

在这里插入图片描述

场景4允许我们自定义路径和坐标,让物体沿着坐标点拟合的路径进行运动

public class Paths : MonoBehaviour
{public Transform target;public PathType pathType = PathType.CatmullRom;public Vector3[] waypoints = new[] {new Vector3(4, 2, 6),new Vector3(8, 6, 14),new Vector3(4, 6, 14),new Vector3(0, 6, 6),new Vector3(-3, 0, 0)};void Start(){// Create a path tween using the given pathType, Linear or CatmullRom (curved).// Use SetOptions to close the path// and SetLookAt to make the target orient to the path itselfTween t = target.DOPath(waypoints, 4, pathType).SetOptions(true).SetLookAt(0.001f);// Then set the ease to Linear and use infinite loopst.SetEase(Ease.Linear).SetLoops(-1);}
}

想要拟合出路径,只需要设置好坐标点数组Vector3[],然后设定补间时间,最后设定拟合路径的曲线类型pathType,默认是线性的。使用SetOptions来设定路径是否闭合,(注意,SetOptions是一个很特别的方法,对于不同的DO方法,对应的SetOptions有不同的参数,具体还是得看官方文档)。DOPath也有重载方法,学会查看引用和查阅官方文档是很重要的事情!


场景5 序列播放

public class Sequences : MonoBehaviour
{public Transform cube;public float duration = 4;IEnumerator Start(){// Start after one second delay (to ignore Unity hiccups when activating Play mode in Editor)yield return new WaitForSeconds(1);// Create a new Sequence.// We will set it so that the whole duration is 6Sequence s = DOTween.Sequence();// Add an horizontal relative move tween that will last the whole Sequence's durations.Append(cube.DOMoveX(6, duration).SetRelative().SetEase(Ease.InOutQuad));// Insert a rotation tween which will last half the duration// and will loop forward and backward twices.Insert(0, cube.DORotate(new Vector3(0, 45, 0), duration / 2).SetEase(Ease.InQuad).SetLoops(2, LoopType.Yoyo));// Add a color tween that will start at half the duration and last until the ends.Insert(duration / 2, cube.GetComponent<Renderer>().material.DOColor(Color.yellow, duration / 2));// Set the whole Sequence to loop infinitely forward and backwardss.SetLoops(-1, LoopType.Yoyo);}
}

使用序列可以执行多个Tween,正常Append的话就是像委托一样的一个一个地执行,(感兴趣可以试试下面的代码),这样子的话整个动画的执行就是每个Append中的Tween依次执行动画,也就是先移动,再旋转,再变色,而执行完毕之后由于设置了loop,整个序列动画会再倒放一次,直到回到原始状态又开始播放。

而使用Insert方法,我们可以设定什么时间点可以直接播放Tween补间动画,由第一个参数指定播放的时间即可。这样就可以再移动的同时,也会旋转和变色了。并且Sequence作为一个整体,只有全部动画播完才会循环倒放,而不是各个Tween独自计算播放循环,各个Tween是相关联的。

public class Sequences : MonoBehaviour
{public Transform cube;public float duration = 4;IEnumerator Start(){// Start after one second delay (to ignore Unity hiccups when activating Play mode in Editor)yield return new WaitForSeconds(1);// Create a new Sequence.// We will set it so that the whole duration is 6Sequence s = DOTween.Sequence();// Add an horizontal relative move tween that will last the whole Sequence's durations.Append(cube.DOMoveX(6, duration).SetRelative().SetEase(Ease.InOutQuad));// Insert a rotation tween which will last half the duration// and will loop forward and backward twices.Append( cube.DORotate(new Vector3(0, 45, 0), duration / 2).SetEase(Ease.InQuad).SetLoops(2, LoopType.Yoyo));// Add a color tween that will start at half the duration and last until the ends.Append(cube.GetComponent<Renderer>().material.DOColor(Color.yellow, duration / 2));// Set the whole Sequence to loop infinitely forward and backwardss.SetLoops(-1, LoopType.Yoyo);}
}

场景6 UGUI

在这里插入图片描述

该场景展示了一些使用DOTween实现的常见的动画效果,包括图像渐入渐出,循环环状载入条,循环条状条,字体变化等等。

public class UGUI : MonoBehaviour
{public Image dotweenLogo, circleOutline;public Text text, relativeText, scrambledText;public Slider slider;void Start(){// All tweens are created in a paused state (by chaining to them a final Pause()),// so that the UI Play button can activate them when pressed.// Also, the ones that don't loop infinitely have the AutoKill property set to FALSE,// so they won't be destroyed when complete and can be resued by the RESTART button// Animate the fade out of DOTween's logodotweenLogo.DOFade(0, 1.5f).SetAutoKill(false).Pause();// Animate the circle outline's color and fillAmountcircleOutline.DOColor(RandomColor(), 1.5f).SetEase(Ease.Linear).Pause();circleOutline.DOFillAmount(0, 1.5f).SetEase(Ease.Linear).SetLoops(-1, LoopType.Yoyo).OnStepComplete(()=> {circleOutline.fillClockwise = !circleOutline.fillClockwise;circleOutline.DOColor(RandomColor(), 1.5f).SetEase(Ease.Linear);}).Pause();// Animate the first text...text.DOText("This text will replace the existing one", 2).SetEase(Ease.Linear).SetAutoKill(false).Pause();// Animate the second (relative) text...relativeText.DOText(" - This text will be added to the existing one", 2).SetRelative().SetEase(Ease.Linear).SetAutoKill(false).Pause();// Animate the third (scrambled) text...scrambledText.DOText("This text will appear from scrambled chars", 2, true, ScrambleMode.All).SetEase(Ease.Linear).SetAutoKill(false).Pause();// Animate the sliderslider.DOValue(1, 1.5f).SetEase(Ease.InOutQuad).SetLoops(-1, LoopType.Yoyo).Pause();}// Called by PLAY button OnClick event. Starts all tweenspublic void StartTweens(){DOTween.PlayAll();}// Called by RESTART button OnClick event. Restarts all tweenspublic void RestartTweens(){DOTween.RestartAll();}// Returns a random colorColor RandomColor(){return new Color(Random.Range(0f, 1f), Random.Range(0f, 1f), Random.Range(0f, 1f), 1);}
}

使用DOFade实现渐隐效果,第一个是alpha值,第二个参数是补间时间。

环状进度条变化的代码很巧妙,首先使用DOFillAmount对image组件进行百分比的填充,这是基于组件本身的填充模式的,在本场景中该组件的填充模式是顺时针,但是SetLoops()是会倒放补间动画的,也就是刚开始播放时,环状进度条顺时针减少,接着如果倒放就会变成逆时针增加,但是顺时针增加会比逆时针增加好看很多,所以在这里用了OnStepComplete来判断当补间动画播放完毕的时候,添加一个委托,让指针方向取反,顺时针就成了逆时针,而逆时针对应倒放就是顺时针,从而实现了顺时针减少进度条,倒放时顺时针增加进度条。而之所以重新定义了DOColor的补间动画,是希望颜色能够始终随机变化,而不是倒放回去。

DOText展现了三种文字变化的模式,分别对应逐字变化,空白打字,乱码显字三种字体的显示效果。按照上述代码设置即可。

最后就是PlayAllRestartAll,这两个方法控制所有的Tween的行为。


使用DOTween,能够简单地实现强大的视觉效果,真的牛b。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/51669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AMBA总线协议(0)——目录与传送门

一、AMBA总线协议 Arm高级微控制器总线架构&#xff08;Advanced Microcontroller Bus Architecture&#xff0c;AMBA&#xff09;是一种开放式标准片上互联规范&#xff0c;用于连接和管理片上系统&#xff08;System on Chip,Soc&#xff09;中的功能块。 AMBA是一种广泛用于…

【DevOps视频笔记】4.Build 阶段 - Maven安装配置

一、Build 阶段工具 二、Operate阶段工具 三、服务器中安装 四、修改网卡信息 五、安装 jdk 和 maven Stage1 : 安装 JDK Stage 2 : 安装 Maven 2-1 : 更换文件夹名称 2-2 : 替换配置文件 settings.xml- 2-3 : 修改settings.xml详情 A. 修改maven仓库地址 - 阿里云 B…

CentOS系统环境搭建(十七)——elasticsearch设置密码

centos系统环境搭建专栏&#x1f517;点击跳转 elasticsearch设置密码 没有密码是很不安全的一件事&#x1f62d; 文章目录 elasticsearch设置密码1.设置密码2.登录elasticsearch3.登录kibana4.登录elasticsearch-head 1.设置密码 关于Elasticsearch的安装请看CentOS系统环境搭…

适配小程序隐私保护指引设置

由于小程序发布了一个公告&#xff0c;那么接下来就是怎么改简单的问题了。毕竟不太想大的改动历史上的代码。尽量简单的适配隐私策略就可以了。 整体思路也是参考现在App普遍的启动就让用户同意隐私策略&#xff0c;不同意不让用&#xff0c;同意了之后才能够继续使用。 公告…

计算机网络 QA

DNS 的解析过程 浏览器缓存。当用户通过浏览器访问某域名时&#xff0c;浏览器首先会在自己的缓存中查找是否有该域名对应的 IP 地址&#xff08;曾经访问过该域名并且没有清空缓存&#xff09;系统缓存。当浏览器缓存中无域名对应的 IP 地址时&#xff0c;会自动检测用户计算机…

docker搭建owncloud,Harbor,构建镜像

1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。 拉取镜像 docker pull owncloud docker pull mysql:5.6 2、安装搭建私有仓库 Harbor 1.下载docker-compose 2.安装harbor 3.编辑 harbor.yml文件 使用./intall.sh安装 4.登录 3、编写Dockerfile制作Web应用系…

【学习FreeRTOS】第13章——FreeRTOS队列

1.队列简介 队列是任务到任务、任务到中断、中断到任务数据交流的一种机制&#xff08;消息传递&#xff09; FreeRTOS基于队列&#xff0c; 实现了多种功能&#xff0c;其中包括队列集、互斥信号量、计数型信号量、二值信号量、 递归互斥信号量&#xff0c;因此很有必要深入了…

Linux CentOS7系统,抓取http协议的数据包

使用 tcpdump 命令 1.首先确认是否安装 [rootlocalhost ~]# which tcpdump /usr/bin/which: no tcpdump in (/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin) [rootlocalhost ~]#我这里没有安装 1.1 安装 tcpdump yum install tcpdump 安装成功如下&#xf…

【C++ 学习 ⑯】- 继承(上)

目录 一、继承的概念和定义 1.1 - 概念 1.2 - 定义 二、继承时的对象内存模型 三、向上转型和向下转型 四、继承时的名字遮蔽问题 4.1 - 有成员变量遮蔽时的内存分布 4.2 - 重名的基类成员函数和派生类成员函数不构成重载 一、继承的概念和定义 1.1 - 概念 C 中的继承…

【AWS】创建IAM用户;无法登录IAM用户怎么办?错误提示:您的身份验证信息错误,请重试(已解决)

目录 0.背景问题分析 1.解决步骤 0.背景问题分析 windows 11 &#xff0c;64位 我的问题情景&#xff1a; 首先我创建了aws的账户&#xff0c;并且可以用ROOT用户登录&#xff0c;但是在登录时选择IAM用户&#xff0c;输入ROOT的名字和密码&#xff0c;就会提示【您的身份验证…

【分布式技术专题】「OSS中间件系列」从0到1的介绍一下开源对象存储MinIO技术架构

MinIO背景介绍 MinIO创始者是Anand Babu Periasamy, Harshavardhana&#xff08;戒日王&#xff09;等人&#xff0c; Anand是GlusterFS的初始开发者、Gluster公司的创始人与CTO&#xff0c;Harshavardhana曾经是GlusterFS的开发人员&#xff0c;直到2011年红帽收购了Gluster公…

基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十:实体配置功能实现

一、本章内容 本章实现实体配置功能,包括识别实体属性、设置各属性的展示方式、相关类型、要和展示、编辑的内容等。 1. 详细课程地址: 待发布 2. 源码下载地址: 待发布 二、界面预览 三、开发视频 3.1 B站视频地址:

MISRA 2012学习笔记(3)-Rules 8.4-8.7

文章目录 Rules8.4 字符集和词汇约定(Character sets and lexical conventions)Rule 4.1 八进制和十六进制转译序列应有明确的终止识别标识Rule 4.2 禁止使用三字母词(trigraphs) 8.5 标识符(Identifiers)Rule 5.1 外部标识符不得重名Rule 5.2 同范围和命名空间内的标识符不得重…

673. 最长递增子序列的个数

673. 最长递增子序列的个数 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;方法一&#xff1a;动态规划方法二&#xff1a;贪心 前缀和 二分查找 参考代码&#xff1a;__673最长递增子序列的个数__动态规划__673最长递增子序列的个数__贪心_前缀和_二分查找…

书单背景图片哪里找?如何制作成视频?

有没有小伙伴们发现&#xff0c;如今很多热门的短视频平台有很多使用书单文案制作的视频&#xff0c;很多情感博主会配上一些精致的图片&#xff0c;唯美的背景承载着一些美好的文案内容。这种类型的视频让不少的小伙伴都想制作专属于自己的视频来投稿&#xff0c;那么小伙伴们…

linux系统(centos、ubuntu、银河麒麟服务、uos、deepin)判断程序是否已安装,通用判断方法:使用所有应用和命令的判断

前言 项目中需要判断linux服务器中是否已经安装了某个服务 方法有很多种&#xff0c;但是很多都不通用&#xff0c; 脚本代码就不容易做成统一的 解决方案 用下面的脚本代码去进行判断 用jdk测试 脚本意思如下&#xff1a; 输入java -version命令&#xff0c;将返回的字…

【数据结构练习】单链表OJ题(一)

目录 一、移除链表元素思路1&#xff1a;思路2&#xff1a; 二、反转链表三、链表的中间节点四、链表中倒数第k个节点五、回文结构六、合并两个有序链表 一、移除链表元素 题目&#xff1a; 思路1&#xff1a; 在原来的链表上进行修改&#xff0c;节点的数据是val的删除&am…

Cesium 使用 Entity 绘制点线面

文章目录 一、绘制点1. 第一种2. 第二种 二、绘制面三、绘制线四、移除 Entity <!--* Author: HuKang* Date: 2023-08-18 11:06:43* LastEditTime: 2023-08-25 09:16:59* LastEditors: HuKang* Description: program-c* FilePath: \global-data-display\src\views\program-c…

第一讲使用IDEA创建Java工程——HelloWorld

一、前言导读 为了能够让初学者更快上手Java,不会像其他书籍或者视频一样,介绍一大堆历史背景,默认大家已经知道Java这么编程语言了。本专栏只会讲解干货,直接从HelloWord入手,慢慢由浅入深,讲个各个知识点,这些知识点也是目前工作中项目使用的,而不是讲一些老的知识点…

16、Flink 的table api与sql之连接外部系统: 读写外部系统的连接器和格式以及FileSystem示例(1)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…