打開微博,刷到一條優(yōu)設(shè)哥發(fā)的新浪微博: 點(diǎn)開GIF圖看了下,然后又自己點(diǎn)了個(gè)贊試了下,的確是簡單好看,感覺可以非常簡便的用PPT模仿粗來,就忍不住跑來寫教程了……GIF效果如下: 其實(shí)寫到這里我自己都還沒動(dòng)手做呢,只是在腦子里過了一遍大概需要的步驟——這是個(gè)值得推薦大家學(xué)習(xí)的好習(xí)慣(陳老師好習(xí)慣不多,都是精華),看到一種平面或動(dòng)畫效果,如果感覺可以在PPT里借鑒,就可以先逆向思考下,要做出這樣的效果大概可能需要些什么步驟,這樣才能得到提高。 如果你只是看了心里感嘆一下:真酷!真好看!那這個(gè)效果永遠(yuǎn)不是你的。 要做出這個(gè)效果,首先需要準(zhǔn)備原材料:點(diǎn)贊的大拇指圖標(biāo)。因?yàn)楹竺嫘枰念伾?,所以圖片是不行的,必須要是矢量元素或者形狀。 當(dāng)然,你可以用任意多邊形自己畫,但如果有AI的話,可以直接到“阿里巴巴矢量素材庫”去下載一個(gè)AI素材,這樣更快一下。 打開阿里巴巴,搜索點(diǎn)贊: 在結(jié)果頁瀏覽了一下,感覺這個(gè)贊和新浪微博的贊比較像: 下載AI素材: 將素材在AI打開后拖動(dòng)到PPT頁面,兩次解除組合轉(zhuǎn)換為形狀,點(diǎn)贊的大拇指就準(zhǔn)備好了: 由于需要變換顏色,所以我們需要一個(gè)變色后的點(diǎn)贊效果,將大拇指復(fù)制一份,填充色改為紅色,然后利用矩形和任意多邊形沿拇指邊緣分別勾出兩個(gè)色塊置于底層,填充顏色,得到變色后的大拇指(這些顏色均可以截原圖取色),原大拇指也用矩形和多邊形鋪底,填充白色: 將變色后的拇指及底部填色編為一組,元素就只差點(diǎn)贊后拇指頂部的三條線了。因?yàn)槿龡l線的位置要看點(diǎn)贊后運(yùn)動(dòng)的拇指頂端而定,所以最后再做,先做動(dòng)畫。 再看一遍GIF: 這個(gè)動(dòng)畫貌似包含了三個(gè)單獨(dú)效果: 1、放大縮?。?/span> 2、上移下移; 3、蹺蹺板。 三者綜合起來才有了最終的效果…… 對(duì)于動(dòng)畫渣的小白來說,好像很麻煩?。≌娴哪敲磸?fù)雜嗎? 陳老師這么懶的人,都說了今天很忙了,如果真這么復(fù)雜我還會(huì)寫教程?所以說,年輕人就是圖樣圖森破,桑蠶絲拿衣服! 其實(shí)這個(gè)動(dòng)畫是可以 偷懶的?。?/span> 要想偷懶,你必須要具備兩個(gè)素質(zhì):1、熟悉PPT的原生功能;2、熟悉插件。 只要你熟悉了PPT的原生功能,你就會(huì)知道,PPT的動(dòng)畫效果中,“強(qiáng)調(diào)”一類動(dòng)畫效果,有很多都只是針對(duì)文本的: 為什么后面那些動(dòng)畫是灰色不可選?因?yàn)槲椰F(xiàn)在選中的是一個(gè)形狀。如果我選中的是一個(gè)文本框,效果就不一樣了: 看到最后的“波浪形”了嗎,要不試試看它是個(gè)什么效果? 怎么樣?是不是和剛才的點(diǎn)贊動(dòng)畫感覺很像呢?就差一個(gè)大小變化了。這還不簡單,添加一個(gè)放大動(dòng)畫,并勾選“自動(dòng)翻轉(zhuǎn)”,將“動(dòng)畫文本”改為“整批發(fā)送”: 將動(dòng)畫設(shè)置為“從上一項(xiàng)開始”,并把時(shí)間設(shè)置為0.25。這里需要注意,因?yàn)槲覀児催x了自動(dòng)翻轉(zhuǎn),放大后還要縮小還原,所以時(shí)間會(huì)自動(dòng)翻倍,波浪形動(dòng)畫的時(shí)間是0.5,這個(gè)動(dòng)畫就只能設(shè)置0.25了,翻倍后剛好和0.5一樣長: 現(xiàn)在再看一下效果,WOW~贊?。?/span> 我知道很多人都有疑惑——等下,陳老師!你剛才不是才說了,這個(gè)動(dòng)畫只能針對(duì)文本嗎?我們的點(diǎn)贊手勢(shì)是圖形啊,選中它根本沒法使用這個(gè)動(dòng)畫效果嘛! 呵呵,別忘了,剛才我說了,你還得具備的第二個(gè)素質(zhì):熟悉插件。 在OK插件工具欄最右下角有一個(gè)“口袋動(dòng)畫”的按鈕,很多人可能以為那是一個(gè)友情鏈接,并沒有什么實(shí)際的功能: 你錯(cuò)了。這里有一個(gè)很強(qiáng)大的口袋動(dòng)畫(PA插件)的功能被內(nèi)置到了OK里,也就是說即便你沒有安裝口袋動(dòng)畫,也可以在OK插件里使用它。這個(gè)功能就是“圖形逐幀”: 圖形逐幀功能可以將形狀轉(zhuǎn)變?yōu)槲谋?,從而利用文本?dòng)畫的很多獨(dú)有的特性做出很多原本無法做到的效果,比如一條魚在擺著尾巴游動(dòng)的動(dòng)畫……(時(shí)間緊迫,我就不去找那個(gè)素材了,銳普論壇里放過,是哪位大神的作品我忘了) 選中我們的點(diǎn)贊手勢(shì),點(diǎn)擊“圖形逐幀”,提示需要手動(dòng)修改一些參數(shù),如果在口袋動(dòng)畫里設(shè)置,就可以一步完成。其實(shí)做我們這個(gè)動(dòng)畫好像并沒有太大影響,點(diǎn)擊“確定”: 此時(shí)在PPT頁面的左上方就會(huì)生成一個(gè)文本框格式的點(diǎn)贊圖形了,好像看起來并沒有什么變化,但你可以把鼠標(biāo)點(diǎn)到它身上試試…… 看到了嗎?這是文本框!!有沒有很神奇? 好了,把剛才我們做到“陳老師好帥!”上的動(dòng)畫用動(dòng)畫刷直接刷給這個(gè)大拇指: 效果就粗來了: 帥爆了有木有? 接下來要做三條線的效果,平面上比較容易畫,只需強(qiáng)調(diào)一點(diǎn)就是把端點(diǎn)改為圓形: 動(dòng)畫方面,擦除就好,一次進(jìn)入動(dòng)畫的擦除,一次退出動(dòng)畫的擦除,退出動(dòng)畫設(shè)置為緊跟進(jìn)入動(dòng)畫可能效果不夠緊湊,不妨設(shè)置為與上一動(dòng)畫同時(shí),然后通過調(diào)節(jié)延遲時(shí)間來推后一點(diǎn),讓二者更加連貫。 完成之后的效果及動(dòng)畫方案如下: 把未填色的大拇指疊放在填色大拇指的上層,將其擋住,設(shè)置動(dòng)畫“消失”,設(shè)置觸發(fā)器為點(diǎn)擊自己(組合31即白色大拇指): 最后一步,把前面的動(dòng)畫都拖到觸發(fā)器動(dòng)畫下方,然后單獨(dú)選中文本框動(dòng)畫,將其改為“自上一項(xiàng)之后”: 好了,看效果吧: 教了你們半天點(diǎn)贊效果,陳老師的苦心你們可懂????哈哈哈哈哈……都自覺點(diǎn)??!快去! |
|