PPT動(dòng)畫的神秘暗箱—?jiǎng)赢嬚谡?/h1>

01 動(dòng)畫聚焦

我們用上一期所教的時(shí)間縮放

來嘗試解析這個(gè)動(dòng)畫效果

細(xì)節(jié)清晰很多

我們可以看見所有的元素以白線為軸

憑空出現(xiàn)繼而迅速消失

這就是這段動(dòng)畫暗箱的精彩神秘所在

我們來看看把遮罩去掉后的這段動(dòng)畫

是不是有一種恍然大明白的感覺

個(gè)中的差異不過是在白線以下添加了一個(gè)

和背景同色的矩形遮罩

實(shí)現(xiàn)了視覺欺騙!

02 動(dòng)畫延伸

我們來繼續(xù)深入感受動(dòng)畫遮罩的應(yīng)用

-01 地球旋轉(zhuǎn)-

地球旋轉(zhuǎn)是非常經(jīng)典的PPT動(dòng)畫

在“平滑切換”功能還沒有更新之前

幾乎是無法想象球體旋轉(zhuǎn)動(dòng)畫的實(shí)現(xiàn)

但可以很肯定的說

上面呈現(xiàn)的這個(gè)動(dòng)畫非常簡(jiǎn)單

接下來我們來拆解一下地球旋轉(zhuǎn)動(dòng)畫

【一共5個(gè)元素】

1.藍(lán)色背景-用作底色

2.白色遮罩—通過矩形和圓形布爾運(yùn)算減除得到

3.圓形質(zhì)感—讓平面呈現(xiàn)球體的質(zhì)感效果

4.陰影—增添豐富細(xì)節(jié)

5.世界地圖—?jiǎng)赢嬛黧w

而其中只設(shè)置了一個(gè)動(dòng)畫

“元素5—世界地圖”的直線路徑動(dòng)畫

通過設(shè)置動(dòng)畫重復(fù)來達(dá)到周而復(fù)始的效果

拆解動(dòng)畫后大致就是如下效果

-02 頁面加載-

我們改變一下畫面的底色

減少一下遮罩的范圍以此來拆解這個(gè)動(dòng)畫

本質(zhì)上和地球旋轉(zhuǎn)動(dòng)畫并無不同

就是波浪形狀的路徑動(dòng)畫而已

有道是無心插柳柳成蔭

大家看上面這個(gè)拆解動(dòng)畫有聯(lián)想到什么嗎

是不是很像洗衣機(jī)

于是我稍微給這個(gè)頁面添加了一些細(xì)節(jié)

把這個(gè)加載動(dòng)畫改成了洗衣機(jī)動(dòng)畫

03 思考延伸

動(dòng)畫遮罩就是通過遮掩部分畫面

實(shí)現(xiàn)動(dòng)畫的暗箱

實(shí)際上動(dòng)畫遮罩并不止局限于

大面積的色塊遮罩

也有動(dòng)畫對(duì)象本身的遮罩

譬如在作品《演示改變世界》中

所有矩形從四面八方聚向中心時(shí)

是60個(gè)不同路徑的動(dòng)畫效果

在之后的輪盤動(dòng)畫中

讓60個(gè)小矩形進(jìn)行陀螺旋動(dòng)畫非常麻煩

我們就用組合后的矩形圓環(huán)

對(duì)之前的60個(gè)小矩形進(jìn)行遮罩替換

這樣只需要添加一個(gè)動(dòng)畫即可