图1 同时打开动画时间线和动画向导

Vue的动画时间线分为三个部分：主时间线、属性时间线和动画预览。最初只有主时间线是可见的。用户可以点击按钮来显示属性时间线，可以点击按钮来显示动画预览，如图2所示。　

图2 显示属性时间线和动画预览

一、主时间线
主时间线概括了场景中所包含的动画信息。它包含一系列控制按钮，它们是用于动画的控制和预览。在这些按钮图标下，用户可以发现一个当前时间编辑框。这个框中显示的是动画当前的时间。用户可以通过在其中输入一个数值来对其进行修改，也可以通过托拽当前时间滑块来调整当前时间。如图3所示。　

图3 时间线

动画控制按钮的右侧有一个标尺。这个标尺上显示了动画的概括信息。它允许用户使用时间来定位事件。
标尺中部的灰色实心的横栏是持续时间条。它用于描述动画的总持续时间。它的长度不能通过手工来进行调整，它自动与场景中最长的属性动画的持续时间相适应。
持续时间条受到一个细的黄线的控制。如果点击播放按钮，那么就会播放黄线所表示的动画播放时间。用户可以通过托拽黄线两端的和两个按钮来调整动画的播放。此时黄线就是按照托拽缩短或者延长。默认情况下，黄线的末端是紧贴在持续时间条的末端的。
当前时间滑块位于持续时间条的上部。通过向右或者向左托拽它就可以改变当前时间。此时，视图就会自动更新到新的时间所显示的场景了。
在持续时间条的下面是关键帧滑快。只有属于当前被选物体的关键帧才会在时间线上显示。如果场景中定义了很多关键帧的时候，那么这样就会减少复杂程序。如果没有物体被选择，那么关键帧就是所有场景中的物体、材质和大气的。
关键帧在用户每次为物体定义一个新的属性的时候就会出现。例如，如果用户选择了一个物体，修改了当前的时间，并且将物体托拽到了一个新的位置，此时就会出现一个位置关键帧。新的关键帧就会在持续时间条的下部出现。用户可以通过向右或者向左托拽关键帧来修改其出现时间。
如果要滚动时间线，可以右击鼠标然后向左或者向右托拽，如图4所示。　

图4 滚动时间线

如果要放大或者缩小时间线，那么可以在托拽鼠标的同时按住Ctrl键。向左托拽是缩小，向右托拽是放大。如图5所示。　

图5 缩小和放大时间线

使用动画预览按钮可以对动画进行预览。如图6所示。如果右击该按钮，就是出现一个替换按钮，可以打开动画预览选项对话框，如图7所示。用户可以从中设置有关动画预览的一些选项。

图6 预览动画　

图7 动画预览选项对话框

使用渲染动画按钮可以打开动画渲染选项对话框从中设置动画渲染的相关信息，对动画进行渲染，如图8所示。　

图8 动画渲染选项对话框

用户还可以水平调整时间线的大小，也可以垂直对其进行调整。如果动画预览时间线出现，调整大小就会增加新的预览线。如果显示属性时间线，调整大小就会为属性时间线增加新的线条。如图9所示。　

图9 调整时间线的大小

二、属性时间线

如果用户点击了按钮，此时时间线对话框就会出现扩展，这样就能够出现一个属性时间线。属性时间线能够给出场景中所有动画项目的细节预览。在其左侧，用户可以发现所有这些项目的列表（动画物体、动画材质、动画大气等）。这个列表类似于世界浏览器，除了其中所有的物体都能够被扩展之外（他们的附近都有和的按钮，用于展开和收缩）。单击这两个按钮就可以显示所有物体的动画属性（例如位置、方向、大小等）。然而，与世界浏览器不同的是，按住Delete键将不会删除物体，仅仅会删除其动画。如图10所示　　

图10 属性时间线

动画项列表中也具有三个标识图标来表示，它们分别是：
动画材质：该图标用于表示动画材质（表面、速度或者全部动画）
动画云：该图标用于表示一个动画云材质（表面、速度或者全部动画）
动画后处理：该项目表示某些全局后处理已经被运用于所有的相机，并且后处理是动画。
当某一个动画物体被选中后，在列表中对其进行右击此时会出现一个快捷菜单，如图11所示。　

图11 快捷菜单

该快捷菜单分为五个部分：
（1）第一部分具有三个命令项，分别为Add Keyframe（添加关键帧）、Delete Keyframe（删除关键帧）和Destroy Object Animation（消除物体动画）。
（2）第二部分具有六个命令项，分别为Zoom Timeline（缩放时间线）、Move Current Time（移动当前时间）、Move Keyframe（移动关键帧）、Move Start of Animation（移动动画起始点）、Move End of Animation（移动动画结束点）和Scroll Timeline（滚动时间线）。
（3）第三部分具有四个命令项，分别为Animation Start（移动当前时间到动画起始处）、Animation End（移动当前时间到动画结束处）、Previous Keyframe（移动当前时间到前一个关键帧）、Next Keyframe（移动当前时间到下一个关键帧）。
（4）第四部分具有四个命令项，分别是Preview Animation（预览动画）、Render Animation（渲染动画）、Render Animation Preview（渲染动画预览）、Play Animation Preview（播放动画预览）。
（5）第五部分用于打开帮助。
属性标尺的右侧显示了属性相关的所有关键帧的列表，同时还具有一个实心工具条用于描述属性动画的持续时间。当用户修改一个物体的属性的时候，此时会自动添加关键帧（例如，每次在不同时刻将物体移动的时候就会添加一个物体动画的位置关键帧）。用户可以通过鼠标托拽来修改关键帧。如果要删除属性关键帧，只需要点击它并且按住Delete键就可以了，也可以右击在弹出的菜单中选择Delete keyframe（删除关键帧）命令。

在属性标尺右侧，用户可以找到一系列进一步自定义动画行为地控制按钮。开始的三个按钮与物体在三维视图中的运动路径相关（它们只有当物体在动画中运动的时候才有效）。

Persistent path（固定路径）：按下这个按钮，这样就能够让路径在物体没有被选中的情况下都显示出来，如图12所示。　

图12 Persistent path（固定路径）

Show path as ribbon（带状显示路径）: 按下该按钮，路径在三维视图中就会以带状来显示，而不是用一条细线来显示，这样能够清楚的表现出物体的方向和位置，如图13所示。　

图13 Show path as ribbon（带状显示路径）

Show tangents（显示切线）: 按下该按钮，就会在每个关键帧上显示物体的切线。需要注意的是，用户不能直接修改这些切线（用户只有通过修改路径才能修改切线），因为它是受到曲线尺影响的（曲线尺是数学中路径的基本结构，能够为轻松定义平滑运动路径提供最灵活的方案，但是它却具有不能让用户直接修改切线的缺陷）。如图14所示。　

图14 Show tangents（显示切线）

最后一个按钮用于为属性打开动画工具盒，如图15所示。从中，用户可以重新设定物体的运动方式、物体运动的重复模式等相关信息　　

图15 动画工具盒

三、动画预览

动画预览用于显示动画的预览效果，单击显示/隐藏预览按钮图标就可以打开动画预览。Vue中为动画渲染了一个小的预览图，并且在一个很小的屏幕中重复对其播放。如果用户不想老是看到这个动画预览就可以按住Escape或者点击它来取消。这个预览屏幕被加上了一个黑色的边框，显示当前时间的当前帧的图像。如果用户托拽当前时间滑快，当前帧也会相应滚动。如图16所示。　

图16 动画预览

点击按钮就会对动画进行预览，如图17所示。　

图17 预览动画

小结：动画时间线是Vue动画中的动画控制面板，用于设置动画的显示、播放和控制等相关信息，也是动画的控制中心，Vue当中需要有关动画的操作都是在这个面板中实现的，十分重要。如果熟悉Flash的朋友应该会对动画的时间线比较熟悉，Vue的时间线和这类动画软件的时间线有相当程度的类似，读者应该在本讲中熟悉和了解动画的形成原理，知道什么是动画的关键帧，了解动画形成的原理，这样才能够在以后轻松自如地创建动画。