前些日子,逛蘋果官網(wǎng)中的幾個動效,引起了我的注意:
看起來還挺酷的,是嗎?但其實做法非常簡單,只需要用到PPT中的一個功能,花3分鐘就能搞定。
這個功能就是——平滑:
首先,我們插入所有需要飛入的窗口,并放置到相應(yīng)的位置,得到頁面01:
然后我們把頁面01復(fù)制一下,得到頁面02:
我們選擇頁面01,把電腦放大,并把各個窗口移動到頁面外:
最后,我們給頁面02添加一個【平滑】切換效果:
一個多窗口飛入的效果,就完成了!
怎么樣,是不是超級簡單?
沒有復(fù)雜的動畫,只需要動動鼠標(biāo)移動一下~
并且,利用這個原理,我們還可以做出更多簡單又有意思的設(shè)計!
這個效果該怎么做呢?
我們首先來分析一下,頁面中元素的變化原理:
Step01:產(chǎn)品A和介紹文字飛出,騰出版面空間
Step02:產(chǎn)品B和介紹文字從頁面外進(jìn)入
Step03:產(chǎn)品B和介紹文字飛出,騰出版面空間
Step04:產(chǎn)品C和介紹文字從頁面外進(jìn)入
因此,我們需要至少3個頁面。
因為3個產(chǎn)品要依次展示,所以我們先產(chǎn)品A和介紹放到頁面上,產(chǎn)品B和產(chǎn)品C則放到頁面外:
然后,我們把頁面復(fù)制一份,在新的頁面中,把產(chǎn)品A和介紹文字,移動到頁面外:
移動完畢后,為頁面添加【平滑】切換效果:
產(chǎn)品A和介紹都飛出去了,原理第一步實現(xiàn)了,對嗎?
接下來,我們再把產(chǎn)品B和介紹,移動到頁面上:
再預(yù)覽一下效果:
產(chǎn)品A飛出,產(chǎn)品B進(jìn)入,原理的第一步和第二步都實現(xiàn)了。
重復(fù)上面的操作,我們就能實現(xiàn)產(chǎn)品B飛出,產(chǎn)品C進(jìn)入的效果:
最后,我們把這3頁連起來看一下:
還不錯吧?
看完上面的講解,想必很多朋友已經(jīng)想到了,這個頁面的制作方法。
依舊只需要兩個頁面:
我們首先還是制作好最終的頁面效果:
然后把頁面復(fù)制一份,把一些元素拖拽到頁面之外:
最后,為頁面添加平滑切換,就大功告成了:
這里有一個小Tips:
為了讓頁面看起來更有穿插的動感,這里我們可以把許多元素,拖拽到頁面的對面,這樣元素的移動路徑,就會穿過整個頁面:
算是一個小小的細(xì)節(jié)處理,感興趣的可以記一下。
整個效果的原理,也非常的簡單,也可以拆解為兩步:
Step01:標(biāo)題文字縮放進(jìn)入
Step02:產(chǎn)品和背景圖片淡化出現(xiàn)
我們首先把標(biāo)題文字放大,放到第一頁:
然后把該頁面復(fù)制一份,把標(biāo)題字號縮小,并添加產(chǎn)品和背景圖:
最后,為第二頁添加平滑切換效果,就完成了:
怎么樣,是不是超級簡單?
其實,所謂平滑切換,無非就是把前后頁面中,相同元素的移動路徑,展示了出來。
方法很簡單,但卻能讓頁面變得更有創(chuàng)意。當(dāng)然,學(xué)會了這一招,你還可以做點(diǎn)更酷的 PPT 頁面。
比如用平滑營造頁面氛圍感:
再比如利用平滑進(jìn)行產(chǎn)品參數(shù)的對比:
都是可以的,以上,希望對大家有所啟發(fā)。
·
原標(biāo)題:蘋果官網(wǎng)的這2個動畫,太絲滑了!用在PPT中堪稱王炸!
]]>課程名稱:輔助演講的PPT動畫設(shè)計
課程規(guī)模:10集(不斷更新)
課程形式:在線視頻教程
推薦理由:課程由iSlide官方出品,可靠高質(zhì)量。享受終身學(xué)習(xí)、更新和課堂互動特權(quán)。
限時活動:¥39¥59
試看視頻經(jīng)過壓縮(購買后視頻均為高清格式)
對于輔助演講型的幻燈片而言
我們需要著重考慮演示與演講的配合
在演示演講中,多花些時間來規(guī)劃構(gòu)思你的演講過程
借助PPT動畫,力求表現(xiàn)效果達(dá)到最好
本課程,將會全面介紹輔助演講的PPT動畫設(shè)計
本課程訂閱后可永久回看,終身獲取更新學(xué)習(xí)。
電腦網(wǎng)頁端課程入口:course.islide.cc
虛擬內(nèi)容服務(wù),不支持退訂,轉(zhuǎn)讓,請您理解!
]]>之前華為召開了「 HarmonyOS 2 及華為全場景新品發(fā)布會」。
發(fā)布會還沒結(jié)束,就有位讀者問我,這個動畫是怎么做的?
3G、4G、5G,通過立方體翻轉(zhuǎn)的形式切換,這個轉(zhuǎn)場很酷!
提問者的想法是把文本貼在 3D 立方體上:
然后再添加「平滑」切換:
白色背景
黑色背景
這個做法完全可以,就是操作起來有一絲麻煩。
其實呢,對于這個動畫效果,PPT 自帶的切換效果就能快速實現(xiàn)!而這個切換效果,就是「立方體」。
首先,選個好看的英文字體,輸入文本,并分別放置在 3 個頁面上:
英文字體:Montserrat
添加發(fā)布會同款漸變色:
接著,為第二頁、第三頁,添加「立方體」切換效果。并在效果選項中,調(diào)整第二頁方向自右側(cè),第三頁方向自頂部:
播放,來看下效果:
是不是非常的簡單?
其實,除了「立方體」,PPT 中還有很多實用且好玩的切頁效果。趁著的這篇文章,再跟大家分享 3 個。
01推入
非常實用的一個切頁效果。
它作用就是讓前后兩頁連續(xù)播放,進(jìn)一步體現(xiàn)頁面的關(guān)聯(lián)性。
比如,高通的這兩頁,有著清晰的視覺引導(dǎo)線,表明前后的遞進(jìn)關(guān)系:
為了頁面邏輯更加的通暢,我們就可以為第二頁,添加方向「自右側(cè)」的「推入」效果:
這兩頁同理:
對于擁有多個節(jié)點(diǎn)的時間軸頁,這個動畫也出奇的好用,我們完全可以內(nèi)容拆分成多頁:
再通過添加推入動畫,以此保證內(nèi)容的連續(xù)性:
比如我們?yōu)榻鸬渲谱鞯钠放平榻B PPT,就用到了這個方法:
當(dāng)然,除了橫向推入,也可以是縱向:
使用這個方法,唯一要注意的一點(diǎn)就是,前后兩頁的銜接處,不能有偏差。
02飛過
這應(yīng)該是切換動畫中, 少有的,酷炫但不浮夸的切頁效果。
就像文章開頭的 3G、4G 再到 5G,采用「飛過」的形式,也很不錯。
或者將效果選項改為「彈跳切出」:
還能做出一個酷炫的倒計時:
使用這個切換效果,有一點(diǎn)要注意,就是如果頁面加了背景圖,在播放時背景也會同步放大,頁面會出現(xiàn)閃白的情況。這看起來就有些丑了:
為了解決這個問題,我們可以剪切背景圖片,并在設(shè)置背景格式中,選擇「圖片或紋理填充」,再點(diǎn)擊剪切板即可:
通過這個方法,背景圖會被固定,切換時,也就不會出現(xiàn)閃白了:
03棋盤
這個效果很有意思。
它會將頁面拆分成 35 塊(5×7),并通過翻轉(zhuǎn)的形式,進(jìn)行切頁。
如果只是隨便的將其應(yīng)用到某一頁 PPT 上,翻頁效果算不上美觀:
而我們順應(yīng)動畫的思路,分別在 35 個板塊中,填入圖片,做成圖片墻的樣子:
那么,這時再加入「棋盤」切換,視覺效果就會好上許多:
又或者,我們在 35 個板塊中填入企業(yè) logo:
使用「棋盤切換」:
是不是很有意思呢?
好了,以上呢,就要跟各位分享的 4 個,非常實用的 PPT 切頁效果。
大家也別老抓著「平滑」切換不放手,其實偶爾用用這幾個切頁效果,也還挺不錯的。
原標(biāo)題:給我30秒,輕松搞定華為發(fā)布會上這個超酷PPT動畫!
]]>把一部你曾經(jīng)看過的動漫,做成一份PPT ,不知道各位是否想過,如果是你,你會怎么做呢?
沒想過也沒關(guān)系,這篇文章,就來跟大家分享一些我在完成《霧山五行》的設(shè)計思路,從3個方面來聊聊吧。
先來看看,這是完整版本的PPT頁面:
先來說一下
理由很簡單,有兩個:
所以,就想以這部劇為基礎(chǔ),來練練手,畢竟是靠這個吃飯的嘛。
截圖自霧山五行國漫
比較大的難點(diǎn)呢,有3個。
一是,這部國漫只有三集,被很多網(wǎng)友戲稱是『三集片』,劇情太少了,幾乎沒啥內(nèi)容。
而且,在這僅有的三集劇情中,還有一部分劇情,是為后面的故事埋下伏筆。所以,一個字,難。
二是,我們幾乎在網(wǎng)上,找不到太多可用的圖片素材。所以,一個字,難。
三是,很多人沒有看過這部動漫,或者沒有看過完整版,我們該如何用一份 PPT ,把故事講清楚?所以,一個字,難。
那問題既然來了,我們的解決方法是什么呢?
首先,對于圖片的話,這個比較好解決,把 PPT 文稿寫完之后,打開動漫,一幀一幀截圖就可以了。
這是我們當(dāng)時截圖的素材:
而對于內(nèi)容方面來講,很簡單,我把原劇情的順序打亂,按照發(fā)生的時間先后順序,重新梳理了故事線。
并且,把故事線中相關(guān)的人物,單獨(dú)拿出來,做一些介紹,從而讓大家清楚人物在故事中的關(guān)系:
因此,整份PPT的內(nèi)容結(jié)構(gòu),就完成了前兩個部分:
但如果只是這樣,整份 PPT 沒有太多可以升華的主題,只是簡單地重述了一下故事而已。
所以,就需要挖掘一下這部動漫背后的寓意,如果看過動漫的朋友,應(yīng)該都知道,它其實是圍繞著人性中的『貪嗔癡』,來講完了整段故事。
因此,在開頭的部分,我加了一句點(diǎn)題的話,就是這句:
另外呢,在最后,為了表達(dá)對導(dǎo)演的致敬,我找了一句導(dǎo)演在采訪中,說過的話,會比較契合動漫制作的初心:
所以,整份 PPT 的內(nèi)容,就是這么完成的。一共分為3個部分:
1.先來說一下整體的視覺規(guī)范
因為整部動漫是以國風(fēng)為主,所以,在字體的選擇上,我使用的是這兩個:
并且呢,給文字添加了一些金屬的紋理質(zhì)感:
而頁面中使用的素材,也多以云霧,筆刷等中國風(fēng)元素為主。
2.然后是單獨(dú)頁面的設(shè)計
首先是封面。
既然內(nèi)容是『霧山五行』,所以,我們就想營造出,有山有霧的感覺。就像這樣:
這里呢,大家可以看到有一種,鏡頭從近到遠(yuǎn)的推近感,這個是怎么做的呢?其實很簡單,就是給圖片添加了一個平滑切換而已。
怎么做的呢?
先來看看,我把上方的云層給刪掉后,看下底部的圖片,這里對圖片調(diào)整了透明度:
并且還做了裁剪,只留下了一小塊區(qū)域:
這是第二頁的圖片:
然后,在第二頁上,添加平滑切換效果,即可完成:
然后,這個頁面上,也會有很多不斷在運(yùn)動的云霧效果,也會非常有云霧縈繞的感覺:
動圖太大了,沒辦法上傳,各位可以下載源文件后查看
3.然后是過渡頁的設(shè)計
這里主要用到了一些動漫的光效,從而讓它跟文字,有一種穿插的效果:
這種做法呢,可以增強(qiáng)文字的質(zhì)感,而且還不會干擾文字內(nèi)容。
4.接下來是一些人物介紹的頁面
首先,來看麒麟的這張頁面,那這里呢,大家可以看到,麒麟的背后,會有一些轉(zhuǎn)動光效。
那這個是怎么做的呢?分為3個步驟。首先,先把麒麟,從畫面中摳出來:
然后呢,在麒麟和背景層的中間,添加一個光效素材:
最后,在頁面的外側(cè)添加一個大圓,并與光效素材組合,添加陀螺旋效果:
即可出現(xiàn)這種光圈旋轉(zhuǎn)的效果:
其次是這個頁面的排版:
這里的話,之所以這樣進(jìn)行排版,是因為沒有素材,所以,就必須按照素材中人物的角度,進(jìn)行分割排版。
這里的話,分割的部分使用的是筆刷,能夠增強(qiáng)一點(diǎn)中國風(fēng)的效果:
5.最后是故事部分的頁面呈現(xiàn)
這里的話,我們是想做成一幕幕的感覺,通過展示不同的畫面,把這一部分的故事,完整展現(xiàn)出來。
所以,采用的是傾斜排版:
這里呢,頁與頁之間,大家可以看到,是無縫銜接的,那這個是怎么完成的呢?
這里分享一個小技巧,我們可以在頁面的下方,添加一個與頁面相同尺寸的色塊:
然后呢,把這個頁面,復(fù)制到下一頁中,把色塊放到頁面區(qū)域,然后,在上方進(jìn)行排版即可:
當(dāng)然,中間還會有很多的細(xì)節(jié)技巧,鑒于篇幅的問題,就不跟大家詳細(xì)去說了。
各位呢,可以下載源文件,自行查看,里面有一些動畫效果,可以直接利用動畫刷,拿走使用。
好了,大家可以在評論區(qū)評論任意文字就可以免費(fèi)下載啦。
以上,就是這篇文章的主要內(nèi)容。
原標(biāo)題:耗時13小時,我?guī)妥顝?qiáng)國漫制作了一份PPT!【源文件免費(fèi)送】
]]>今天這篇文章來拆解一下下面三頁P(yáng)PT動畫:
接下來,就進(jìn)行單頁動畫的講解,先易后難,先來說個操作簡單的動畫吧!
其實,這 3 排動畫的效果是一樣的,只是方向不同。
為了讓大家更容易理解,這里我使用色塊制作了一個單排的圖示,這樣會清晰很多:
多個并列的色塊,先后從頁面邊緣滑入,最后再緩慢結(jié)束。
那這個動畫,該怎么做呢?
其實很簡單。
先給頁面中的元素同時添加 [ 飛入 ] 的動畫效果,方向為 [ 從右側(cè) ],并將動畫的持續(xù)時間調(diào)整為 1.5 秒。
現(xiàn)在動畫結(jié)束的很生硬,為了解決這個問題,我們可以在 [ 效果選項 ] 中,將 [ 平滑結(jié)束 ] 同樣改為 1.5 秒,與動畫持續(xù)的時間保持一致。
最后,按照形狀的出現(xiàn)順序,依次設(shè)置動畫延遲的時間,比如設(shè)置相鄰兩個形狀的動畫間隔為 0.2 秒。
到這兒,滑動延遲動畫就完成了!
我們在遇到 4 項及以上的內(nèi)容頁面時,都可以采用這樣的動畫形式。
比如用于時間軸頁,各個時間節(jié)點(diǎn)沿軸線依次滑入:
又或者是多圖展示:
甚至是文字云:
接著,咱們再來拆解第二個動畫。
同樣的,我們把這個動畫用圖示簡易化:
可以看出,這頁動畫主要有兩部分構(gòu)成:一個是手機(jī)的縮放出現(xiàn);另一個是圓形的擴(kuò)散出現(xiàn)。
先來說一下手機(jī)的縮放出現(xiàn)動畫。
它和普通的縮放動畫還不太一樣,為了讓各位看的更清晰,我特意做了一個對比圖供各位參考。
相信你一定能看出來,右側(cè)動畫結(jié)束的十分生硬,而由于左側(cè)有一個放大再縮小的過程,它出現(xiàn)方式會更加柔和。
那么,這種縮放出現(xiàn)是怎么做到呢?
先給手機(jī)添加一個 [ 基本縮放 ] 動畫,持續(xù)時間設(shè)置為 0.25 秒。
接著,再添加一個 [ 放大/縮小 ] 效果,持續(xù)時間同樣設(shè)置為 0.25 秒,延遲為 0.1 秒。
最后,在?[ 效果選項 ] 中,調(diào)整放大尺寸,設(shè)置平滑開始、結(jié)束的時間相等,并勾選 ?[ 自動翻轉(zhuǎn) ]。
一定要勾選 [ 自動翻轉(zhuǎn) ],只有這樣手機(jī)在放大之后,才能自動縮小,恢復(fù)原來大小。
接下來,咱們來說一下圓形的擴(kuò)散出現(xiàn)。
這個動畫也很簡單,給所有圓形添加一個 [ 路徑 ] 動畫,持續(xù)時間為 0.6 秒,并設(shè)置平滑結(jié)束同樣為 0.6 秒。
接著,非常重要的一步,選中所有圓形,點(diǎn)擊 [ 翻轉(zhuǎn)路徑方向 ],它的作用就是互換形狀的開始、結(jié)束的位置。
最后,手動將形狀的起始位置,拖動到所有圓環(huán)的中心位置即可。
我們把兩個動畫合在一起,再來看下效果。
其實,圓形擴(kuò)散動畫 PPT 中的使用頻率還蠻高的,基本上大多數(shù)環(huán)繞排版型的頁面,都可以添加這個效果。
來看幾個案例:
怎么樣?還不錯吧?
這個動畫線路眾多,看起來很是復(fù)雜。為讓方便各位理解,我只取頁面上的一條路線進(jìn)行講解:
?
同樣,這個動畫由兩部分組成,一個是圓形縮放出現(xiàn),另一個是線條的擦除動畫。
相信你一定發(fā)現(xiàn),這里圓形的動畫,與剛才手機(jī)出現(xiàn)的效果是一樣的。
所以,只要搞定曲線的擦出效果就可以了!
如果你用過 [ 擦除 ] 動畫,那么應(yīng)該知道,在一條線段中,PPT 的擦除只能夠直來直去,不會隨著線條彎曲的方向而改變:
那么,我們該怎樣在一條線段中,改變擦出的方向呢?
答案很簡單,將線條分段。
借助 LvyhTools 插件中的?[ 線條分段 ],即可快速把曲線分段:
這樣就可以分別為它們添加動畫,從而控制擦除的方向:
最后,調(diào)整不同線段擦除的時間,讓其首位相接即可:
看到這兒,相信你再看下面的案例,就會明白它們是怎么做的了!
時間軸的擦除呈現(xiàn):
模擬充電線:
好了,以上呢,就是這篇文章的全部內(nèi)容了,這 3 個動畫效果,你學(xué)會了嗎?
最后,送給大家一個福利,評論區(qū)評論任意文字即可免費(fèi)獲取文中案例的 PPT 源文件。
原標(biāo)題:我花了4小時,拆解了企業(yè)微信PPT的動畫設(shè)計!
]]>前幾天,在一家國外 PPT 設(shè)計工作室的網(wǎng)站上,看到了一份谷歌的 PPT ,頁面敘事的邏輯很有意思,是以一個人物的行為,來貫穿出谷歌搜索的商業(yè)價值。
當(dāng)然,頁面的視覺,還有動畫設(shè)計,也都非常贊。如果有條件的朋友,可以看一下視頻版,一共只有19秒:
其中有一些動畫設(shè)計,我個人非常喜歡,比如像這個人員展示:
還有這個:
所以,一時手癢,就花了一些時間,把它給還原了出來,并且對部分頁面的設(shè)計,做了小的改動。
這是還原版本,文末有領(lǐng)取的方式:
在還原的過程中,有幾個小的動畫技巧,給各位分享一下。
比如我在做這個頁面的時候,各位可以看到,有一個手機(jī)傾斜旋轉(zhuǎn)進(jìn)入的動畫:
然而,在 PPT 自帶的動畫效果中,并沒有這個動效:
那么該咋辦呢?其實有一個非常簡單的方法,可以一鍵完成。
我們可以在頁面外側(cè),放置一個傾斜的手機(jī),頁面上是垂直的手機(jī):
然后點(diǎn)擊 iSlide 插件,找到擴(kuò)展>平滑過渡:
先選中外側(cè)的手機(jī),再選中內(nèi)側(cè),就可以實現(xiàn)手機(jī)傾斜旋轉(zhuǎn)式進(jìn)入:
同樣地,還有像這個動畫:
也是使用平滑過渡一鍵完成,而且動畫呢,也會非常流暢。
在我模仿這個頁面的動畫時,最簡單的方式是借用平滑切換:
但如果你的軟件版本不高,也可以使用直線路徑動畫完成。
而操作過程呢,也會非常簡單。這里分為兩個部分,咱們分別來說。
首先是文字部分,它會有一個向上滾動出現(xiàn)的動畫:
這里的話,制作太簡單了。怎么做呢?
首先,我們需要把所有的人名縱向排列:
然后,添加一個向上的直線路徑動畫:
但是要注意,因為每一次,我們只讓它出現(xiàn)一個人名,所以,可以在上下兩側(cè),添加一個色塊進(jìn)行遮擋。
就像這樣:
如此一來,就可以實現(xiàn)人名的滾動效果。
接下來是照片的部分,它的運(yùn)動軌跡是從右向左:
操作的手法也是一樣的,給每一個人物的照片,添加一個向左的直線路徑動畫:
然后呢,為了讓動畫更加流暢,可以調(diào)整直線路徑的平滑結(jié)束效果:
最后,為了讓幾張照片的出現(xiàn)更有節(jié)奏感,我們可以那幾張圖片同時出現(xiàn):
并從第2張圖片開始,依次添加一個延遲時間,我這里添加了一次延遲0.2秒:
這樣就可以讓動畫的節(jié)奏感更強(qiáng):
當(dāng)我在設(shè)計這一頁 PPT 的動效時,我采用了一個比較偷懶的做法:
那就是利用平滑切換效果,讓元素的動畫,自動完成:
具體是怎么用的呢?咱們可以下來分析一下原稿。
從上一張頁面,到下一張過渡時,上頁 PPT 的背景圖片,被一點(diǎn)點(diǎn)切割,第二頁的圖片,也是被切割出現(xiàn):
那這個是怎么完成的呢?這里有一個小技巧。
在前一頁 PPT 的頂部,放上下一頁圖片,并將其裁剪;
在后一頁 PPT 的底部,放上上一頁背景,并將其裁剪;
大概就是這樣:
而如果你用過平滑切換效果就知道,平滑切換效果,可以把圖片被裁剪的區(qū)域,進(jìn)行還原:
如此一來,就可以實現(xiàn),這樣的頁面切換效果:
而這,跟我之前分享過的,蘋果官網(wǎng)動畫是一樣的原理:
都是利用了平滑切換效果,可以將裁剪后的圖片進(jìn)行復(fù)原的原理。
好了,以上呢,就是我在復(fù)原這份 PPT 的過程中,所用到的一些很好的技巧。最后呢,給各位完整地來看一下復(fù)原的動畫效果:
如果各位感興趣,在評論區(qū)評論任意文字,即可免費(fèi)下載源文件。
原標(biāo)題:我花了2小時,復(fù)刻了谷歌內(nèi)部極簡風(fēng)PPT,堪稱職場類范本!
]]>之前蘋果在官網(wǎng)偷偷上線了iPhone SE手機(jī)產(chǎn)品,相信很多讀者,都知道了這個事情。
但今天,咱們不是來聊這款手機(jī),而是聊聊這款手機(jī)的網(wǎng)頁動畫設(shè)計。
我看了一下這個官網(wǎng),里面的動畫呢,大概分為3個。
- 第01個 -
-?第02個?-
-?第03個?-
接下來,咱們就挨個來了解一下動畫的實現(xiàn)過程。
坦白講,這個動畫的設(shè)計難度一點(diǎn)都不高,但對于素材和軟件有一定的要求。
如果你有手機(jī)的3d模型,并且,PPT的版本支持平滑切換功能,你只需要把3D模型素材,按照網(wǎng)頁中的樣式,擺放在3個頁面上就可以了。
這里呢,因為我沒有官方的3D素材模型,所以,隨意拿了一個三維模型來替代。
擺放好之后,只需要在第2和3頁,添加平滑切換動畫即可實現(xiàn):
這個動畫的效果呢,之前也講過,但這次的有點(diǎn)不太一樣,因為需要上層的鏤空蒙版放大很多倍:
那這個動畫是怎么實現(xiàn)的呢?我這邊做了一個類似的案例,大概是這樣:
如果我們把這一頁P(yáng)PT的圖層拆分來看,大概是這樣:
對于上層的遮罩蒙版,可能大多數(shù)人想到的做法是,添加放大動畫即可。
但這種方法并不好,因為給頁面上的圖形,添加放大動畫后,會有一定的毛邊,看起來非常粗糙:
這里,我建議的做法是,使用 iSlide 的插件的平滑過渡功能,可以解決這個問題。
咱們可以來對比下效果:
那問題來了,具體是怎么做的呢?
首先,我們需要在頁面上添加兩層鏤空蒙版,底層的正好與頁面比例一致,上層的可以放大至7000%,甚至更高,這里需要我們手動調(diào)整其尺寸:
然后先選中底層的蒙版,再選中上層的蒙版,添加平滑過渡效果即可。
來看一下效果:
而對于中層的白色半透明蒙版,和下層的圖片素材來講,只需要分別添加淡出效果和淡入效果即可,時間可以保持一致:
只有這樣,才會有底層圖片慢慢變清晰的感覺,來看一下效果:
這就是整個動畫的實現(xiàn)過程,按照這個方法,另一個頁面的動畫,其實也是這樣來完成的。
直接來看案例吧,我就不多羅嗦一遍了:
咱們可以再來看一遍頁面上的動畫效果:
會發(fā)現(xiàn)前一張圖片消失的同時,后一張圖片逐漸出現(xiàn)。
那這個是怎么實現(xiàn)的呢?其實,這就需要我們利用新版本PPT軟件中的平滑切換動畫。
在這里簡單科普一下,對于平滑動畫來講,主要是實現(xiàn)相鄰兩頁之間的元素變化效果。
比如像這樣:
其中,平滑切換動畫有一個特殊變化效果,那就是可以對裁剪后的圖片,進(jìn)行復(fù)原。
什么意思呢?舉個實際的例子,比如像有兩張連續(xù)的 PPT 頁面,前一張頁面上的圖片,我們對它裁剪,僅留下局部:
第二張的話,讓圖片鋪滿全屏,這樣,當(dāng)為其添加平滑切換效果時,就會有這樣的效果:
而這里提到的蘋果頁面上的切換效果,其實就可以利用這點(diǎn)特性來實現(xiàn)。
咱們把這三張PPT頁面拆解來看,頁面上的圖層擺放順序,是這樣的:
這里什么叫做裁剪區(qū)域呢?就是我們在第一頁 PPT 上,其實疊加了兩張圖片,黑色在上,白色在下。
但是,我們需要對底部白色的圖片進(jìn)行裁剪,僅留下上方那一小塊區(qū)域:
這樣,當(dāng)我們切換到下一頁時,就會有邊切換,邊裁剪的效果:
當(dāng)然,后面的頁面也是類似,這是后兩張 PPT 圖層的分布:
因為中間的頁面起到連接前后兩張 PPT 的作用,所以,這里有3個圖層
到這里呢,我們只需要添加切換效果,即可完成這樣的動畫效果:
明白了嗎?這些動畫效果的實現(xiàn),在操作難度上都不大,但更多在于創(chuàng)意想法。
當(dāng)然,在這里呢,也歡迎大家去更新自己的PPT軟件,因為畢竟有很多的功能,是新版軟件中才能使用。
原標(biāo)題:蘋果新品發(fā)布,這3個官方網(wǎng)頁動畫也太酷了!手把手教你用PPT搞定
]]>前段時間,有一位做幼師的朋友,給我發(fā)了一份她做的教學(xué)課件,內(nèi)容是介紹火烈鳥的特征和習(xí)性。
因為是給小朋友來講,所以,她覺得PPT做的太無趣,不能吸引小朋友的注意力,問我該咋辦?
其實,如果我們能夠借助 PPT 中的3D動畫效果,讓火烈鳥像飛機(jī)一樣,動起來,也許是個不錯的選擇。
但問題在于,我們到底該如何做,才能讓火烈鳥動起來呢?這篇文章,就來給各位分享一下我的解題思路。
想要讓元素在PPT中動起來,需要具備兩個條件:
這二者缺一不可。
如果能夠滿足以上兩個條件,接下來,就會簡單很多,咱們繼續(xù)往下看。
首先,從哪里找到火烈鳥的3d模型呢?
這里呢,給大家分享3個,我用到的免費(fèi)3D模型網(wǎng)站。
1.https://free3d.com
這里有大量的3D模型,而且,免費(fèi)的模型有很多:
而且,網(wǎng)站的使用體驗很好,下載也會很方便:
2.https://www.turbosquid.com
這也是一個國外的模型網(wǎng)站,以付費(fèi)模型為主,但也有一些免費(fèi)的:
在網(wǎng)站的首頁,有很詳細(xì)的模型分類:
3.微軟自帶的3D查看器
這是微軟自家的一個模型資源庫,之前微軟曾推出過一個網(wǎng)站,但去年關(guān)掉了,但里面的3D模型,可以在這里找到:
點(diǎn)擊3D資源庫可以找到:
在這3個網(wǎng)站中,我個人比較推薦的是微軟自帶的3D查看器。
為啥呢?因為其他的模型網(wǎng)站,雖然也提供3D資源,但當(dāng)你下載之后,在導(dǎo)入到PPT頁面上時,往往會出現(xiàn)的一個問題是素材的紋理效果丟了。
啥意思呢?啥叫紋理丟了呢?
簡單解釋一下,對于一個3d模型來講,其實分為兩個部分,一個是模型,一個是紋理:
如果沒有了紋理,那么,3D模型就會變成這樣:
這是PPT軟件中,3D功能的一個硬傷,目前,還沒有很好的解決方法。
而3D查看器的資源庫中,所有的3D模型,都是自帶紋理效果,所以,優(yōu)先推薦這個。
當(dāng)我們找到了想要的3D模型之后,接下來,把它拖入到頁面上,我們會發(fā)現(xiàn),素材上方有一個360度旋轉(zhuǎn)的按鈕。
在這里呢,我們可以任意的調(diào)整模型的角度:
但,如果想要讓火烈鳥給動起來,我們就需要為PPT頁面添加平滑切換效果,一鍵操作,非常簡單:
比如說上一頁的PPT,火烈鳥是這個造型:
在下一頁P(yáng)PT中,是這個造型:
我們只需要在下一頁 PPT 上,添加平滑切換效果即可:
很簡單對嗎?到這里呢,方法已經(jīng)解釋完畢,接下來,咱們就要修改課件了。
對于這份課件,看起來雖然有5個頁面,但其實,我們只需要來設(shè)計兩個頁面版式即可:
1.咱們先來做內(nèi)容頁
如果我們只是簡單地,把文字和素材放在頁面上,看起來會很單調(diào),對嗎?
那應(yīng)該如何進(jìn)行頁面的修飾呢?
提到火烈鳥,我在網(wǎng)上找了一些素材,給人的感覺是粉粉的:
所以, PPT 頁面的背景,我們就可以選擇粉色:
而為了確保頁面上的信息,能夠被看得清楚,因此,我們可以選擇深紅色,作為強(qiáng)調(diào)色:
但即便如此,頁面依舊很單調(diào):
那該怎么辦呢?
因為每一頁P(yáng)PT,都在講火烈鳥的一個器官,所以,我們可以在頁面上,插入一些手寫的英文字母,作為裝飾。
并且呢,添加一些輔助的點(diǎn)綴元素。就像這樣:
但頁面的視覺層次感,依舊有一點(diǎn)單薄,我們可以添加一個白色色塊,使其與文字和素材形成重疊的感覺:
到這里呢,內(nèi)容頁的版式就完成了。我們可以基于不同頁面內(nèi)容的含義,調(diào)整3d素材的角度:
2.接下來,我們來設(shè)計封面頁的版式
封面設(shè)計中,我們依舊可以采用,素材疊加色塊的形式進(jìn)行呈現(xiàn)。
比如我們在頁面中心,插入一個圓形,并將素材放在色塊上:
然后,我們把文字寫在色塊里即可。
這里呢,為了讓整體的排版樣式趨于一致,我采用了一個手寫的英文,疊在了標(biāo)題上。
但頁面的左右兩側(cè),看起來有一些單調(diào),那這時候怎么辦呢?
我們可以去添加一些植物素材,讓頁面的視覺效果,看起來更加豐富:
好了,到這里呢, PPT 的設(shè)計就已經(jīng)完成了,咱們來看一下最終的動態(tài)效果:
怎么樣?還不錯,對嗎?
原標(biāo)題:我修改了一份女孩看了會心動的PPT!
]]>這篇文章,來聊一聊平滑切換效果。
因為知識點(diǎn)比較碎,所以,為了方便閱讀,我使用列表式進(jìn)行寫作。
比如說之前分享過得一份課件 PPT ,我們可以把封面圖書素材,和后面的結(jié)構(gòu)圖建立關(guān)聯(lián):
比如說,我在制作公眾號的教程課件時,為了讓各位清楚的看到一些參數(shù)變化,所帶來的影響,我會這樣來呈現(xiàn)。
這里呢,其實就分為上下兩頁,上頁是初始形態(tài),下一頁是最終形態(tài):
而數(shù)字的變化,同樣也是利用平滑效果完成的。
我們在頁面上輸入一大串并列的數(shù)字,然后,復(fù)制,并粘貼為圖片:
利用裁剪,在上頁定位出一個初始的數(shù)字,在后頁P(yáng)PT上,依舊是利用裁剪,定位第2個數(shù)字:
最后,在第2頁 PPT 上,添加切換效果,大功告成:
這是數(shù)字滾動的慢動作
比如說,我們在講PPT時,講到后面的頁面,忽然想起,這個知識點(diǎn),在前面的 PPT 頁面上出現(xiàn)過。
老師們一般會說:「還記得我前面講過的知識點(diǎn)嗎」?但學(xué)生們一般都忘了。
不過,這時候,如果我們能夠讓 PPT 快速回到前面的頁面中呢?就像這樣:
是不是好很多呢?
那這個是怎么實現(xiàn)的呢?其實,并不是真的回到了前面的頁面,而是利用平滑切換,在后一頁P(yáng)PT上,做了一個時光穿越效果。
方法很簡單,把前面的PPT頁面,全部導(dǎo)出為圖片,排成一列,并組合:
在后一頁 PPT 上呢,同樣把這一列圖片放在頁面上,但是位置上有些變化:
如果換成真實的 PPT 課件頁面,大概是這樣:
最后,在第二頁 PPT 上添加平滑切換效果即可:
當(dāng)我們給后一頁元素,添加三維旋轉(zhuǎn)效果后,平滑效果就不起作用了,這一點(diǎn)切記。
最后再啰嗦一遍,平滑效果屬于高版本軟件的功能,不要再問我,為啥2003版的軟件,沒有找到這個功能了。
因為那是17年前的產(chǎn)品。
好了,今天的文章就是這些。
原標(biāo)題:讓學(xué)術(shù)型PPT更出彩,強(qiáng)烈安利這個基礎(chǔ)動畫
]]>這是大疆無人機(jī)官網(wǎng)的截圖動畫:
問我能不能在 PPT 中,做出這樣的點(diǎn)擊交互的按鈕?
其實想要做出這樣的交互效果,我們離不開一個基礎(chǔ)的功能,那就是『觸發(fā)動畫』。
聽到這個名字,可能有些讀者會覺得陌生,其實是沒什么高大上的,初高中的老師們,非常喜歡用這個動畫。
當(dāng)你在上學(xué)的時候,你有沒有被老師們 PPT 課件上的,一些奇怪聲音給嚇到過?
我相信,大多數(shù)人都有過這樣的經(jīng)歷。
其實很簡單,就是我們在頁面上點(diǎn)擊某個特定元素,才能喚醒另一個元素的出現(xiàn)。
我錄個動圖,給各位演示一下:
而添加觸發(fā)動畫的方式,也很簡單,當(dāng)我們給一個元素,添加了動畫之后,可以在觸發(fā)選項中,選擇頁面上任何一個元素即可:
利用這個非常非常非?;A(chǔ)的功能,你也能輕松地,做出大疆官網(wǎng)的點(diǎn)擊交互效果:
看起來很贊,對嗎?
那除此之外,這個動畫,在 PPT 設(shè)計中,還有哪些應(yīng)用場景的?
我總結(jié)了3個比較常用的,分別是:
啥意思呢?咱們挨個來說一下。
1.制作動態(tài)交互的圖表
對于 PPT 圖表來講,相信我們都知道。那啥叫動態(tài)交互圖表呢?
翻譯成人話就是,你需要通過點(diǎn)擊,才能看到某些數(shù)據(jù)。
比如說我們舉個例子,當(dāng)我們在工作匯報PPT中,展示數(shù)據(jù)時,可以使用折線圖,把今年的銷售情況給呈現(xiàn)出來。
就像這樣:
但如果,我們想要加上一些與往年數(shù)據(jù)的對比呢?
這時候,有一個按鈕,點(diǎn)擊一下,就可以把想要對比的數(shù)據(jù)展示出來,是不是更好一點(diǎn)呢?
當(dāng)然,你還可以增加2018、2017甚至更多的數(shù)據(jù)
有些讀者可能會問,這跟普通的動畫,有什么區(qū)別呢?
普通的動畫就是,你必須要把頁面上所有內(nèi)容呈現(xiàn)出來,而觸發(fā)動畫則不然,你可以選擇性呈現(xiàn)。
假設(shè)演講時間不多了,那么,有些內(nèi)容就可以選擇不講了,明白了嗎?
再舉個例子,比如我們想要展示全球不同區(qū)域的數(shù)據(jù)情況:
那我們,就可以通過點(diǎn)擊不同的區(qū)域,來呈現(xiàn)對應(yīng)的數(shù)據(jù)信息:
這里的話,有一個小竅門。是什么呢?
我們可以在對應(yīng)的區(qū)域上,隨意的插入一個色塊,然后把它的顏色填充透明度,設(shè)置為100%,無輪廓。
這樣一來,你依舊可以點(diǎn)擊,但是別人也看不到色塊的影子。
2.呈現(xiàn)方案對比
對于做銷售類的讀者們,我覺得太合適了,為啥這么說呢?咱們舉個例子。
比如你要給客戶講一個裝修方案,你可以在一個頁面上,同時展示出好幾套方案,供客戶選擇:
那這個是怎么做的呢?很簡單。咱們先來梳理下動畫的呈現(xiàn)邏輯:
點(diǎn)擊『方案01』:
點(diǎn)擊『方案02』:
點(diǎn)擊『方案03』:
好了,理解這一點(diǎn)之后,這個看似復(fù)雜的動畫,就變得簡單多了。你可以按照下面的動畫進(jìn)行添加:
當(dāng)然,你也可以展示團(tuán)隊的不同成員信息。啥意思呢?舉個例子,就像這樣:
3.微課教學(xué)課件
對于老師們來講,在給學(xué)生講解題目的時候,你可以給不同的選項,或者填空題,添加觸發(fā)動畫。
這樣,當(dāng)學(xué)生回答錯誤的時候,我們可以設(shè)置一個錯誤提示動畫:
反之,則有一個回答正確的效果:
這就是觸發(fā)動畫,在 PPT 設(shè)計中,的一些使用場景,在為這篇文章查資料時,我看到很多的課件中,會特別喜歡使用這個功能,希望能夠?qū)Ω魑挥兴鶐椭?/p>
原標(biāo)題:大疆官網(wǎng)中這個被吹爆的動畫,用PPT也能輕松搞定!
]]>提到 PPT 平滑切換動畫,相信很多讀者都不陌生,最初是 keynote 中的神奇移動,到 PowerPoint 軟件中的平滑切換,好像最近 wps 也更新了這個效果。
總之,這是一個非常棒的切換動畫,在之前的文章中,我曾經(jīng)分享過一些,利用平滑切換做出的案例。
比如像這個:
還有像這個:
我們只需要在連續(xù)的兩張 PPT 上,添加相同的元素,然后輕輕一點(diǎn)『平滑切換』,就可以做出非常贊的動畫效果:
但是,如果你僅僅是這樣,為兩頁相同的元素,去簡單地添加平滑動畫,那你真的是浪費(fèi)了這個功能。
因為對于平滑動畫來講,還有一個玩法,叫做『埋點(diǎn)』。
啥意思呢?啥叫『埋點(diǎn)』呢?
就是在兩頁 PPT 中,我們看不到有任何關(guān)聯(lián)的元素,但依舊能使用平滑切換。
到這里,很多讀者估計會有疑問,既然兩個頁面上,沒有相同的元素,那該如何進(jìn)行平滑切換呢?
答案很簡單,因為其中一個頁面的元素,被隱藏了起來,俗稱『埋點(diǎn)』。
舉個簡單的例子,比如像我前兩天的直播課件中,用到了這樣一個動效:
這個圓圈,是怎么滾動出來的呢?好像在 PPT 軟件中,并沒有這個動畫。
其實很簡單,我只是在上個頁面中,埋了一個點(diǎn),并且對圓形進(jìn)行了一定角度的旋轉(zhuǎn):
所以,當(dāng)我為下一頁,添加平滑切換時,就會是這樣的效果:
這里的圓圈,其實就是『埋點(diǎn)』。明白了嗎?
那,當(dāng)我們理解了這個概念之后,在 PPT 中,什么時候會用到切換埋點(diǎn)呢?
我個人總結(jié)了3個方法,分別是:
簡單來說,就是在上一頁中,我們把元素埋在頁面的外側(cè),等切換到下一頁時,就會產(chǎn)生動效關(guān)聯(lián)。
做個動畫示意,大概就像這樣
而這種切換方式的應(yīng)用場景,簡直太廣闊了,堪稱萬能。
隨便舉個例子,比如說像這兩個頁面,幾乎沒啥關(guān)聯(lián)元素,該如何處理呢?
我們可以在P1頁的左右兩側(cè),添加上5個六邊形,并在下側(cè),添加一個梯形:
這樣一來,頁面上的元素,就已經(jīng)與后一頁,建立起了關(guān)聯(lián)性,加上平滑,咱們看下效果:
而且,使用這種動畫,會比直接給頁面上的元素,添加『飛入效果』更流暢。
啥意思呢?咱們先來看一下,直接添加飛入動畫的效果,3個元素同時到達(dá)終點(diǎn),很生硬:
而如果我們埋點(diǎn)的話,只需要讓埋點(diǎn)的元素,錯位排列。就像這樣:
而我們小學(xué)時,都學(xué)過一個數(shù)學(xué)題,當(dāng)線段長度一樣,如果小球A和小球B,想要同時到達(dá)終點(diǎn),那么,小球B的運(yùn)動速度,就必須要稍微大一點(diǎn):
這樣一來,運(yùn)動的過程,就會顯得更流暢:
為了讓各位理解的更清楚,咱們再來看一個案例,直接上動效:
這里的圖片動畫,其實也是一樣的原理,在上一頁左右兩側(cè),提前放置好圖片元素即可:
再比如像這個頁面的切換動畫:
原理也是一樣的,只是在上一頁左右兩側(cè),各添加了一個圓形而已。
這個會比較容易理解,因為兩頁上的關(guān)聯(lián)元素,只是發(fā)生了尺寸的變化。
簡單來說,就是后一個頁面中,使用了上個頁面中局部的元素。大概就像這樣:
舉個實際的例子,讓大家更容易理解。
比如像昨天,我一位同事分享的設(shè)計復(fù)盤,其中,連續(xù)的兩頁的內(nèi)容,是這樣的:
那么,為了讓頁面的動效更流暢,他把前一頁的圖片放大后,放到了下一頁的頂部:
圖解:黃色線框區(qū)域,為第二個頁面區(qū)域
這樣一來,既避免了第二頁背景單調(diào)的問題,又讓頁面變得更有動感:
我個人非常喜歡,把它用在封面向目錄頁的過渡中。為啥呢?因為只要封面頁和目錄頁,使用了同一張圖片,這個方法就奏效。
舉個例子,比如像之前修改過的 B 站的 PPT 頁面,連續(xù)的兩個頁面是這樣的:
其中,第二頁的背景圖片呢,其實,就是封面圖片的局部放大:
這樣一來呢,只需要簡單地添加平滑效果,頁面的動效,就會變得超贊:
而如果再結(jié)合我們前面的外側(cè)滑入法,那么,頁面的動畫,就會變成這樣:
無可厚非,聽名字就能知道,這里的埋點(diǎn)元素呢,通常發(fā)生了變形,在切換過程中,又完成了復(fù)原。
啥意思呢?我做了個簡單的動畫示意:
那什么時候,會用到這個呢?
比如像這個頁面,為了表現(xiàn)出近大遠(yuǎn)小的透視關(guān)系,元素起始的尺寸會比較小,而滑動到下一頁中,會不斷變大:
為了便于各位理解,咱們可以看下頁面外的一些畫面,從這一頁可以看到,飛機(jī)的初始尺寸,很小:
同樣地,再比如像進(jìn)行產(chǎn)品輪播展示時,也可以很好地使用這個方法。
如果把這個動畫頁面拆解來看,其實會發(fā)現(xiàn),每一頁的左右兩側(cè),都是兩架小飛機(jī):
怎么樣?是不是很簡單?
好了,以上呢,就是平滑切換的一些新用法,操作很簡單,一鍵就可以完成,而底層所利用的原理呢,就是『埋點(diǎn)』。
希望能夠給各位,帶來一些新的啟發(fā)。
原標(biāo)題:3個鮮有人知的PPT動畫騷操作!同事:原來還能這么做?!
]]>為了能做出更好的教程,我也看了不少,國外 Youtube 上的視頻教程。
不得不說,很多教程的案例挺有意思,但有個缺點(diǎn)是,視頻教程的節(jié)奏太慢,明明可以有更簡單的做法。
因此,這篇文章,就來分享兩個 Youtube 上,播放量超百萬的動畫案例,我會用更簡單的方式教大家完成。
廢話不多,現(xiàn)在看看這兩個案例:
第一個:Youtube 播放量最高的PPT教程
第二個:非??犰诺?PPT 視差動畫
好了,廢話不多,直接進(jìn)入正題,它們是怎么制作的呢?
它的原理呢,非常簡單,主要就是兩個方面:
啥意思呢?咱們挨個來解釋一下。
1.多層元素的重疊擺放
各位可以看到,頁面上有4層色塊,并且,每一層色塊上,承載了不同的信息:
最終以層疊的形式,進(jìn)行色塊的擺放:
這里要注意,我們要確保每一層的色塊,和對應(yīng)的內(nèi)容組合在一起。
明白了這一點(diǎn)之后呢,咱們可以先來準(zhǔn)備4個色塊上的內(nèi)容。比如我們想要呈現(xiàn)4個季度的銷售情況:
內(nèi)容準(zhǔn)備完畢之后,我們把它進(jìn)行層疊的擺放:
2.相同長度的路徑運(yùn)動
接下來,我們就需要添加動畫了,這里的動畫呢,非常簡單,就是一個從左到右的直線路徑:
不過,在添加動畫之前,我們需要先來定位一下,色塊的起始位置和最終位置??梢杂靡恍┚€條作為標(biāo)記:
紅色為起始位置
然后,把頁面上的色塊,向右移動到起始位置:
這時候,給每一個色塊去添加直線路徑動畫,使其移動至對應(yīng)的終點(diǎn)位置即可:
好了,到這里了,第一個動畫,就算完成了,怎么樣?夠簡單吧?
這是網(wǎng)頁設(shè)計中,經(jīng)常會用到的一種『視差滾動動畫』。啥意思呢?先來簡單解釋一下。
所謂視差滾動,其實就是一個畫面中的前景元素,和背景元素的運(yùn)動速度不同,所形成的視差。
而關(guān)于前景和遠(yuǎn)景,很好理解,我們拿一張照片來說:
如果我們想做視差動畫,其實,就可以分別調(diào)整前景和遠(yuǎn)景的運(yùn)動速度,使其存在差異:
這里的前景和遠(yuǎn)景是兩個圖層
明白了嗎?
很多國外大神做過相關(guān)的案例,就像這樣:
包括我們之前做過的《霧山五行》的PPT開頭,其實也用到的是這個原理:
這里的云是前景,山脈是遠(yuǎn)景,相信各位能看得出來,二者運(yùn)動的速度,會有差異,對嗎?
那回到剛才的案例中,這里的前景,就是頁面上的4個色塊,而遠(yuǎn)景就是背景:
明白了這一點(diǎn)之后,接下來的,我們就可以動手來將其完成。
同樣,還是先來完成頁面的排版,我們可以先在頁面上,畫出對應(yīng)的色塊位置,一共有5個色塊:
然后,找一張圖片,填充作為背景,這時候,背景是這樣的:
接下來,再次把圖片,填充到底層的色塊中:
對于上層的4個色塊呢,我們同時選中,設(shè)置形狀格式,選擇幻燈片背景填充:
這時候,頁面就變成了這樣,有內(nèi)味兒了,對嗎?
而后,就是添加動畫了,這一步非常簡單。
對于頁面左側(cè)的兩個色塊,我們添加的動畫為:
不過,這里有一個細(xì)節(jié)是,在調(diào)整放大動畫的方向時,是吧,其中一個是垂直放大,另一個是水平:
對于右側(cè)的兩個色塊呢,也是一樣,只是他的動畫組合變成了:
最后,就是給底部的圖片,添加直線路徑+放大動畫。
不過要注意,我們?yōu)榱藸I造視差的感覺,它的運(yùn)動路徑,可以稍微短一些,放大的比例,可以稍微小一點(diǎn):
最后呢,設(shè)置所有的動畫同時播放即可:
以上呢,就是這兩個動畫的拆解制作過程,在技術(shù)操作上,難度不大,但是創(chuàng)意呈現(xiàn),和設(shè)計思維,值得學(xué)習(xí)。
原標(biāo)題:我還原了Youtube上,播放量超百萬的PPT動畫!同事:絕了。
]]>在觀看小米十周年公開演講的時候,發(fā)現(xiàn)一個頁面的動畫效果還挺有意思的,于是臨摹一下。
原稿動畫很靈動,應(yīng)該是用 AE 做成的視頻,再導(dǎo)入到 PPT 中:
下面是我用 PPT 還原的:
另外,還制作了一個深色版的:
效果也還不錯。
這個動畫,看似復(fù)雜,但只要你要明白其中的原理,用 PPT 也能很快搞定!
那么,接下來,就跟各位分享一下這個動畫的制作方法。
動畫主要分為兩個部分,先是手機(jī)觸碰音箱,接著音箱波紋擴(kuò)散。
動畫分為 3 步,從底部旋轉(zhuǎn)出現(xiàn),彈動觸碰音箱,最后旋轉(zhuǎn)消失。
為了各位看的更清楚,這里我放慢了動畫的速度:
同樣的,咱們逐個擊破。
1.旋轉(zhuǎn)位移出現(xiàn)
原理很簡單,就是淡化進(jìn)入+陀螺旋+路徑:
首先是準(zhǔn)備工作,將手機(jī)向逆時針旋轉(zhuǎn) 45°,置于頁面外側(cè),音箱的正下方:
然后,為其添加陀螺旋動畫,時間 1.5 秒:
調(diào)整旋轉(zhuǎn)角度為順時針旋轉(zhuǎn) 45°,并設(shè)置平滑開始及結(jié)束,這樣動畫會更平順:
配合淡化進(jìn)入,看下效果:
接著,再為添加直線路徑動畫,時間同樣為 1.5 秒,讓手機(jī)邊旋轉(zhuǎn)邊移動。
注意調(diào)整路徑動畫的終止位置:
到這兒,手機(jī)的進(jìn)入效果就完成了:
2.彈動觸碰音箱
這個效果非常靈動,通過手機(jī)縮小再回彈,模擬真實觸碰的效果。操作不難,一個動畫即可搞定!
我們直接對手機(jī)添加放大/縮小動畫,持續(xù) 1 秒:
設(shè)置縮小尺寸為 90%,并勾選自動翻轉(zhuǎn),只有這樣手機(jī)才能回彈到原來大?。?/p>
來看下效果:
3.旋轉(zhuǎn)位移消失
它所使用的動畫,與手機(jī)出現(xiàn)效果是一樣的,只需要反向設(shè)置手機(jī)的旋轉(zhuǎn)以及位移的方向即可:
最后,調(diào)整各個動畫化的起始時間,手機(jī)觸碰動畫就完成啦!
?去年的時候,我就講過這個動畫的制作方法。當(dāng)時主要借助了插件,不過操作有些麻煩,而且效果并不是很好,波紋還沒法重復(fù)播放。
這篇文章,我會再跟各位分享一個,升級版的制作方法。做法簡單、效果更好、還能持續(xù)播放!
還是先做準(zhǔn)備工作,這里的波紋,我使用了多色漸變的圓形:
主要為了和音箱以及文字顏色形成呼應(yīng),從而讓頁面更加和諧:
它的制作方法也很簡單,由多個不同漸變角度的圓形重合組成:
將多色波紋組合后,為其添加基本縮放動畫:
在效果選項中設(shè)置動畫重復(fù)播放,直到幻燈片末尾:
得到這樣的效果:
目前動畫還有些生硬,為了解決這個問題,我可以添加淡化退出動畫:
同樣,設(shè)置重復(fù)播放,持續(xù)時間與基本縮放動畫一致。
再來看下效果:
柔和多了,對嗎?
通過復(fù)制、粘貼,得到 4 個擴(kuò)散波紋:
調(diào)整動畫的起始時間,間隔 0.5 秒,讓波紋依次擴(kuò)散:
再將波紋重合:
置于音箱的底部即可:
最后,我們再來看下完整的動畫效果:
對于波紋擴(kuò)散動畫,它應(yīng)用場景還蠻多的,比如手機(jī)廠商經(jīng)常用它來表現(xiàn)音頻傳播:
當(dāng)然,這個使用場景大多數(shù)人都遇不到的。日常工作中,我們可以用它來標(biāo)注地圖頁的位置信息:
?還可以利用它不斷擴(kuò)散的特點(diǎn),表達(dá)對外開放的含義:
甚至是用來展現(xiàn)產(chǎn)品的功能豐富性:
等等......
好了,思維拓展就到這了,以上就是本篇文章的全部內(nèi)容啦。
原標(biāo)題:我用PPT完美復(fù)刻了,小米10周年發(fā)布會中的這個AE動畫!
]]>這篇文章來給大家?guī)砣前l(fā)布會上的運(yùn)動模糊動畫:
初看這個動畫覺得很簡單,但仔細(xì)一看,發(fā)現(xiàn)都是細(xì)節(jié),所以就動手模仿了一下。
接下來,就跟各位講一下這個動畫的具體制作方法。
先是準(zhǔn)備工作,使用圖片助手在三星官網(wǎng),以及素材網(wǎng)站下載相關(guān)的素材。
部分素材可能需要我們進(jìn)行一定的處理:
比如利用在線摳圖網(wǎng)站,把汽車摳出來:
車輪印淡化:
這里呢,我們可以借助 OKPlus 插件的圖片透明功能:
能夠快速的調(diào)整圖片漸變透明:
素材準(zhǔn)備完畢,我們把頁面元素擺好:
注意層級關(guān)系,汽車在頂層,手機(jī)在最底層:
接著,就是動畫效果的添加了。
可能有不少朋友都覺得,這太簡單了,給汽車加個路徑動畫,或者飛出,不就行了。
但其實并非如此,如果你仔細(xì)觀察發(fā)布會的動畫,就會發(fā)現(xiàn),汽車在移動的過程中是有虛影的,給人的感覺,汽車好像跑的很快,很真實:
如果直接給汽車添加路徑動畫,汽車在移動中虛影并不是很強(qiáng)烈,沒有拖拽感,看起來就很:
那么,該怎么解決呢?
我的方法是,在 PS 中,事先把汽車動感模糊一下:
這樣汽車在運(yùn)動的時候,虛影就很明顯了:
將汽車動態(tài)模糊,操作不難,用 Ps 打開汽車圖片,在濾鏡中找到動感模糊:
角度為 0 度,距離視情況而定,數(shù)值越大模糊程度越大:
將模糊后的圖片,導(dǎo)入到 PPT 中與原圖重合:
設(shè)置動畫起始的那一刻,原圖消失,模糊汽車出現(xiàn)并向左側(cè)移動:
沒看清?來看下慢動作:
最后,再來看下最終的效果:
好了,以上呢,就是我在模仿這份動畫作品時的思路,以及制作流程。
可以看出,我借助了很多工具以及插件,大家平時在制作 PPT 時候,也可以有意識的使用一些工具,這樣才能在短時間內(nèi),做出更好的效果。
老規(guī)矩,評論區(qū)評論任意文字,即可免費(fèi)無套路領(lǐng)取本文案例源文件。
原標(biāo)題:三星發(fā)布會PPT中的這個動畫效果,沒有哪個男生不愛吧?
]]>在PPT設(shè)計中,圖表應(yīng)該是比較常用的一種元素,相較于密密麻麻的數(shù)字來說,圖表能夠更加直觀的展示出數(shù)據(jù)之間的含義。
比如可以是用來表達(dá)數(shù)據(jù)的變化趨勢:
也可以是表達(dá)數(shù)據(jù)之間的包含關(guān)系:
當(dāng)然,還有一些復(fù)雜的組合圖表,可能它的含義會更加廣泛:
不過,在 PowerPoint 軟件中,雖然我們可以很輕松地創(chuàng)建出一份數(shù)據(jù)圖表:
但是,想要更好的使用圖表來輔佐數(shù)據(jù)表達(dá),其實有很多細(xì)節(jié)需要注意,而大多數(shù)人可能并不注意。所以,這篇文章,就來好好地跟各位分享一下,都有哪些圖表設(shè)計細(xì)節(jié)值得注意呢?
咱們分兩個方面來說。
關(guān)于圖表的標(biāo)題,可能大多數(shù)人的做法,會寫成非常寬泛的標(biāo)題,比如像:
這樣做的問題就在于,我們很難在一瞬間了解圖表到底在表達(dá)什么內(nèi)容,因為標(biāo)題含義不明確。
但是如果我們改成一個非常具體的標(biāo)題呢?比如像這樣:
2019年市場銷售增長放緩,多產(chǎn)品出現(xiàn)停滯不前。
或者是這樣,把寬泛的<上半年工作情況>修改為具體的<2019年上半年工作計劃已超額完成,部分指標(biāo)打破以往記錄>,是不是更容易理解呢?
這就是一個很簡單的細(xì)節(jié),使用具體的,而不是寬泛的標(biāo)題,圖表的含義是不是立馬就清晰很多呢?
而這樣的寫法,也正好符合論點(diǎn)+論據(jù)的表達(dá)方式,可以讓圖表更具說服力:
在去講解這個點(diǎn)時,先來給大家做個小測試:當(dāng)我們看到下面這個圖表時,你覺得它在表達(dá)什么含義呢?可能是4月份后,銷量開始回升,也可能是其它的,對嗎?
但是如果我告訴你,它其實想要表達(dá)的,根本不是銷售數(shù)據(jù),而是經(jīng)歷了4月初的銷售培訓(xùn),產(chǎn)品銷量才出現(xiàn)上升狀態(tài),它著重想要體現(xiàn)的,是強(qiáng)調(diào)4月初的銷售培訓(xùn):
所以,看到了嗎?為了準(zhǔn)確地體現(xiàn)出圖表重點(diǎn),我們可以適當(dāng)?shù)靥砑酉鄳?yīng)標(biāo)注。同樣地,還有像這個例子:
那么,還有哪些方法,可以很好的突出圖表數(shù)據(jù)重點(diǎn)呢?
1.添加輔助線
這一點(diǎn)主要針對于柱狀圖和折線圖,比如當(dāng)我們想要呈現(xiàn)兩個不同時期的數(shù)據(jù)變化時,添加輔助線可以更直觀地體現(xiàn)出其中的變化。
比如像這個圖表,為了體現(xiàn)出 4 年間產(chǎn)品性能有很大提升,我們可以添加兩條輔助線,并使用箭頭標(biāo)注出性能提升的百分比:
同樣地,還有像這個圖表,也是在兩條折線之間,插入了一個向上的見圖,表現(xiàn)出上升的比例:
再比如,在呈現(xiàn)折線圖的時候,如果我們只是想要重點(diǎn)呈現(xiàn)其中一段的數(shù)據(jù),也可以添加一條直線進(jìn)行截斷,并對其余部分進(jìn)行壓暗處理。
比如像這個頁面,完整的折線圖是這樣的:
如果我們只是想體現(xiàn)初前 15 天的增量,可以這樣做:
同樣地,還有像這個例子,也是一樣的,可以很好地體現(xiàn)出從某個具體的節(jié)點(diǎn)后發(fā)生的變化:
2.添加指向符號
當(dāng)我們在呈現(xiàn)一些具體數(shù)字時,為了更加直觀地呈現(xiàn)其變化趨勢,我們可以使用一些指向符號,來表現(xiàn)出其相應(yīng)的趨勢。
什么意思呢?比如說像這個例子,為了體現(xiàn)出已達(dá)到 11 億,我們可以使用向上的三角符號:
再比如像這個,為了體現(xiàn)其不斷下降的趨勢,我們可以反過來,使用倒三角符號:
當(dāng)然,除此之外,我們還可以使用其它符號,比如像加號,減號,或者是箭頭等:
3.添加動畫
當(dāng)一個圖表中的數(shù)據(jù)量較大時,尤其是有多個數(shù)據(jù)系列共同存在時,就像這樣:
如果我們想要對其中某個系列的數(shù)據(jù)進(jìn)行著重講解,估計大多數(shù)人都看不到重點(diǎn)。而這時候,我們可以利用動畫,把其余線條變暗,就像這樣:
重點(diǎn)是不是能夠立馬被凸顯出來呢?
好了,以上就是在設(shè)計圖表時,其中的一些細(xì)節(jié)處理,希望大家能夠注意。
原標(biāo)題:PPT中的圖表設(shè)計,這些不為人知的細(xì)節(jié)處理,你知道嗎?
]]>看名字也知道,這個動畫的意思就是背景發(fā)生位置變換,如果你能掌握這個動畫,那么,你就可以做出類似電影鏡頭推動的感覺。
什么意思呢?咱們看一個例子。
從全景畫面到車窗內(nèi)的畫面,是不是有一種鏡頭遠(yuǎn)近的縮放感?
再比如,像下面這個例子,主要是講 VR 游戲的 PPT 頁面:
大家可以看到,背景的游戲畫面有一些位置變化,那么,這個是怎么做出來的呢?
咱們先來了解一下動畫的原理,通過分析,我們發(fā)現(xiàn),它的背景變化,主要體現(xiàn)在兩點(diǎn):
應(yīng)的PPT動畫效果是這樣的:
所以,我們選中背景圖片后,添加上這兩個動畫,并且將其設(shè)置為同時播放即可:
當(dāng)我們進(jìn)行PPT圖文排版,如果同一頁上出現(xiàn)了多段內(nèi)容,為了讓觀眾跟隨演講人節(jié)奏,我們可以讓內(nèi)容逐段呈現(xiàn)。
而圖文切換動畫,正好可以解決這一點(diǎn)。
什么意思呢?咱們來看一個案例,主要介紹了3個不同的景點(diǎn):
那這個是怎么實現(xiàn)的呢?很簡單,分為3個步驟。
咱們依舊是先來了解一下它的原理,首先是圖文同時出現(xiàn),并且移動至相應(yīng)的位置,最后,圖文消失的同時,下一段圖文內(nèi)容再循環(huán)出現(xiàn):
所以,理解了這一點(diǎn)后,咱們?yōu)槠涮砑由舷鄳?yīng)的動畫效果即可:
這是一個很實用的動畫,當(dāng)我們在設(shè)計PPT的時候,如果想要呈現(xiàn)出四周的元素,圍繞著中心內(nèi)容旋轉(zhuǎn)。
大概像這樣:
如果在實際的 PPT 中呈現(xiàn),效果可能是這樣:
旋轉(zhuǎn)速度不要太快,否則觀眾會看不清楚
那么,如何才能實現(xiàn)周圍的四個圓圈,圍繞著中心進(jìn)行360度旋轉(zhuǎn)呢?
很簡單,大概是這樣的,只需要一步即可完成。
那就是先把外側(cè)的內(nèi)容組合,接下來后添加陀螺旋動畫即可:
如果想要讓外側(cè)元素一直旋轉(zhuǎn),就把動畫設(shè)置為重復(fù)即可:
這里提醒一點(diǎn),千萬不要使用PowerPoint軟件自帶的圓形路徑動畫,因為會卡頓到讓你懷疑人生。
簡單來說,這就是讓同一個元素,在頁面上兩個不同位置進(jìn)行變化。
用一個圖示關(guān)系呈現(xiàn),大概就是這樣的:
這是個很實用的動畫,為了方便各位理解,咱們看一個實際案例,汽車從遠(yuǎn)到近,尺寸也從小到大:
那它是怎么實現(xiàn)的呢?很簡單,依舊是先來了解下動畫的原理。
這個頁面上要有兩個汽車,一個較小,一個較大,然后,它們需要經(jīng)歷的動作分別是,先出現(xiàn),并且在逐漸放大的同時,發(fā)生位置移動:
另外,有一點(diǎn)需要提醒,那就是需要為小車添加一個消失動畫,因為這樣可以避免兩個車的位置重復(fù):
如果我們在PPT中插入了形狀,那么為了讓形狀的邊框,更有質(zhì)感,可以考慮使用這個動畫。
它呈現(xiàn)出來的效果是什么樣的呢?給大家看一個案例。
那它是怎么實現(xiàn)了呢?這里分為兩個步驟。
首先,依舊是光效素材先出現(xiàn),同時讓光效沿著某條線發(fā)生平移:
添加上相應(yīng)的動畫效果,大概是這樣:
非常簡單,也很實用。
以上呢,就是今天要跟各位分享的,幾個實用的PPT動畫,希望對各位有所啟發(fā)。
原標(biāo)題:不得不說,這些PPT動畫也太酷了吧!手把手教你搞定。
]]>之前,有位讀者在微信上問我這樣一個問題,她想知道下面這個水平面波動上漲的動畫,是怎么實現(xiàn)的?
不到 10 分鐘,我就用 PPT 復(fù)刻了這個動畫,效果如下:
其實呢,這個動畫的原理十分簡單,只需波浪形狀外加路徑動畫即可實現(xiàn)。
什么意思?可能有些同學(xué),還沒弄太明白。沒關(guān)系,看完下面兩張圖,你就完全搞清楚了!
這張圖是波浪形狀在 PPT 界面中初始位置:
下面這張是給形狀添加了向左上方移動的路徑動畫:
理解了嘛?其實就是通過波浪形狀的移動,從而產(chǎn)生了水平面上漲的錯覺!
可能又有些同學(xué)會問,路徑動畫好說,這個波浪形狀該怎么畫???
這就牽扯到 PPT 中的一個少有人知的形狀工具,叫做曲線。
為了讓你更容易掌握曲線工具的使用技巧,我特意錄制了一波操作動圖。
技巧一:通過點(diǎn)擊鼠標(biāo),確定曲線的頂點(diǎn),雙擊結(jié)束繪制
技巧二:同側(cè)頂點(diǎn)相距越大,曲線的弧度就越平坦,反之則陡峭
技巧三:點(diǎn)擊起始頂點(diǎn),可構(gòu)成封閉的形狀
技巧四:右鍵編輯頂點(diǎn),可對曲線弧度二次調(diào)整
看到這兒,相信你一定學(xué)會了,波浪形狀的繪制方法。再回過頭來,看一下文章開頭的動畫,是不是覺得簡單多了?
既然學(xué)會了曲線工具的使用方法,如果只是拿來做波浪動畫,就顯得有些大材小用了。考慮到這一點(diǎn),接下來我再跟各位分享 3 個非常實用的,曲線工具應(yīng)用場景。
1.繪制時間軸線
對于時間軸頁,相信大多數(shù)人還停留在,“一根直線走天下”的層面上。而使用曲線,則能夠讓版面看起來更具跳躍感,就像這樣:
作者:肖志乾
為了方便你更好理解這一點(diǎn),這里我再多列舉幾個,曲線在時間軸頁中應(yīng)用的案例。
比如,只是使用一根曲線:
或者兩根曲線交錯排布:
如果覺得頁面不夠豐富,那就再添一根:
當(dāng)然,除了單純的曲線,用曲線工具繪制的波浪形狀作為時間軸,效果也很不錯。
我們還可以給形狀加上路徑動畫,再來看下動態(tài)效果:
是不是很贊呢?
2.表現(xiàn)某種趨勢
通過控制曲線波浪的起伏,來表現(xiàn)某種事物的發(fā)展趨勢,從而讓觀眾看起來更加的直觀,是一種很常用的頁面可視化手法!
舉一個簡單的例子,比如下面這張圖,是有關(guān)于產(chǎn)品生命周期的介紹。都是文字,很難在短時間內(nèi),看出產(chǎn)品在各個周期的具體情況。
這個時候,我們就可以根據(jù)文字內(nèi)容,繪制一條曲線來表現(xiàn)產(chǎn)品發(fā)展趨勢:
現(xiàn)在看起來,是不是清晰多了?
再來看個案例,比如小米手機(jī)的這頁 PPT,利用曲線來表現(xiàn)芯片迭代的性能增幅。同時通過加大曲線的陡峭程度,來襯托最新一代芯片的性能。
同樣的,用曲線來表現(xiàn)電腦性能的增幅也是一樣的道理。
另外,用曲線來表現(xiàn)單個數(shù)據(jù)的發(fā)展趨勢也很有創(chuàng)意。因為在通常情況下,會使用三角形或者箭頭來表現(xiàn)數(shù)據(jù)的增長或者是下跌:
不得不說,這種表現(xiàn)手法太常見了。而使用曲線來表現(xiàn)數(shù)據(jù)的發(fā)展趨勢,則可以讓人耳目一新:
3.豐富頁面內(nèi)容
除了上面所說的兩點(diǎn),曲線還能夠起到豐富版面的作用,避免頁面單調(diào)。
比如下面這套騰訊云的 PPT,就通過虛實、粗細(xì)、顏色混搭的曲線,進(jìn)而達(dá)到豐富頁面內(nèi)容的目的:
再跟各位舉一個例子,這一頁想要展示下年工作目標(biāo):
只有 4 個圈加文字,看起來很單調(diào),對嗎?而我們加上曲線,讓 4 個圈串聯(lián)起來,頁面就會變得大不一樣:
好了,以上呢,就是有關(guān)于曲線工具的 4 個使用技巧。
最后,再給各位推薦一個曲線生成網(wǎng)站 ——?getwaves.io
該網(wǎng)站能夠隨機(jī)生成波浪圖形,支持下載 SVG 格式的矢量圖形,可直接導(dǎo)入到 PPT 中編輯。如果你不擅長繪制曲線,不妨去這個網(wǎng)站試一試!
另外,再送給大家一個小福利,開頭的波浪動畫免費(fèi)送給你!
好了,就這么多
原標(biāo)題:這個基礎(chǔ)的PPT形狀,原來還可以這么用!太有創(chuàng)意了。
]]>
原標(biāo)題:那個超炫酷的小鹿茶PPT動畫,到底是怎么做出來的?
]]>前天寫了一篇PPT修改的文章,里面用到了一些圖片墻動畫效果的呈現(xiàn),很多讀者問我這是怎么做的:?
鑒于提問的人數(shù)有點(diǎn)多,所以,索性就直接寫一篇文章吧,這樣說的更清楚一點(diǎn)。?
?
然后呢,為了讓圖片的出場順序更加流暢自然,我們可以調(diào)整動畫的延遲時間:??
其次是這個,有放大后并縮小的效果:?
最后呢,也是一樣,要添加動畫的延遲效果,時間也盡量不要固定。只有這樣,動畫的呈現(xiàn)效果,才是最完美的:??
明白了嗎?這就是一些非常簡單,但是很實用的動畫知識點(diǎn),希望對各位有所幫助。
好了,以上就是這篇文章的全部內(nèi)容,那通過這篇文章呢,希望大家能夠掌握三個點(diǎn):?
一是當(dāng)表現(xiàn)『多』這一概念時,可以考慮使用圖片墻或文字云的形式。 二是直線型動畫的完整路徑。 三是放大縮小型動畫的完整路徑。
有沒有一種,在與宇宙中穿梭的感覺?
如果想要全屏展示,肯定會被裁剪。但是,為它們添加路徑動畫后,就能呈現(xiàn)出這樣的效果: