使用 Keynote 来制作「视差」网页滚动效果

苹果公司 macOS 上的幻灯片制作软件 Keynote 是出色的演示工具，对于设计师来说，也能用它来展示网页设计稿。使用到的功能是非常拉风的【神奇移动】（Magic Move）。

先说说【神奇移动】在做普通幻灯片制作中的应用。所谓【神奇移动】，它是一种幻灯片之间切换的动画效果。 如果两张幻灯片中存在共同的某种元素——图片，文本框或其他，那么对其设置【神奇移动】后，它将会从第一张幻灯片中的位置平滑地移动到第二张幻灯片中的位置。因为它不是先消失再以某种方式出现，而是一直存在于显示屏上，故名为神奇移动。如图1所示.

图1

设置【神奇移动】的方法。按照上面的定义，制作的关键是两张幻灯片中那个相同的元素，才能有神奇移动的效果。「相同」，意味着它们属于同一个。比如对于文字，不是在第二张幻灯片中有那个相同的文本就叫存在相同的元素，而是复制第一张幻灯片中的那个文本，粘贴到第二张幻灯片中，这才叫「相同」。对于图片也是一个道理。就算在第二张幻灯片中该文本发生了大小、文字样式等格式上的变化，它们依然会被视为同一个元素，因为它是复制自第一张幻灯片。如图2和图3.

图2

图3

将两张幻灯片中「相同的」元素摆放到你喜欢的位置后，点击制作好的幻灯片（是点击左侧列表的某张幻灯片，而不是幻灯片中的某个元素，因为【神奇移动】是页面切换的动画效果。如果你选中了某个元素，在右上方的【动画效果】里是找不到【神奇效果】的。 ），在右上角的操作面板中，可以看到三个按钮，分别是【格式】【动画效果】【文稿】，点击【动画效果】-【添加效果】，在列表中找到【神奇移动】。如图4.

图4

搭配上幻灯片上其他元素的切换效果，点击顶部操作栏的【播放】按钮就能看到神奇移动了。如图5所示（gif图片没有制作好，初始移动位置应为左上角。）

图5

解释完了【神奇移动】，接下来要说说如何用它来制作「视差」的网页滚动效果。这里有了一个新的概念——「视差」，英文叫 Parallax，通俗地说，是指若在同一位置观察不同远近的移动物，它们的移动速度是不同的。比如我们坐在行驶中的动车里，看到远处的山和近处的房子，它们向后移动的速度并不相同。这个概念被应用到平面设计领域，就是指在浏览网页的过程中，某些元素出现和消失的速度不同。近年来，好多网站都出现了这样都设计。如图6

图6 -「视差」网页滚动效果

要实现这样的效果，有很多原型设计软件都能够完成，比如 Principle、Flinto等。但是若利用 Keynote 中的【神奇移动】，能比较快捷地达到展示目的。

首先，要把设计稿从设计软件导入到 Keynote 中来。需要说明的是，没有插件能帮你直接导入，只能通过手动复制和粘贴逐一将设计搬到 Keynote 中。方便的是，你的设计稿中不论是文字、图片、「组」或甚至是画板，粘贴到 Keynote 中，都将被识别为图片，这样能方便你对其进行移动。

和上面移动文字的例子类似，要想达到滑动页面的效果，只要将前后两张幻灯片的元素都复制粘贴好（再复习一次，这样才能让 Keynote 明白它们是「相同」元素），将前一张的元素复制粘贴到后一张幻灯片并摆放到显示区域外的上边、后一张的元素复制粘贴到前一张并摆放到显示区域到下边。这样在播放的时候，有了【神奇移动】的加持，前一张幻灯片的内容就会向上移动离开画面，后一张幻灯片的内容从下到上进入显示屏，就像我们向上滑动网页一样。如图7.

图7

视差效果的表现是，随着页面的移动，页面上的元素有各自的移动速度。那么，只要通过设置不同元素在幻灯片外不同的垂直距离，那么它们神奇移动的速度就会不同。 移动快的元素摆放得离幻灯片近一点，移动慢的元素则摆放得远一点。如图8.

图8

逐一对每张幻灯片进行上述的设置，在播放的时候通过鼠标点击就能实现页面滚动的效果，并且带有视差效果。如图6.