@scomper

Keynote(三)动画和效果

2014.09.15

Keynote 里的动画效果分为针对页面切换的「过渡效果」和针对页面内对象的「构件效果」。过渡效果呈现的是从一页切换到另一页时的转场动画,转场动画多半是以页为单位,可以看到整个页面的动画效果变化,不过在 Keynote 中也有例外的情况,例如神奇移动、以及对象效果和文本效果两类特效就只将效果的施加对象放在页面内的构件上,这种基于页面而施加于构件的动画方式模糊了页面和构件动画之间的界限,使得幻灯片的动画表现形式更灵活和丰富。

页面的「过渡」动画

顾名思义,「过渡」是从当前页切换到下一页时的动画,由导航栏切换到当前页(不选择任何页内对象),点击右侧设置面板「动画效果」来对设置页面的过渡效果。

过渡动画效果

过渡效果分几类:神奇移动,出现与移动,翻转、旋转与缩放,对象效果和文本效果。点击鼠标悬停时效果后的「预览」,可以在预览到效果的变化。

「神奇移动」、对象效果和文本效果的作用对象是页面内的构件,所以在过渡时我们能看到的是构件的变化,而页面不会有变化。文本效果需要下一页中至少包含有文本构件,否则看不出效果的变化。另外,页面中包含构件成组和不包含成组,在实施神奇移动和对象效果时,最后获得的动画是不一样的,因为在动画处理上成组的构件只会作为一个对象来处理。

图表、表格这些特殊的构件如果想应用「神奇移动」效果,需要与其他构件成组嵌套(成组1次后再次和某个对象成组)变成普通对象才能应用效果,例如,让图表和文本1成组,然后再用成组后的对象继续和文本2成组,这样嵌套后的对象Keynote会视之为普通对象,从而能应用神奇移动。

神奇移动效果的条件是后页中包含与前页相同的对象而位置或大小不同,页面过渡时,前页中的对象会移动或缩放直到变成后页对象目前的样子,这个过程所形成的效果很有意思,而我们设置这样的动画过程又很简单。

《WWDC 2014 Keynote 内容解析》的 Keynote 范例文件中包含了很多神奇移动,第 11、12 页模拟柱状图增长的效果,第 14、15 页移动图片腾出文字说明的位置,第 19-21 页移动图表显示对照图表,第40-42页由左上角按钮的缩放直到显示应用程序界面,第 57、58 页功能汇集,第 79、80 页的图像放大等等。

神奇移动范例

图示显示的是最简单的神奇移动效果的设置(范例的第 57、58 页),前页中部分图标摆放在页面显示范围之外,后页全部缩放图标摆放到新的位置,在前页上设置过渡效果为「神奇移动」和持续时间,动画就设置完成了。

神奇移动只是要求后页包含前页中一样的对象,构件 → 构件,成组 → 成组,不过后页中可以有更多的其他构件,也就是说既可以123:123,是一一对应的关系,也可以是 1:123 是包容的关系,动画效果会在前后页一致的对象上展开,对于不匹配的对象默认会应用渐变效果。

过渡动画的设置参数根据效果不同有些不同的可调参数,例如,出现的方向、匹配的对象等等,通过实际的预览很容易就能掌握。过渡动画中的关键点是持续的时间和开始过渡的触发条件,持续的时间决定了动画的整个过程的时长,开始过渡的触发条件则决定动画基于什么开始,是自动进入页面还是「在点按」敲击键盘以后。

「构件」对象的动画

针对页面内构件对象的动画又分为三种,构件的出现、构件的消失以及动作。构件动画的激活都在页面加载之后,如果希望页面加载后自动播放构件的动画,动作面板的「构件顺序」详细设置中,排在第一的构件的「起始」动作应该设置成「过渡之后」。

构件的动画效果

构件动画中针对「动作」的效果相对少一些,针对「构件出现」和「构件消失」的动画更丰富。一个构件最多分别设置一个构件的出现和消失效果,但是可以添加多个「动作」效果。

多个构件之间的动作先后顺序是通过「构件顺序」设置面板来进行具体的调节和设置,每给构件添加一个动作,构件顺序列表中就会相应增加一个动作。

调试构件主要是依靠「构件顺序」面板来进行的,选中具体的动作可以点击构件顺序面板下的「预览」来查看效果,同时对应的动作面板中会显示具体的参数,每个构件的播放顺序都可以由「起始」下拉菜单来具体选择,可以选择「与构件一起」与前一个构件一起动作,还是「在构件之后」在前一个构件动作完成后跟随。

构件顺序面板和动作分解

上图所示分解了前文范例第40页的窗口按钮动画,构件顺序面板中可以直观的看到一起动作 ①②③ 的构件之间是紧挨着的,而需要点按来继续的动作 ⑥ 会和上一个动作分隔开,紧挨在一起的动作之间没有线条区分的是一起动作,有线条区分的 ④ 是跟随在上一个构件之后的。

「构件顺序」面板中的构件动作支持拖拽,也可以高亮选中后删除某个动作。通过构件面板进行预览时,紧挨着的动作会一次演示完,分隔开的动作需要选中后单独点击预览。

已经添加了效果的构件「成组」后原来的效果设置会丢,因为成组后多个构件会被视为一个对象来处理。

页面和构件之间的动画协调

范例第 40 页- 42 页在演示时是一个连贯的效果,观众首先看到的是窗口按钮的设计上的变化,然后按钮会缩小到标题栏,标题栏又进一步缩小到整个应用程序窗口界面。整个动画过程很有代表性,形成了一个从局部到整体的演示。

Keynote MagicMove.gif

第 40 页的内容是介绍按钮的变化,按钮上的符号首先会渐渐出现,然后加号变成一个全屏的符号,敲击键盘后按钮上的所有符号消失,并缩小到窗口的顶栏。为了保证在构件动作完成后按神奇移动的过渡效果跳转到第 41 页,第 40 页的「开始过渡」设置的是「自动」。因为第 40 页构件动画完成后的下一个效果「缩放」实际上是由页面过渡的神奇移动来完成的。同理,第 41 页的页面过渡动作也是「自动」,从而形成一个连贯的动画效果。

第 40 页和第 41 页都包含各自的页面内的构件动画,这里要协调好的构件动作和页面动作,上一页页面动作的接力棒实际的交接对象是下一个页面「构件顺序」的第一个构件,所以第41页里「构件顺序」第一个构件的起始一定是「过渡之后」。

页面和构件之间的动作顺序

动画执行的顺序是按照「当前页 → 页面内的构件动作 → 页面过渡动作 →下一页」这样的层级来执行的。了解这一点就能很好的协调页面和构件共同来完成一个连贯的动画效果。不过大部分页面过渡的动画是基于页面进行变化的,所有页面和构件之间无缝的动画只是适用于神奇移动、对象效果和文本效果这类过渡动画。

构件动画的手动调节

当一个页面中包含多个构件动画时,通过「构件顺序」面板可以定位构件,选中状态处于动作后的构件可以进一步手动调节角度和距离。有时候多个构件是叠加在一起的,不使用「构件顺序」面板来选择,很难选择要调试的构件。

构件动作的调节

默认添加的一些构件动作只包含一个基本都参数,例如移动、旋转等效果,添加完动作以后需要进一步修改才能达到自己的目的,以旋转为例。要在叠加的多个构件中选中对象并修改需要通过「构件顺序」面板来操作。

  • 打开「构件顺序」面板;
  • 由构件顺序面板中定位选中构件的动作;
  • 此时编辑区中显示的选中对象就是构件动作以后的状态;
  • 通过右侧的「动作」面板填入适当的参数,或者直接移动或旋转编辑区中的构件对象。(按住command悬停在句柄上是旋转操作)。

点击构件动作旁的红色加号可以在现有的动作基础上添加新的动作;
调试叠加在一起的多个构件时,可以先分别移开,在动作调试完成后再让它们回到原来的位置。

--「壹页单章」会员计划 --

Comments
Write a Comment