外行一樣思考，像專家一樣實(shí)踐

原創(chuàng)文/寒樹Office 圖/ACE

引文：平滑切換是PowerPoint 中全新的動(dòng)畫引擎。在這里，物體、圖像、文字和字符都可以輕松的實(shí)現(xiàn)跨幻燈片位置移動(dòng)和效果的變化。因?yàn)樗侵悄艿模阅銦o需掌握復(fù)雜的動(dòng)畫設(shè)計(jì)。只要有足夠的創(chuàng)意，即使是小白也可以創(chuàng)造出強(qiáng)大的動(dòng)畫效果。平滑切換不僅僅用來吸引注意力，它提供了一種新的視覺手段來輕松地解釋復(fù)雜事物，這是一種廣泛應(yīng)用于電影行業(yè)的技術(shù)。

PPT動(dòng)畫的發(fā)展

傳統(tǒng)的 PPT 動(dòng)畫有兩種自定義動(dòng)畫和切換動(dòng)畫，從 PowerPoint 2003就己經(jīng)存在，而平滑切換只要 PowerPoint 2016以上的新版本中存在。

除此之外，還有四種非傳統(tǒng)意義的動(dòng)畫，VBA動(dòng)畫、函數(shù)動(dòng)畫、縮進(jìn)放動(dòng)畫和3D動(dòng)畫，如需了解更多詳情，敬請(qǐng)關(guān)注頭條號(hào)"史記微軟"的"PPT中的數(shù)學(xué)"系列。

自定義動(dòng)畫

自定義動(dòng)畫是應(yīng)用在 PPT 對(duì)象上的一組效果，使得對(duì)象在幻燈片放映中進(jìn)行動(dòng)畫處理。自定義動(dòng)畫效果分為四類：進(jìn)入、退出、強(qiáng)調(diào)和路徑。進(jìn)入效果在幻燈片放映期間進(jìn)入動(dòng)畫；退出效果讓對(duì)象使用動(dòng)畫離開幻燈片；強(qiáng)調(diào)效果可以在過程中處理動(dòng)畫；路徑效果允許對(duì)象在幻燈片放映中移動(dòng)。每個(gè)效果包含變量，如開始（點(diǎn)擊，有前一個(gè)，后一個(gè)），延遲，速度，重復(fù)和觸發(fā)。這使得動(dòng)畫更靈活，更具交互性。

切換動(dòng)畫

切換動(dòng)畫類似自定義動(dòng)畫。不同的是切換動(dòng)畫只能應(yīng)用單張幻燈片，它的本意是指一張幻燈片到下一張幻燈片的切換過程。傳統(tǒng)的切換，都是一些普通的轉(zhuǎn)場(chǎng)切換，常用如推進(jìn)、淡出、平移、旋轉(zhuǎn)等效果，在2013版中添加了不少酷炫的切換模式，但是太過炫酷很多看起來不實(shí)用。

平滑切換

平滑切換是一種特別的效果類型的切換動(dòng)畫，可以在幻燈片上實(shí)現(xiàn)平滑的動(dòng)畫、切換和對(duì)象移動(dòng)。它可以幫你在PowerPoint中做出各種對(duì)象（如文本、形狀、圖片、SmartArt、藝術(shù)字以及圖表）的切換效果。如此炫酷的動(dòng)畫，在動(dòng)畫窗格里卻什么都看不到。

平滑切換的特點(diǎn)

名稱的演化

平滑切換（morph transition）并非最早的名稱，微軟一向隨意調(diào)整功能的命名的傳統(tǒng)。最初的名稱"變體"來自英文名稱" Morph" 的直譯，大概是被吐槽太多了后改名為"變形"，現(xiàn)在又稱之為"平滑"，而小編個(gè)人以為"變體"或"變形"較為貼切。而最早提出"平滑"這個(gè)概念的則是 Flash 軟件中的"變形動(dòng)畫"，出現(xiàn)在蘋果電腦的 Keynote 中，稱之為"神奇移動(dòng)"，現(xiàn)在被微軟 PowerPoint 借鑒并引入。

傳統(tǒng)動(dòng)畫的缺點(diǎn)

雖然可以使用自定義動(dòng)畫來輕松創(chuàng)建動(dòng)畫，但是由于缺少關(guān)鍵幀和補(bǔ)間過程，使得 PPT 動(dòng)畫在設(shè)置時(shí)比專業(yè)動(dòng)畫程序（如 Flash）要更加繁瑣。切換動(dòng)畫雖然設(shè)置簡(jiǎn)單，卻也只能實(shí)現(xiàn)兩頁(yè)之間的整體像素的變化，無法在對(duì)象的級(jí)別上進(jìn)行變化。平滑切換則是披著切換的皮，實(shí)則是一種全新的動(dòng)畫模式。

與傳統(tǒng)動(dòng)畫的對(duì)比

平滑切換可以部分替代自定義動(dòng)畫中的效果，比如移動(dòng)（直線）、縮放、大小、旋轉(zhuǎn)、顏色（透明）淡入（淡出）、飛入（飛出）等。缺少完全路徑動(dòng)畫和濾鏡功能。但是可以實(shí)現(xiàn)自定義動(dòng)畫中所沒有的變形動(dòng)畫、和3D變形。

平滑切換的優(yōu)點(diǎn)

平滑是一種非常有趣的轉(zhuǎn)場(chǎng)形式，利用它 ppt 會(huì)自動(dòng)識(shí)別兩張幻燈片之間同類的元素，包括相同的單詞/字符、同類型的形狀、同源的圖片、同源的3D模型等，然后在轉(zhuǎn)場(chǎng)時(shí)完成字體、顏色、大小、位置、角度等屬性的的漸變（用線性插值的方法）。

如果存在多個(gè)對(duì)應(yīng)的可能，優(yōu)先采取近似原則，其次采取就近原則（頂點(diǎn)間最短距離）進(jìn)行變換。總之這是非常人性化的設(shè)置，有種 flash 動(dòng)畫的感覺，但又完全不需要對(duì)每個(gè)元素進(jìn)行單獨(dú)設(shè)定，完完全全是傻瓜式操作！

簡(jiǎn)單地來說，如果前后兩張幻燈片有共同的內(nèi)容，這項(xiàng)功能就能自動(dòng)想辦法讓這兩張幻燈片的過渡更自然、美觀和帥氣。而平滑切換效果可以在連續(xù)多張幻燈片之間使用，效果卻仿佛是在同一張幻燈片中千變?nèi)f化，不會(huì)讓人產(chǎn)生跳躍感，這或許更能體現(xiàn)微軟"平滑"的命名吧。

歷次更新

• 版本1511：開始增加平滑切換；
• 版本1708：支持3D 模型的平滑效果。

平滑的算法基礎(chǔ)

變形算法

變形（Morphing)又稱二維形體漸變，是指從初始物體到目標(biāo)物體的連續(xù)、光滑、自然的過渡(這里的物體可以是數(shù)字圖像、多邊形、多面體等)，即需要由兩個(gè)初始的關(guān)鍵幀自動(dòng)生成連續(xù)變化的中間幀。其算法是給定一個(gè)初始和最終的多邊形（關(guān)鍵幀），求初始多邊形光滑過度到終止多邊形的中間漸變過程，它包核兩個(gè)核心問題：頂點(diǎn)對(duì)應(yīng)問題（實(shí)現(xiàn)二維多邊形之間的對(duì)應(yīng)）、頂點(diǎn)插值路徑問題（解決過渡多邊形的位置）。變形動(dòng)畫要點(diǎn)是操作每個(gè)頂點(diǎn)的移動(dòng)。算法的目標(biāo)包括：多邊形之間實(shí)現(xiàn)光滑過渡；多邊形避免發(fā)生自交、收縮、內(nèi)部區(qū)域扭曲等不自然現(xiàn)象；盡可能保留源和目標(biāo)多邊形上的視覺特征。

對(duì)應(yīng)問題

對(duì)應(yīng)問題是建立初末兩物體的元素(如頂點(diǎn)、邊等)之間的對(duì)應(yīng)關(guān)系，在兩個(gè)多邊形頂點(diǎn)個(gè)數(shù)不同時(shí)，如何加入新的頂點(diǎn)與如何建立頂點(diǎn)間的對(duì)應(yīng)關(guān)系。總的來說，一個(gè)好的頂點(diǎn)對(duì)應(yīng)滿足如下兩個(gè)要求：

兩個(gè)形體之間最終的頂點(diǎn)個(gè)數(shù)相同、一一對(duì)應(yīng)，并且頂點(diǎn)對(duì)應(yīng)與頂點(diǎn)排列順序是一致的；相似特征問的頂點(diǎn)一一對(duì)應(yīng)。

路徑問題

在變形過程中研究對(duì)應(yīng)元素的變形軌跡,但是不同的變形軌跡是由于插值不同的變量產(chǎn)生,因此軌跡問題也稱為插值問題。路徑問題用來解決源多邊形上的各頂點(diǎn)如何運(yùn)動(dòng)到目標(biāo)多邊形上的對(duì)應(yīng)頂點(diǎn)。平滑切換采用了簡(jiǎn)單的線性插值法，不幸的是線性插值方法會(huì)帶來收縮(Shrinkage)和扭結(jié)現(xiàn)象(Kink)，特別是源、目標(biāo)形體間主要進(jìn)行剛性運(yùn)動(dòng)(旋轉(zhuǎn)、平移)時(shí)，表現(xiàn)得尤為明顯。

形狀對(duì)應(yīng)法則

同型相同原則：同類型的對(duì)象之間才會(huì)有變體效果。線條、形狀、圖形、圖片、曲線、文字、3D、SmartArt對(duì)象、圖表和組合。否則不能配對(duì)。

種類相同原則：線條、形狀須種類相同，圖形、圖片、3D須同源，文字須字或詞相同，組合的成員須相同，否則不能配對(duì)。曲線無要求。

文字相同原則：含相同文字（前后空格不算）的形狀和曲線進(jìn)行配對(duì)，文字不同不配對(duì)。

屬性相同原則：除了位置、大小和角度（含翻轉(zhuǎn)）外，線條的所有屬性要求相同，連接符的連接點(diǎn)也要相同。

屬性相似優(yōu)先：除了位置、大小和角度（含翻轉(zhuǎn)）外，屬性相近的優(yōu)先配對(duì)，比如邊框。優(yōu)先級(jí)高于距離相近原則。

距離相近優(yōu)先：距離相同和較近的優(yōu)先配對(duì)。距離指對(duì)象中心之間距離。

關(guān)于iSpring

從 iSpring 8.5版開始，iSpring PPT-to-HTML5 工具支持平滑切換。iSpring是第一個(gè)將這種復(fù)雜效果轉(zhuǎn)換為 HTML5 格式的電子學(xué)習(xí)創(chuàng)作工具。這是一項(xiàng)非常了不起的工作，對(duì)算法的掌控有很高的要求，小編曾經(jīng)償試過，但是己失敗而告終。如果想理一步了解平滑切換的實(shí)現(xiàn)原理，不妨看看 iSpring 的實(shí)現(xiàn)效果，主要是 JS 代碼部分。

使用平滑切換

在任何一個(gè)圖中你看不到從一張幻燈片到另一張幻燈片的移動(dòng)。這種變化是漸進(jìn)的和微妙的，不是突然發(fā)生。你會(huì)看到形狀，位置和顏色從第一個(gè)對(duì)象緩慢變形到第二個(gè)對(duì)象。該功能實(shí)現(xiàn)起來非常簡(jiǎn)單，唯一真正的限制是您自己的想象力。

功能選擇

若要有效地使用平滑切換效果，你將需要兩個(gè)以上的幻燈片，至少有一個(gè)以上的共性對(duì)象。最簡(jiǎn)單方法是復(fù)制當(dāng)前幻燈片（Ctrl-D），或復(fù)制上頁(yè)幻燈片上的對(duì)象到第下頁(yè)。若要查看哪些平滑效果，可以點(diǎn)擊幻燈片縮略圖上的"*"進(jìn)行預(yù)覽。具體如下：

• 在左側(cè)縮略圖窗格中，單擊要應(yīng)用切換效果，應(yīng)該是你添加對(duì)象、 圖片或你想要對(duì)其應(yīng)用將效果的單詞的第二個(gè)幻燈片的幻燈片；
• 在"切換"選項(xiàng)卡上，選擇"平滑"；
• 選擇切換>效果選項(xiàng)來選擇只是你希望如何平滑轉(zhuǎn)換工作；
• 可以選擇在幻燈片上四處移動(dòng)對(duì)象、更改顏色、四處移動(dòng)文字和字符以及執(zhí)行其他操作；
• 單擊預(yù)覽以查看平滑轉(zhuǎn)換操作。

操作：【RIBBON】→【切換】>選中【平滑】。

功能選項(xiàng)

效果屬性設(shè)置：平滑切換可設(shè)置三種效果屬性，分別是對(duì)象、文字（單詞）、字符（字母）。準(zhǔn)確來說是這調(diào)整對(duì)象的粒度，決定了切換時(shí)文本框整體變化，亦或是按單詞（字符）來變化。對(duì)中文而言，后面二者沒有區(qū)別。英文和數(shù)字的情況下，字符與字母又是不同的粒度。

動(dòng)畫時(shí)長(zhǎng)的設(shè)置：與普通的切換動(dòng)畫一樣，用來設(shè)置平滑切換動(dòng)畫的持續(xù)時(shí)間。

形狀轉(zhuǎn)矢量

根據(jù)"種類相同原則"，只有同一類型的形狀之間才可以實(shí)現(xiàn)平滑切換效果。不同類型的形狀之間，實(shí)現(xiàn)平滑切換效果，需要做一點(diǎn)小處理，借助曲線這個(gè)中間橋梁，實(shí)現(xiàn)平滑切換效果。

實(shí)現(xiàn)形狀轉(zhuǎn)矢量的功能，有三種方法：編輯頂點(diǎn)法、布爾運(yùn)算法和隱藏功能法，而使用PPT的隱藏功能"轉(zhuǎn)換為任意多邊形"最為方便。需要借助PPT的隱藏功能"轉(zhuǎn)換為任意多邊形"。在"不在功能區(qū)的命令"中找到"轉(zhuǎn)換為任意多邊形"添加到快捷欄備用。

平滑切換的兼容性

兼容舊版本

平滑切換是在 PowerPoint 2016 和 Office 365中才有的新功能，老版本中演示將失平滑切換的動(dòng)畫效果。解決方案是將平滑切換導(dǎo)出為視頻，然后將該視頻放在幻燈片上。這很簡(jiǎn)單，而且看起來與任何版本的 PowerPoint 完全一樣。

在兩個(gè)或多個(gè)幻燈片之間創(chuàng)建變形過渡。如果幻燈片是較大演示文稿的一部分，請(qǐng)使用其他名稱保存文件，然后刪除除變形幻燈片之外的所有文件。將變形幻燈片導(dǎo)出為視頻。將視頻插入演示文稿。 將視頻設(shè)置為自動(dòng)啟動(dòng)，并在視頻停止后將幻燈片設(shè)置為自動(dòng)切換。

Islide 中的補(bǔ)間動(dòng)畫

菜單欄中打開 iSlide ，在"動(dòng)畫"組中可以看到"補(bǔ)間動(dòng)畫"選項(xiàng)。可以對(duì)各種屬性進(jìn)行插值設(shè)置。在沒有平滑切換功能時(shí)，是不錯(cuò)的替代選擇。缺點(diǎn)是會(huì)生成大量的中間元素，增加了文件大小。

Sqirlz Morph

使用此工具創(chuàng)建變形效果，Sqirlz Morph允許你在多個(gè)圖像上標(biāo)記要素，并且程序會(huì)混合圖像，使一個(gè)圖像上的每個(gè)要素平滑移動(dòng)到其他圖像上的相應(yīng)要素。Sqirlz Morph的最大優(yōu)勢(shì)之一是它易于使用。除了圖片之外，Sqirlz Morph的一個(gè)特權(quán)是你可以將動(dòng)畫保存為 AVI、Flash和GIF。Sqirlz Morph 是一個(gè)漂亮的程序，可以讓任何級(jí)別的用戶將多個(gè)圖像變換為一個(gè)復(fù)合圖像。

平滑切換 VS Prezi

Prezi 比 PowerPoint 晚了近20年，采用了一種截然不同的演示方法。Prezi 不是基于 2D 頁(yè)面構(gòu)建的，而是提供了無限大小的 3D 畫布。這與 PowerPoint 一張白紙的初始狀態(tài)完全不同，因此可能需要一些時(shí)間來適應(yīng)。

這個(gè)非常聰明的軟件正是采用了一種更為平滑，更有吸引力的方式導(dǎo)航和展示他的平面圖。縮放和平移功能允許演示者在演示期間在畫布上移動(dòng)，從而將觀眾的注意力集中在特定點(diǎn)上，同時(shí)允許演示者顯示"大圖"。

隨著 PowerPoint 推出平滑切換。這個(gè)新功能為觀眾提供了一個(gè)無限畫布（類似于 Prezi）的外觀，盡管實(shí)際上它是由許多幻燈片構(gòu)建的。通過平滑切換，你同樣可以在一個(gè)無縫過渡中移動(dòng)，放大或更改眾多對(duì)象的外觀。Prezi 中的經(jīng)驗(yàn)可以運(yùn)作到平滑切換之中，需要一些技巧來處理，比如用更多的幻燈片來模擬無限畫布。

創(chuàng)作基礎(chǔ)思路（上）

準(zhǔn)備階斷

變形可以以多種方式使用，你可以更改一個(gè)或多個(gè)參數(shù)：對(duì)象的位置，顏色，大小或形狀，以創(chuàng)建引人注目的效果。可以輕松顯示動(dòng)作，放大和縮小以及更改形狀。

1. 選中一張含對(duì)象的幻燈片；
2. 選中并復(fù)制該幻燈片（Ctrl-D）；
3. 在復(fù)制幻燈片更改原始對(duì)象，將對(duì)象以最終狀態(tài)來顯示；
4. 放置到位后，將"平滑"切換應(yīng)用于第二張幻燈片。

對(duì)象出現(xiàn)以下三種情況：

• 兩個(gè)對(duì)象匹配成功：兩個(gè)對(duì)象在轉(zhuǎn)場(chǎng)時(shí)完成字體、顏色、大小、位置、角度等多種屬性的的漸變（可以疊加）。
• 對(duì)象在前張幻燈片：成為過渡的一部分，與淡出動(dòng)畫效果類似，逐漸消失。
• 對(duì)象在后張幻燈片：成為過渡的一部分，與淡入動(dòng)畫效果類似，逐漸出現(xiàn)。

形狀中心點(diǎn)進(jìn)行位置平移；形狀大小則進(jìn)行拉伸。以上漸變過程均按照插值算法。

處理技巧

平滑的玩法很多，但是如果想要達(dá)成一些相對(duì)特殊的效果，那還是需要一點(diǎn)調(diào)校手法。

• 指定順序：如果存在多個(gè)對(duì)應(yīng)的可能，平滑切換將優(yōu)先采取近似原則，其次采取就近原則進(jìn)行變換。但有時(shí)我們想打破這個(gè)規(guī)則,方法是：在每個(gè)形狀上標(biāo)注序號(hào)，這樣一來就可以按照指定的順序進(jìn)行平滑切換。文字可以設(shè)置為無文本填充以免影響視覺效果。
• 矢量化：不同形狀之間，比如矩形和三角開屬于不同種類元素，無法形成匹配。這時(shí)就需要事先進(jìn)行矢量化，使"轉(zhuǎn)換為任意多邊形"一鍵將形狀轉(zhuǎn)換為曲線就可以使用平滑功能了。不同文字之間的匹配，可以使用相同的思路，使用"布爾運(yùn)算"來進(jìn)行矢量化操作。
• 調(diào)節(jié)點(diǎn)：帶有調(diào)節(jié)點(diǎn)的形狀，通過改變調(diào)節(jié)點(diǎn)的參數(shù)，也能形成變形。比如方形和圓形的變化可以使用圓角矩形，改變唯一的調(diào)節(jié)點(diǎn)，就可以愉快變變變了。同樣的玩法適用于一切可以調(diào)參的圖形。
• 翻轉(zhuǎn)：在漸變的過程中，角度將以形狀中心點(diǎn)進(jìn)行旋轉(zhuǎn)（Z軸），但是翻轉(zhuǎn)是在 XY 軸上進(jìn)行的。將元素進(jìn)行翻轉(zhuǎn)，會(huì)得到意想不到的效果。你還能激活XYZ軸，如果要保持平面（提高動(dòng)畫平滑效果）則設(shè)置：材料（特殊效果-平面）、光源（特殊格式-平面）。
• 分組：平滑不能完美支持組合類的元素，因此需要解散分組。SMART形狀、圖表、SVG圖形、形狀組合，需要先打散（或轉(zhuǎn)換）。
• 裁剪：平滑與裁剪，將兩個(gè)簡(jiǎn)單的功能結(jié)合在一起，就能有非常實(shí)用的效果。
• 填充：圖片要實(shí)現(xiàn)變形效果，需要將圖片填充在矢量形狀中。

移動(dòng)對(duì)象

使用變形，你可以比使用熟悉的運(yùn)動(dòng)路徑更快地更改對(duì)象在幻燈片上的位置。當(dāng)幻燈片上有多個(gè)對(duì)象并為每個(gè)對(duì)象設(shè)置運(yùn)動(dòng)路徑需要數(shù)小時(shí)時(shí)，它可以節(jié)省時(shí)間。可以采取多個(gè)幻燈片，連續(xù)變換。例如，你可以移動(dòng)拼圖。

可替代動(dòng)畫效果：直接動(dòng)作路徑

文字變化

可以編輯文字的對(duì)象（形狀、圖形）既可以進(jìn)行對(duì)象變體也可以進(jìn)行字?jǐn)?shù)和字符數(shù)的變體。對(duì)象、字?jǐn)?shù)、字符數(shù)的變體，不可同時(shí)進(jìn)行。一旦你有了字母（字符），只需重新格式它們，平滑切換將自動(dòng)配對(duì)變形。比如將單詞中的字符重新排列以創(chuàng)建字謎效果。

改更屬性：

并不局限于運(yùn)動(dòng)、大小、旋轉(zhuǎn)等，你還可以更改對(duì)象的顏色，形狀效果等。

• 換顏色：如果兩個(gè)幻燈片上有兩個(gè)不同顏色的對(duì)象，變形會(huì)逐漸將顏色從一個(gè)變?yōu)榱硪粋€(gè)。顏色將按RGB和透明的屬性進(jìn)行分別插值變化。
• 放大和縮小：平滑切換可以成為縮放效果的絕佳替代品。你可以平滑地縮小或切換到特寫視圖以強(qiáng)調(diào)演示文稿中的對(duì)象。

效果和動(dòng)畫的建議

• 創(chuàng)建動(dòng)作和強(qiáng)調(diào)動(dòng)畫
• 創(chuàng)建進(jìn)入和退出動(dòng)畫
• 為文字添加動(dòng)畫效果
• 創(chuàng)建回文造詞效果
• 放大、滾動(dòng)并裁剪圖像
• 創(chuàng)建三維旋轉(zhuǎn)
• 將一個(gè)形狀平滑切換到另一個(gè)形狀

創(chuàng)作基礎(chǔ)思路（下）

相同形狀之間變形

默認(rèn)情況下，只有同一類型的形狀之間才可以實(shí)現(xiàn)平滑切換效果，比如五角星和五角星之間，矩形和矩形之間等等，通過更改第二頁(yè)形狀的大小、位置、填充顏色，可以實(shí)現(xiàn)頁(yè)面間的平滑過渡。

不同形狀之間變形

不同類型的形狀之間，該如何實(shí)現(xiàn)平滑切換效果呢？這里需要做一點(diǎn)小處理，將它們首先都轉(zhuǎn)為任意多邊形，借助任意多邊形這個(gè)中間橋梁，實(shí)現(xiàn)平滑切換效果。

圖片之間的變形

• 默認(rèn)情況下，平滑切換只能用于圖形之間。如果想對(duì)圖片進(jìn)行平滑切換，需要用到填充技巧。
• 在開始幻燈片中，對(duì)圖片A進(jìn)行摳圖，使用工具（AI）得到剪影樣式的矢量圖形，在 PPT 中會(huì)顯示為曲線多邊形（Freeform）；
• 對(duì)該圖形進(jìn)行圖片填充，也就是貼圖，這樣外觀看起來是一張圖片而實(shí)際上是一個(gè)形狀；
• 在終止幻燈片中，對(duì)另一個(gè)圖片B重復(fù)以上步驟；
• 在終止幻燈片中，設(shè)置平滑切換即可。

或使用小編的 Office 插件（HST，寒樹工具箱）一鍵生成。

圖表對(duì)象

根據(jù)平滑切換的使用方法，兩張幻燈片里有同一個(gè)圖表對(duì)象（比如柱狀圖），正常情況下，更改圖表的數(shù)據(jù)后，并沒有長(zhǎng)方形變短變長(zhǎng)的平滑效果，僅僅只有漸變效果。

圖表需要解組后打散，線和圖形框成為獨(dú)立的原素，正常情況下會(huì)自動(dòng)匹配。如果有必要，還可以調(diào)整標(biāo)題、備注等內(nèi)容，平滑切換的效果就完美實(shí)現(xiàn)了。

3D 模型的平滑效果

使用 3D 模型增加文檔、工作簿、演示文稿和郵件中的視覺效果和創(chuàng)意效果。輕松插入 3D 模型，然后 360 度全方位旋轉(zhuǎn)。利用平滑切換功能，讓 3D 模型在 PPT 中栩栩如生，該功能可在幻燈片之間產(chǎn)生影視動(dòng)畫效果。

與設(shè)計(jì)靈感配合

平滑切換與設(shè)計(jì)靈感搭配，形成整體的頁(yè)面變化效果。

平滑切換的局限性

雖然平滑切換可以很好地應(yīng)用于工作中，一個(gè)物體只需移動(dòng)它的位置或改變它的外觀就可以使用平滑起切換。但平滑切換始終也有一些不足：

不能控制對(duì)象：平滑切換是一個(gè)切換功能，而不是真正意義上的動(dòng)畫，所以在使用平滑切換時(shí)需要前后兩張幻燈片配合使用；

沒有控制權(quán)：易用性是有代價(jià)的，我們不能去操控兩張幻燈片之間的切換。雖然大部分情況下能實(shí)現(xiàn)想要的效果，但是并不能完全控制；

配對(duì)的局限性：只能在同類對(duì)象之間形成動(dòng)畫，對(duì)象之間的配對(duì)規(guī)則比較復(fù)雜。雖然可以通過一些小技巧來完成配對(duì)，但無形中增加了工作量；

路徑局限性：移動(dòng)對(duì)象時(shí)，平滑切換始終選擇兩個(gè)對(duì)象之間的最短路徑。如果你希望對(duì)象遵循從 A 點(diǎn)到 B 點(diǎn)的特定路徑，則最佳選擇仍是使用"運(yùn)動(dòng)路徑" 動(dòng)畫；

多對(duì)象局限性：如果你更改了多個(gè)對(duì)象，則平滑切換頁(yè)將同時(shí)應(yīng)用于所有對(duì)象。如果你希望多個(gè)對(duì)象逐個(gè)更改其位置，則可以將序列分解為多個(gè)幻燈片并將變形應(yīng)用于所有對(duì)象；

增加重復(fù)性：它會(huì)導(dǎo)致幻燈片數(shù)量增加，自然也會(huì)增加文件大小；

無法重復(fù)：在此轉(zhuǎn)換中只能更改持續(xù)時(shí)間，2秒是默認(rèn)持續(xù)時(shí)間，無法像自定義動(dòng)畫那樣設(shè)置重復(fù)。

圖形局限性：PPT里的圖形即SVG圖像，僅支持極個(gè)別的圖標(biāo)可以匹配，男人與女人（或包含）。通過轉(zhuǎn)換為曲線來解決，但是破壞了SVG的完整性；

不能向上兼容：不支持2016之前的版本，雖然采用兼容性方法也可以達(dá)到完美播放效果，但是破壞了文件的一致性，操作上也較麻煩。

系列文章預(yù)告

下期預(yù)告

平滑切換是一個(gè)很好的工具，但很多人都沒有注意到它的真正力量。這就是為什么小編覺得有責(zé)任向你展示它的工作原理，并提供你可以使用的所有技巧和提示，以便您自己進(jìn)行更好的演示。在前一章抽象的原理課程后，讓我們一起用實(shí)踐去探索變形的力量吧！

O365智能系列

【上期】SVG圖像——為 PPT 增添視覺趣味

【下期】平滑切換——PPT動(dòng)畫腦洞全開（案例篇）

TML5 是第五個(gè)且是當(dāng)前的 HTML 版本，它是用于在萬(wàn)維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語(yǔ)言。本文將幫助讀者了解它。 -- Palak Shah

本文導(dǎo)航

• -新標(biāo)簽和元素 …… 08%

• -HTML5 的高級(jí)功能 …… 16%

• -地理位置 …… 16%

• -網(wǎng)絡(luò)存儲(chǔ) …… 33%

• -應(yīng)用緩存（AppCache） …… 44%

• -視頻 …… 50%

• -音頻 …… 61%

• -畫布（Canvas） …… 71%

• -HTML5 工具 …… 78%

編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/

作者： Palak Shah

譯者： geekpi

HTML5 是第五個(gè)且是當(dāng)前的 HTML 版本，它是用于在萬(wàn)維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語(yǔ)言。本文將幫助讀者了解它。

HTML5 通過 W3C 和Web 超文本應(yīng)用技術(shù)工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來。它是一個(gè)更高版本的 HTML，它的許多新元素可以使你的頁(yè)面更加語(yǔ)義化和動(dòng)態(tài)。它是為所有人提供更好的 Web 體驗(yàn)而開發(fā)的。HTML5 提供了很多的功能，使 Web 更加動(dòng)態(tài)和交互。

HTML5 的新功能是：

• 新標(biāo)簽，如 <header> 和 <section>

• 用于 2D 繪圖的 <canvas> 元素

• 本地存儲(chǔ)

• 新的表單控件，如日歷、日期和時(shí)間

• 新媒體功能

• 地理位置

HTML5 還不是正式標(biāo)準(zhǔn)（LCTT 譯注：HTML5 已于 2014 年成為“推薦標(biāo)準(zhǔn)”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個(gè)插件。

新標(biāo)簽和元素

• 語(yǔ)義化元素： 圖 1 展示了一些有用的語(yǔ)義化元素。

• 表單元素： HTML5 中的表單元素如圖 2 所示。

• 圖形元素： HTML5 中的圖形元素如圖 3 所示。

• 媒體元素： HTML5 中的新媒體元素如圖 4 所示。

圖 1：語(yǔ)義化元素

圖 2：表單元素

圖 3：圖形元素

圖 4：媒體元素

HTML5 的高級(jí)功能

地理位置

這是一個(gè) HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或?yàn)g覽器彈出窗口來實(shí)現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

• 公共交通網(wǎng)站

• 出租車及其他運(yùn)輸網(wǎng)站

• 電子商務(wù)網(wǎng)站計(jì)算運(yùn)費(fèi)

• 旅行社網(wǎng)站

• 房地產(chǎn)網(wǎng)站

• 在附近播放的電影的電影院網(wǎng)站

• 在線游戲

• 網(wǎng)站首頁(yè)提供本地標(biāo)題和天氣

• 工作職位可以自動(dòng)計(jì)算通勤時(shí)間

工作原理： 地理位置通過掃描位置信息的常見源進(jìn)行工作，其中包括以下：

• 全球定位系統(tǒng)（GPS）是最準(zhǔn)確的

• 網(wǎng)絡(luò)信號(hào) - IP地址、RFID、Wi-Fi 和藍(lán)牙 MAC地址

• GSM/CDMA 蜂窩 ID

• 用戶輸入

該 API 提供了非常方便的函數(shù)來檢測(cè)瀏覽器中的地理位置支持：

if (navigator.geolocation) {

// do stuff

}

getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設(shè)備的當(dāng)前地理位置。該位置被描述為一組地理坐標(biāo)以及航向和速度。位置信息作為位置對(duì)象返回。

語(yǔ)法是：

getCurrentPosition(showLocation, ErrorHandler, options);

• showLocation：定義了檢索位置信息的回調(diào)方法。

• ErrorHandler（可選）：定義了在處理異步調(diào)用時(shí)發(fā)生錯(cuò)誤時(shí)調(diào)用的回調(diào)方法。

• options （可選）： 定義了一組用于檢索位置信息的選項(xiàng)。

我們可以通過兩種方式向用戶提供位置信息：測(cè)地和民用。

1. 描述位置的測(cè)地方式直接指向緯度和經(jīng)度。

2. 位置信息的民用表示法是人類可讀的且容易理解。

如下表 1 所示，每個(gè)屬性/參數(shù)都具有測(cè)地和民用表示。

圖 5 包含了一個(gè)位置對(duì)象返回的屬性集。

圖5：位置對(duì)象屬性

網(wǎng)絡(luò)存儲(chǔ)

在 HTML 中，為了在本機(jī)存儲(chǔ)用戶數(shù)據(jù)，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經(jīng)引入了 Web 存儲(chǔ)，網(wǎng)站利用它在本機(jī)上存儲(chǔ)用戶數(shù)據(jù)。

與 Cookie 相比，Web 存儲(chǔ)的優(yōu)點(diǎn)是：

• 更安全

• 更快

• 存儲(chǔ)更多的數(shù)據(jù)

• 存儲(chǔ)的數(shù)據(jù)不會(huì)隨每個(gè)服務(wù)器請(qǐng)求一起發(fā)送。只有在被要求時(shí)才包括在內(nèi)。這是 HTML5 Web 存儲(chǔ)超過 Cookie 的一大優(yōu)勢(shì)。

有兩種類型的 Web 存儲(chǔ)對(duì)象：

1. 本地 - 存儲(chǔ)沒有到期日期的數(shù)據(jù)。

2. 會(huì)話 - 僅存儲(chǔ)一個(gè)會(huì)話的數(shù)據(jù)。

如何工作： localStorage 和 sessionStorage 對(duì)象創(chuàng)建一個(gè) key=value 對(duì)。比如： key="Name"， value="Palak"。

這些存儲(chǔ)為字符串，但如果需要，可以使用 JavaScript 函數(shù)（如 parseInt() 和 parseFloat()）進(jìn)行轉(zhuǎn)換。

下面給出了使用 Web 存儲(chǔ)對(duì)象的語(yǔ)法：

• 存儲(chǔ)一個(gè)值：

• localStorage.setItem("key1", "value1");

• localStorage["key1"] = "value1";

• 得到一個(gè)值：

• alert(localStorage.getItem("key1"));

• alert(localStorage["key1"]);

• 刪除一個(gè)值： -removeItem("key1");

• 刪除所有值：

• localStorage.clear();

應(yīng)用緩存（AppCache）

使用 HTML5 AppCache，我們可以使 Web 應(yīng)用程序在沒有 Internet 連接的情況下脫機(jī)工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時(shí)）。

應(yīng)用緩存的優(yōu)點(diǎn)是：

• 網(wǎng)頁(yè)瀏覽可以脫機(jī)

• 頁(yè)面加載速度更快

• 服務(wù)器負(fù)載更小

cache manifest 是一個(gè)簡(jiǎn)單的文本文件，其中列出了瀏覽器應(yīng)緩存的資源以進(jìn)行脫機(jī)訪問。 manifest 屬性可以包含在文檔的 HTML 標(biāo)簽中，如下所示：

<html manifest="test.appcache">

...

</html>

它應(yīng)該在你要緩存的所有頁(yè)面上。

緩存的應(yīng)用程序頁(yè)面將一直保留，除非：

1. 用戶清除它們

2. manifest 被修改

3. 緩存更新

視頻

在 HTML5 發(fā)布之前，沒有統(tǒng)一的標(biāo)準(zhǔn)來顯示網(wǎng)頁(yè)上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)方式。

目前，video 元素支持三種視頻格式，如表 2 所示。

下面的例子展示了 video 元素的使用：

<! DOCTYPE HTML>

<html>

<body>

<video src=" vdeo.ogg" width="320" height="240" controls="controls">

This browser does not support the video element.

</video>

</body>

</html>

例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來版本的 Chrome 中工作，我們必須添加一個(gè) MPEG4 和 WebM 文件。

video 元素允許多個(gè) source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式，如下所示：

<video width="320" height="240" controls="controls">

<source src="vdeo.ogg" type="video/ogg" />

<source src=" vdeo.mp4" type="video/mp4" />

<source src=" vdeo.webm" type="video/webm" />

This browser does not support the video element.

</video>

圖6：Canvas 的輸出

音頻

對(duì)于音頻，情況類似于視頻。在 HTML5 發(fā)布之前，在網(wǎng)頁(yè)上播放音頻沒有統(tǒng)一的標(biāo)準(zhǔn)。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁(yè)上播放音頻的標(biāo)準(zhǔn)方式。音頻元素用于播放聲音文件和音頻流。

目前，HTML5 audio 元素支持三種音頻格式，如表 3 所示。

audio 元素的使用如下所示：

<! DOCTYPE HTML>

<html>

<body>

<audio src=" song.ogg" controls="controls">

This browser does not support the audio element.

</video>

</body>

</html>

此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來版本中使 audio 工作，我們必須添加一個(gè) MP3 和 Wav 文件。

audio 元素允許多個(gè) source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個(gè)識(shí)別的格式，如下所示：

<audio controls="controls">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

This browser does not support the audio element.

</audio>

畫布（Canvas）

要在網(wǎng)頁(yè)上創(chuàng)建圖形，HTML5 使用 畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網(wǎng)絡(luò)下載圖像而提高網(wǎng)站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁(yè)面，如下所示：

<canvas id="myCanvas" width="200" height="100"></canvas>

畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實(shí)現(xiàn)繪制。所有繪畫應(yīng)在 JavaScript 中。

<script type="text/javascript">

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="blue";

cxt.storkeStyle = "red";

cxt.fillRect(10,10,100,100);

cxt.storkeRect(10,10,100,100);

</script>

以上腳本的輸出如圖 6 所示。

你可以繪制許多對(duì)象，如弧、圓、線/垂直梯度等。

HTML5 工具

為了有效操作，所有熟練的或業(yè)余的 Web 開發(fā)人員/設(shè)計(jì)人員都應(yīng)該使用 HTML5 工具，當(dāng)需要設(shè)置工作流/網(wǎng)站或執(zhí)行重復(fù)任務(wù)時(shí)，這些工具非常有幫助。它們提高了網(wǎng)頁(yè)設(shè)計(jì)的可用性。

以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。

• HTML5 Maker： 用來在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動(dòng)畫等。

• Liveweave： 用來測(cè)試代碼。它減少了保存代碼并將其加載到屏幕上所花費(fèi)的時(shí)間。在編輯器中粘貼代碼即可得到結(jié)果。它非常易于使用，并為一些代碼提供自動(dòng)完成功能，這使得開發(fā)和測(cè)試更快更容易。

• Font dragr： 在瀏覽器中預(yù)覽定制的 Web 字體。它會(huì)直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動(dòng)字形、Web 開放字體和矢量圖形來馬上測(cè)試。

• HTML5 Please： 可以讓我們找到與 HTML5 相關(guān)的任何內(nèi)容。如果你想知道如何使用任何一個(gè)功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設(shè)備的有用資源的列表，語(yǔ)法，以及如何使用元素的一般建議等。

• Modernizr： 這是一個(gè)開源工具，用于給訪問者瀏覽器提供最佳體驗(yàn)。使用此工具，你可以檢測(cè)訪問者的瀏覽器是否支持 HTML5 功能，并加載相應(yīng)的腳本。

• Adobe Edge Animate： 這是必須處理交互式 HTML 動(dòng)畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡(luò)和廣告領(lǐng)域。此工具允許用戶創(chuàng)建無瑕疵的動(dòng)畫，可以跨多個(gè)設(shè)備運(yùn)行。

• Video.js： 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應(yīng)該使用此工具。它使視頻看起來不錯(cuò)，并且是網(wǎng)站的一部分。

• The W3 Validator： W3 驗(yàn)證工具測(cè)試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標(biāo)記的有效性。要測(cè)試任何網(wǎng)站的標(biāo)記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁(yè)的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯(cuò)誤和警告。

• HTML5 Reset： 此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個(gè)良好的網(wǎng)絡(luò)體驗(yàn)。

Palak Shah

作者是高級(jí)軟件工程師。她喜歡探索新技術(shù)，學(xué)習(xí)創(chuàng)新概念。她也喜歡哲學(xué)。你可以通過 palak311@gmail.com[1] 聯(lián)系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 譯者：geekpi 校對(duì)：wxy

本文由 LCTT 原創(chuàng)編譯，Linux中國(guó) 榮譽(yù)推出

點(diǎn)擊“了解更多”可訪問文內(nèi)鏈接