DOTWeen路径

Dotween Path 路径动画使用方法详解

1、API

Dotween对于路径动画就只提供了两个方法，一个是针对于世界坐标的，一个是针对于局部坐标的，本质上没啥区别，我就以世界坐标的方法为例，进行讲解

参数讲解：

waypoints： 是提供路径上点的坐标，需要按顺序添加进数组
duration：路径动画的整体持续时间
pathType：路径类型（就是点于点之间路径连线的生成方式）
　　　　　它内部预定义了两种类型
　　　　　　Linear：直线
　　　　　　CatmullRom：曲线
pathModel: 路径模式（用于确定正确的LookAt方向）
　　　　　它内部定义了四种类型
　　　　　　Ignore：忽略此参数和设置的LookAt参数
　　　　　　Full3D：在3d场景下，代表物体可以看向任何方向
　　　　　　TopDown2D：代表物体只能上下旋转，看向物体
　　　　　　Sidescroller2D：代表物体只能左右旋转看向物体
resolution：路径分辨率，代表路径点之间的曲线由多少个点构成，也就是点越多，曲线就越圆，此参数在直线路径类型下无效
gizmoColor：在Scene视图中，生成的路径曲线的颜色

2、设置选项

1）SetOptions

closePath：是否是封闭路径，设为true的话，会形成闭环，最后运动回起点
lockPosition：锁定位置，参数为轴向，例如，填入AxisConstraint.X的话，横向的位移将被锁定，物体只能在其他方向上移动
lockRotation:锁定旋转，参数为轴向，和锁定位置同理，锁定的轴向不能旋转

2）SetLookAt

这个方法是很重要的方法，官方的API却有很多地方没有说清楚，有些需要注意的地方，提都没有提
它的后两个参数，是提供看向的轴向，一般很少更改，就不介绍了，主要介绍第一个参数

它针对于第一个参数的改变，有三种重载
　　（1）Transform类型参数 lookAtTransform：也就是要看向的物体
　　（2）Vector3类型参数 lookAtPosition：也就是要看向的位置
　　（3）float类型的参数 lookAhead：一个向前看的参数
前两个很容易理解，就不多说了，主要说一下第三种 lookAhead

lookAhead 参数

限制
这个参数的取值范围是0到1的
首先说明，它值的变化，产生的效果

这个值的变化，决定了物体开始移动时的朝向

但是文档上没有提到的是，这个参数在不同数值下的效果，受到SetOptions的第一个参数closePath影响

（1）closePath为false （运动最后，物体的朝向移动是路径的运动方向的前方）
lookAhead = 0：目标会沿着路径看向前方
lookAhead != 0：目标会按照参数，决定开始运动时的朝向，但是运动期间会匀速转动朝向，最后朝向会转回路径前方的朝向

（2）closePath为true（开始时确定方向后就不会变化了）
lookAhead = 0：目标会沿着路径看向前方
lookAhead >0 && lookAhead <1:一直保持开始时的方向（即如上图所示）
lookAhead = 1：这个时候，SetLookAt没有效果，即物体不会改变朝向

这里所说的朝向是相对于运动路径的朝向

        </div>
					<link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-2b43bc2447.css" rel="stylesheet">
            </div>
								
				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									if(typeof window.localStorage === "object" && typeof window.csdn.anonymousUserLimit === "object"){
										if(!window.csdn.anonymousUserLimit.judgment()){
											window.csdn.anonymousUserLimit.Jumplogin();
											return false;
										}else if(!currentUserName){
											window.csdn.anonymousUserLimit.updata();
										}
									}
									
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>