蘋果公司 macOS 上的幻燈片制作軟件 Keynote 是出色的演示工具茶敏，對于設(shè)計(jì)師來說汤踏，也能用它來展示網(wǎng)頁設(shè)計(jì)稿勘天。使用到的功能是非常拉風(fēng)的【神奇移動(dòng)】（Magic Move）。
先說說【神奇移動(dòng)】在做普通幻燈片制作中的應(yīng)用锅知。所謂【神奇移動(dòng)】妇拯，它是一種幻燈片之間切換的動(dòng)畫效果畦粮。 如果兩張幻燈片中存在共同的某種元素——圖片，文本框或其他乖阵，那么對其設(shè)置【神奇移動(dòng)】后宣赔，它將會(huì)從第一張幻燈片中的位置平滑地移動(dòng)到第二張幻燈片中的位置。因?yàn)樗皇窍认г僖阅撤N方式出現(xiàn)瞪浸，而是一直存在于顯示屏上儒将，故名為神奇移動(dòng)。如圖1所示.
設(shè)置【神奇移動(dòng)】的方法对蒲。按照上面的定義钩蚊，制作的關(guān)鍵是兩張幻燈片中那個(gè)相同的元素，才能有神奇移動(dòng)的效果蹈矮∨槁撸「相同」，意味著它們屬于同一個(gè)泛鸟。比如對于文字蝠咆，不是在第二張幻燈片中有那個(gè)相同的文本就叫存在相同的元素，而是復(fù)制第一張幻燈片中的那個(gè)文本北滥，粘貼到第二張幻燈片中刚操，這才叫「相同」。對于圖片也是一個(gè)道理再芋。就算在第二張幻燈片中該文本發(fā)生了大小菊霜、文字樣式等格式上的變化，它們依然會(huì)被視為同一個(gè)元素济赎，因?yàn)樗菑?fù)制自第一張幻燈片鉴逞。如圖2和圖3.
將兩張幻燈片中「相同的」元素?cái)[放到你喜歡的位置后记某，點(diǎn)擊制作好的幻燈片（是點(diǎn)擊左側(cè)列表的某張幻燈片，而不是幻燈片中的某個(gè)元素构捡，因?yàn)椤旧衿嬉苿?dòng)】是頁面切換的動(dòng)畫效果辙纬。如果你選中了某個(gè)元素，在右上方的【動(dòng)畫效果】里是找不到【神奇效果】的叭喜。 ），在右上角的操作面板中蓖谢，可以看到三個(gè)按鈕捂蕴，分別是【格式】【動(dòng)畫效果】【文稿】，點(diǎn)擊【動(dòng)畫效果】-【添加效果】闪幽，在列表中找到【神奇移動(dòng)】啥辨。如圖4.
搭配上幻燈片上其他元素的切換效果，點(diǎn)擊頂部操作欄的【播放】按鈕就能看到神奇移動(dòng)了盯腌。如圖5所示（gif圖片沒有制作好溉知，初始移動(dòng)位置應(yīng)為左上角。）
解釋完了【神奇移動(dòng)】腕够，接下來要說說如何用它來制作「視差」的網(wǎng)頁滾動(dòng)效果级乍。這里有了一個(gè)新的概念——「視差」，英文叫 Parallax帚湘，通俗地說玫荣，是指若在同一位置觀察不同遠(yuǎn)近的移動(dòng)物，它們的移動(dòng)速度是不同的大诸。比如我們坐在行駛中的動(dòng)車?yán)锿背В吹竭h(yuǎn)處的山和近處的房子，它們向后移動(dòng)的速度并不相同资柔。這個(gè)概念被應(yīng)用到平面設(shè)計(jì)領(lǐng)域焙贷，就是指在瀏覽網(wǎng)頁的過程中，某些元素出現(xiàn)和消失的速度不同贿堰。近年來辙芍，好多網(wǎng)站都出現(xiàn)了這樣都設(shè)計(jì)。如圖6
要實(shí)現(xiàn)這樣的效果羹与，有很多原型設(shè)計(jì)軟件都能夠完成沸手，比如 Principle、Flinto等注簿。但是若利用 Keynote 中的【神奇移動(dòng)】契吉，能比較快捷地達(dá)到展示目的。
首先诡渴，要把設(shè)計(jì)稿從設(shè)計(jì)軟件導(dǎo)入到 Keynote 中來捐晶。需要說明的是菲语，沒有插件能幫你直接導(dǎo)入，只能通過手動(dòng)復(fù)制和粘貼逐一將設(shè)計(jì)搬到 Keynote 中惑灵。方便的是山上，你的設(shè)計(jì)稿中不論是文字、圖片英支、「組」或甚至是畫板佩憾，粘貼到 Keynote 中，都將被識(shí)別為圖片干花，這樣能方便你對其進(jìn)行移動(dòng)妄帘。
和上面移動(dòng)文字的例子類似，要想達(dá)到滑動(dòng)頁面的效果池凄，只要將前后兩張幻燈片的元素都復(fù)制粘貼好（再復(fù)習(xí)一次抡驼，這樣才能讓 Keynote 明白它們是「相同」元素），將前一張的元素復(fù)制粘貼到后一張幻燈片并擺放到顯示區(qū)域外的上邊肿仑、后一張的元素復(fù)制粘貼到前一張并擺放到顯示區(qū)域到下邊致盟。這樣在播放的時(shí)候，有了【神奇移動(dòng)】的加持尤慰，前一張幻燈片的內(nèi)容就會(huì)向上移動(dòng)離開畫面馏锡，后一張幻燈片的內(nèi)容從下到上進(jìn)入顯示屏，就像我們向上滑動(dòng)網(wǎng)頁一樣伟端。如圖7.
視差效果的表現(xiàn)是眷篇，隨著頁面的移動(dòng)，頁面上的元素有各自的移動(dòng)速度荔泳。那么蕉饼，只要通過設(shè)置不同元素在幻燈片外不同的垂直距離，那么它們神奇移動(dòng)的速度就會(huì)不同玛歌。 移動(dòng)快的元素?cái)[放得離幻燈片近一點(diǎn)昧港，移動(dòng)慢的元素則擺放得遠(yuǎn)一點(diǎn)。如圖8.
逐一對每張幻燈片進(jìn)行上述的設(shè)置支子，在播放的時(shí)候通過鼠標(biāo)點(diǎn)擊就能實(shí)現(xiàn)頁面滾動(dòng)的效果创肥，并且?guī)в幸暡钚Ч?i>如圖6.
