Cinemachine教程 | Unity中如何制作路径动画?

article/2025/10/24 11:11:37

摘要:在Unity中制作路径动画是有挺多方式的,基于Cinemachine的Dolly Path是一个简单便捷的方法,咱们来快速的学习一下吧!

洪流学堂,让你快人几步。你好,我是跟着大智(VX: zhz11235)学Unity的萌新,我叫小新,这是我本周的学习总结报告哦。

dolly.gif

制作路径动画在Unity中是100%会遇到的一个需求。方式也有很多,列举几种:
1、通过Animation制作动画(优点:简单;缺点:不直观,无法直观看到路径中间的插值位置,灵活性差)
2、通过Tween插件(优点:灵活性高,可通过代码运行时修改路径点;缺点:有一定学习成本,可视化插件需付费,如Dotween Pro)
3、通过代码手撸一个路径动画(优点:灵活性高,最适配自己项目的需求;缺点:难度较高)
4、通过Cinemachine的Dolly Track(优点:Unity官方插件,版本适配好,功能够用;缺点:灵活性稍差)

最近咱们一直在学习Cinemachine,当然这篇理所当然应该尝试下Cinemachine的Dolly Path。Let‘s go!

使用Dolly Path(滑轨路径)

路径动画有两个部分:如何创建路径以及如何使用这个路径

创建Dolly Path

Cinemachine中有两种Dolly Path组件:

  • CinemachinePath组件:每个路径点都可以设置位置、切线和翻转角度,可以最大程度控制路径。但是如果切线设置的不合理,相机在路径上运动时可能会有不稳定的现象。
  • CinemachineSmoothPath组件:每个路径点都可以设置位置和翻转角度。组件中会使用Bezier算法来推算路径点之间的位置。虽然SmoothPath不能完全控制路径,但是整个路径会更平滑和连续。推荐优先使用

如何创建Dolly Path呢?

方法一:如果是在相机上制作路径动画,可以直接创建Dolly Camera。菜单栏Cinemachine > Create Dolly Camera with Track。点击后会创建一个虚拟相机和dolly path。这个Path默认是SmoothPath。虚拟相机会自动设置好Body属性为Dolly Track并且Path属性赋值为创建出来的Dolly path。

方法二:如果是给GameObject制作路径动画,可以直接创建Dolly Cart。菜单栏Cinemachine > Create Dolly Track With Cart。点击后会创建一个虚拟相机和DollyCart。这个Path默认是SmoothPath。只需要把做路径动画的物体作为Cart的子物体即可。

方法三:直接创建Dolly Path。创建一个空物体,给空物体添加CinemachinePath或CinemachineSmoothPath组件。

如何编辑路径点呢?

1、在Hierarchy中选中Path物体。这时候能在Scene中看到整个路径以及上面的路径点(小白球)。
2、可以在Inspector上的路径点列表右下角点击加号+添加路径点。
3、可以点击场景中的小白球或者Inspector上路径点前面的序号按钮选中一个路径点。
4、选中路径点时,场景中路径点上会有移动工具,可以用来可视化移动。此外还可以在Inspector上直接修改数值。

CinemachinePath组件

CinemachinePath中定义了一系列的路径点,定义在世界空间中。每个路径点都有位置、切线和翻滚角度。在路径点之间使用贝塞尔曲线插值,来获得平滑、连续的路径。

提示:尽管路径位置始终是平滑连续的,但沿路径设置动画时仍然可能会产生不稳定的现象。当设置的切线没有保证一阶和二阶导数的连续性时,就会发生这种情况。手动做到这一点并不容易,为避免这种潜在的不稳定现象,尽量使用CinemachineSmoothPath。CinemachineSmoothPath自动设置切线以确保完全平滑。

属性详解
Resolution 每个路径点之间采样的次数。Cinemachine在计算路径距离时使用此值来限制粒度。场景视图中路径Gizmo上的交叉线反映了该值。

Appearance 路径在场景中显示的外观。只在编辑器中生效。

  • Path Color 选中路径时的颜色。
  • Inactive Path Color 未选中路径的颜色。
  • Width 路径轨道的宽度。

Looped 选中后,路径会首尾相连。
Path Length 整个路径长度,这个数据是只读的,根据所有路径点计算出来的。
Selected Waypoint 当前选中的路径点的信息。
Prefer Tangent Drag 当切线和位置的Gizmos在Scene视图中重合时,选中该选项将Gizmo用来调节路径点的切线。

正常情况下CinemachinePath选中路径点时有两个Gizmo

Waypoints 定义路径点的列表。

  • Position 位置,在路径局部空间中的位置(即相对于路径GameObject本身的变换)
  • Tangent 切线,定义了路径点上曲线的切线。切线的长度代表了贝塞尔的强度。Path路径点两边默认使用对称的切线以确保平滑。
  • Roll* 翻转角度。朝向的其他轴方向是从切线和世界的向上向量推断出来的。

CinemachineSmoothPath组件

与Cinemachine Path不同,CinemachineSmoothPath组件保证了一阶和二阶连续性,这意味着沿路径动画的对象不仅位置而且角速度也将是平滑且连续的。

属性详解
Resolution 每个路径点之间采样的次数。Cinemachine在计算路径距离时使用此值来限制粒度。场景视图中路径Gizmo上的交叉线反映了该值。

Appearance 路径在场景中显示的外观。只在编辑器中生效。

  • Path Color 选中路径时的颜色。
  • Inactive Path Color 未选中路径的颜色。
  • Width 路径轨道的宽度。

Looped 选中后,路径会首尾相连。
Path Length 整个路径长度,这个数据是只读的,根据所有路径点计算出来的。

Waypoints 定义路径点的列表。

  • Position 位置,在路径局部空间中的位置(即相对于路径GameObject本身的变换)
  • Roll* 翻转角度。朝向的其他轴方向是从切线和世界的向上向量推断出来的。

如何使用这个路径

滑轨路径(Dolly Path)是场景中的路径点数组形成的一条路径。

使用滑轨路径分为相机路径动画和其他物体路径动画:

  • 相机路径动画建议使用Cinemachine中的VirtualCamera,然后Body的算法设置为Tracked Dolly,然后将其中的Path属性设置为编辑好的Path。
  • 其他GameObject的路径动画可以使用Cinemachine中的Dolly Cart组件。

CinemachineDollyCart组件制作路径动画

Cinemachine Dolly Cart翻译过来是滑轨小车。相当于把一个物体放在小车里,然后在轨道上移动。这个组件就是把当前所附着的GameObject沿着path移动。

可以直接从菜单栏创建Cinemachine > Create Dolly Track With Cart,这会创建出来一个CinemachineSmoothPath和CinemachineDollyCart。也可以直接给GameObject添加CinemachineDollyCart组件。

属性详解
Path 路径对象
Update method 更新的方法。

  • Update 正常更新
  • Fixed Update 与物理更新同步
  • Late Update 通常用于相机的更新

Position Unit 位置的单位

  • Path Units 使用路径点的序号。比如0代表第一个路径点,1代表第二个路径点。
  • Distance 使用路径的总长度。
  • Normalized 归一化。0代表路径最开始的位置,1代表路径结束的位置。

Speed 移动小车的速度。基于Position Unit设置的单位。如果速度不为0,则小车会根据速度自动移动。
Position 当前小车所处的位置。基于Position Unit设置的单位。

扩展阅读

  • 【Cinemachine智能相机教程】VirtualCamera(四):Noise属性
  • 【Cinemachine智能相机教程】VirtualCamera(三):Aim属性
  • 【Cinemachine智能相机教程】VirtualCamera(二):Body属性
  • 【Cinemachine】VirtualCamera虚拟相机详解(一)
  • 5分钟入门Cinemachine智能相机系统
  • Unity编辑器录屏神器:Unity Recorder
  • 5分钟制作过场动画
  • 【建议收藏】找不到免费的角色动画?来试试mixamo

【扩展学习】洪流学堂公众号回复timeline可以下载Timeline&Cinemachine系列教程全文带目录PDF哦,更有本文的视频教程等着你!


呼~ 今天小新絮絮叨叨的真是够够的了。没讲清楚的地方欢迎评论,咱们一起探索。

我是大智(欢迎加我微信:zhz11235),你的技术探路者,下次见!

别走!点赞收藏哦!

好,你可以走了。


http://chatgpt.dhexx.cn/article/b4LRSgK4.shtml

相关文章

Android实现 曲线路径动画

本文参考 https://www.jianshu.com/p/fea4d1f6512a 概述 近期碰到曲线动画的实现问题,写本文记录下。 动画类似“剑与远征”游戏的金币动画,动画路径如下图: 思路 通过贝塞尔曲线计算出x和y的位置(各个点的位置需要自己微调&am…

WPF实现路径动画

让目标沿着一条给定的路径移动&#xff0c;使用DoubleAnimationUsingPath类实现。实现如下。 点击鼠标移动 实现代码如下&#xff1a;界面XAML <Grid x:Name"LayoutRoot"> <Grid.Resources> <PathGeometry x:Key"movingPath…

Houdini:最小白的路径动画

涉及节点&#xff1a;curve、constraints、follow path 涉及知识&#xff1a;路径动画、约束 提一嘴maya的路径动画&#xff1a;在constrain-->motion paths -->attach motion path中 一、模型准备 一个模型和一个curve曲线&#xff0c;分别在两个geometry里面&#…

UE5蓝图时间轴摄影机路径动画

1. 新建蓝图类Actor 2. 蓝图里添加Spline和Camera组件&#xff0c;另外添加一个Scene场景组件&#xff0c;可以把Camera拖到Scene的子级&#xff0c;这样做可以让Camera在沿着路径运动的时候自由更改旋转方向 3. 打开关卡蓝图&#xff0c;首先按键获取MovingLine的Camera视角&a…

html5 路径运动,探秘神奇的运动路径动画 Motion Path

CSS 中有一个非常有意思的模块 -- CSS Motion Path Module Level 1,翻译过来也就是运动路径。本文将对 motion path 一探究竟,通过本文,你可以了解到:什么是 CSS motion path 使用 CSS motion path 制作简单路径动画 使用 CSS motion path 制作复杂路径动画 什么是 CSS Mot…

canvas绘制折线路径动画

最近有读者加我微信咨询这个问题&#xff1a; 其中的效果是一个折线路径动画效果&#xff0c;如下图所示&#xff1a; 要实现以上路径动画&#xff0c;一般可以使用svg的动画功能。或者使用canvas绘制&#xff0c;结合路径数学计算来实现。 如果用canvas来绘制&#xff0c…

路径动画

工作日记&#xff0c;最近做项目遇到一个有意思的动画效果&#xff0c;路径动画&#xff0c;做一个demo&#xff0c;方便以后查阅&#xff0c;也供初学者借鉴&#xff01; 效果如下图&#xff1a; 效果分两步&#xff1a; 第一步是把书翻开&#xff0c;是一个贞动画&#xf…

openlayers实现路径动画

实现效果如下 主要代码 import {Feature} from ol; import {LineString, Point} from ol/geom; import {Icon, Stroke, Fill, Style} from ol/style; import {getVectorContext} from ol/render;// 路径动画图层 let traceSource new VectorSource({}); let moveLayer new…

咸鱼Maya笔记—路径动画

咸鱼Maya笔记—路径动画 创建路径动画 动画的创建方式有很多种&#xff0c;路径动画是其中的一种&#xff0c;Key关键帧的方式并不适用于所有的情况&#xff0c;有些特定的情况下我们就需要用到路径动画&#xff0c;它的创建方法如下 创建路径动画 &#xff08;如果你的maya菜…

CSS 路径动画

前言 最近看css大佬chokcoco的文章&#xff0c;看到了这篇 探秘神奇的运动路径动画 Motion Path 关于css路径动画的文章。 之前没学过&#xff0c;这里按照大佬的文章进行简单的学习。 Motion Path CSS Motion Path 规范主要包含以下几个属性&#xff1a; offset-path&…

AnimationPath路径动画实现详解

AnimationPath路径动画实现详解&#xff1a; 一、关联类图展示 二、实现详解 首先我们通过调用createAnimationPath方法来创建动画路径&#xff0c;即&#xff1a;通过起点、终点以及之间的时间步长来进行插值来保证动画的一个流畅度&#xff0c;然后将这些时间和点保存到一个…

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

Dotween对于路径动画部分的api我觉得注释的过少了&#xff0c;很多用法没有写清楚&#xff0c;这里我就对Dotween Path做一下详细说明 1、API Dotween对于路径动画就只提供了两个方法&#xff0c;一个是针对于世界坐标的&#xff0c;一个是针对于局部坐标的&#xff0c;本质上…

WPF路径动画

特此声明&#xff1a;本文为CSDN博主「田野上的风筝」&#xff0c;原文地址&#xff1a;https://blog.csdn.net/weixin_43100896/article/details/87899883。感谢大佬的总结&#xff0c; 下文为转载内容。 在WPF中实现动画并不是什么困难的事&#xff0c;因为WPF提供了动画模型…

10路径动画

using System.Collections; using System.Collections.Generic; using System.Linq; using DG.Tweening; using UnityEngine;public class PathMove : MonoBehaviour {public Transform[] pointList;void Start(){//select方法,直接得到值,查询要返回的目标数据 int[] numm {…

服务器连接超时是怎么回事呢?

服务器连接超时就是在程序默认的等待时间内没有得到服务器的响应。 网络连接超时可能的原因有那些呢&#xff1f; 1、网络断开&#xff0c;不过经常显示无法连接。网络阻塞&#xff0c;导致你不能在程序默认等待时间内得到回复数据包。 2、网络不稳定&#xff0c;网络无法完整…

服务器时间修改连接超时时间,服务器设置网络连接超时时间设置

服务器设置网络连接超时时间设置 内容精选 换一换 有以下几种现象:将制作好的SD卡插入开发者板并上电后,开发者板LED1与LED2灯状态信息异常。将制作好的SD卡插入开发者板,并通过USB方式连接Ubuntu服务器,上电、开发者板启动完成后,Ubuntu服务器无虚拟网卡信息。将制作好的…

修改服务器超时时间,服务器超时时间设置

服务器超时时间设置 内容精选 换一换 在压测过程中能够提供自身性能数据的施压目标机器。管理执行机的节点。CPTS为用户的测试工程提供管理能力,事务、压测任务、测试报告的内容在同一个测试工程内共享复用,您可以为不同的测试项目创建不同的测试工程。事务是指用户自定义的操…

FinalShell连接超时解决方法

输入ipconfig查看是否自动更改了ip地址 如果ip地址有变动&#xff0c;在shell中更改 查看是否打开了vm服务 快捷键&#xff1a;win X 选择“计算机管理&#xff08;G&#xff09;” 下滑找到vm服务&#xff0c;如若关闭打开即可 查看是否打开vm网络连接 右键点击属性,勾选所示…

finalshell连接超时怎么办

错误提示&#xff1a;java.net.ConnectException: Connection timed out: connect 在Linux中输入ip addr 来查看ip地址是否还在 如果没有的话重启虚拟机&#xff0c;出现ip地址再进行ssh连接

光猫显示连接isp服务器超时,光猫链接isp服务器超时

光猫链接isp服务器超时 内容精选 换一换 若已有连接后端服务器超过请求超时时间没有请求传输后,ELB会将其断开。根据负载均衡器与后端服务器链接的协议不同,系统默认超时时间也不同,系统默认的超时时间如下。TCP协议:默认超时时间为300s。UDP协议:默认超时时间为10s。HTTP…