之前的案例中使用過(guò)時(shí)間軸制作動(dòng)畫(huà)效果喘落，其實(shí)在ivx中還有一個(gè)滑動(dòng)時(shí)間軸組件荒叼，它必須添加在畫(huà)布組件下方妖，雖然也是通過(guò)給組件添加軌跡實(shí)現(xiàn)播放效果荤崇，不過(guò)根據(jù)名字比較容易理解它是通過(guò)滑動(dòng)來(lái)觸發(fā)播放的拌屏，而且可以選擇正向播放的滑動(dòng)方向。今天我們就使用滑動(dòng)時(shí)間軸和遮罩實(shí)現(xiàn)一個(gè)簡(jiǎn)單的動(dòng)畫(huà)效果天试。
1.首先我們?cè)诋?huà)布下添加一個(gè)滑動(dòng)時(shí)間軸槐壳，高度和寬度與畫(huà)布一致，然后添加圖片素材喜每，左側(cè)的天氣圖標(biāo)統(tǒng)一都是寬度200务唐，高度200，坐標(biāo)(0,0)带兜，右側(cè)的溫度圖片統(tǒng)一都是寬度200枫笛，高度100，坐標(biāo)(200,40)刚照⌒糖桑可以看到它們現(xiàn)在是堆疊在一起的，我們可以先只令一對(duì)圖片顯示看一下顯示效果无畔。
2.第二步我們添加四個(gè)矩形作為四種個(gè)天氣的背景顏色板啊楚，矩形的寬度和高度與滑動(dòng)時(shí)間軸的大小一致，坐標(biāo)(0,0)即可浑彰。下面是單獨(dú)顯示的效果恭理。
3.動(dòng)畫(huà)設(shè)計(jì)思路
第三步就是制作遮罩的效果，這也是我們這個(gè)動(dòng)畫(huà)效果的核心部分郭变。我們可以先將顯示范圍擴(kuò)大一些颜价，給四個(gè)矩形設(shè)置不同的顏色，然后X坐標(biāo)增加一些偏移以便觀察诉濒。
案例中的素材可以分成四套周伦，以遮罩矩形_晴天、1_晴天未荒、晴天和背景_晴天這一套為例专挪，1_晴天、晴天和背景_晴天三個(gè)組件的遮罩對(duì)象都是遮罩矩形_晴天茄猫，所以只有通過(guò)遮罩矩形_晴天的區(qū)域我們才可以看到1_晴天狈蚤、晴天和背景_晴天，而且由于其他3套素材的遮罩對(duì)象為對(duì)應(yīng)的其他遮罩矩形划纽，在遮罩矩形_晴天的區(qū)域內(nèi)也就都不可見(jiàn)了脆侮。
于是我們要做的就是將所有的天氣圖標(biāo)向下移動(dòng)，同時(shí)讓遮罩矩形和溫度圖片依次向上移動(dòng)勇劣，使天氣圖標(biāo)和溫度能在對(duì)應(yīng)的遮罩矩形下顯示出來(lái)靖避。
4.天氣圖標(biāo)的軌跡
滑動(dòng)時(shí)間軸的時(shí)長(zhǎng)為3秒潭枣，0秒時(shí)刻為初始狀態(tài)，第1幻捏，2盆犁，3秒時(shí)刻對(duì)應(yīng)之后的3個(gè)顯示狀態(tài)，計(jì)算可得天氣圖標(biāo)每次向下移動(dòng)200px即可篡九。不過(guò)要注意在移動(dòng)過(guò)程中遮罩矩形之間是有重疊的谐岁，會(huì)導(dǎo)致一定程度的遮擋，為了避免這種情況的影響榛臼，我們?nèi)缦聢D所示設(shè)置每個(gè)天氣圖標(biāo)的顯示時(shí)間段伊佃，這樣每當(dāng)顯示當(dāng)前天氣圖標(biāo)時(shí)上一天氣圖標(biāo)就已經(jīng)隱藏了。
5.遮罩矩形和溫度圖片的軌跡
接下來(lái)是溫度圖片和遮罩矩形的軌跡沛善，除了1_晴天和遮罩矩形_晴天一直位于最上端不需要添加軌跡航揉，其余3套素材的運(yùn)動(dòng)狀態(tài)是相同的，都是從下向上依次移動(dòng)200px金刁，不過(guò)要注意它們開(kāi)始移動(dòng)的起始時(shí)間點(diǎn)是不同的帅涂，我們需要在起始時(shí)間點(diǎn)加上一個(gè)關(guān)鍵幀，該幀的位置與初始狀態(tài)一致尤蛮，這樣對(duì)應(yīng)的溫度圖片和遮罩矩形才會(huì)在滑動(dòng)時(shí)間軸運(yùn)行到此時(shí)間點(diǎn)再開(kāi)始向上移動(dòng)媳友。
6.時(shí)間標(biāo)記
最后就是給第1秒和第2秒兩個(gè)時(shí)間點(diǎn)分別加上一個(gè)時(shí)間標(biāo)記，并且將時(shí)間標(biāo)記設(shè)置為暫停點(diǎn)产捞，觸發(fā)方向選擇雙向庆锦，這樣滑動(dòng)時(shí)間軸無(wú)論是正向播放還是反向播放到此處都會(huì)暫停。至此轧葛，整個(gè)動(dòng)畫(huà)的制作就完成了。
總結(jié)
滑動(dòng)時(shí)間軸與時(shí)間軸的區(qū)別還是比較容易理解的艇搀，本案例的難點(diǎn)還是在于軌跡的和遮罩關(guān)系的設(shè)置尿扯，建議是先理清組件的運(yùn)動(dòng)過(guò)程，確認(rèn)好軌跡移動(dòng)流程沒(méi)有問(wèn)題后再添加遮罩對(duì)象焰雕。
