使用Photoshop構(gòu)建動(dòng)態(tài)演示GIF動(dòng)畫(huà)(2)

步驟11

在形狀上方畫(huà)一個(gè)白色圓角矩形，我們會(huì)在這個(gè)區(qū)域放置圖像。

設(shè)置圖層樣式內(nèi)發(fā)光。(圖層樣式若不滿意可不設(shè)置)

步驟12

添加圖像，然后創(chuàng)建剪貼蒙版.

然后添加文本圖層，利用尺寸，顏色，粗細(xì)，來(lái)營(yíng)造清晰的閱讀層級(jí)。

最后添加幾個(gè)按鈕圖標(biāo)。

步驟13

其他幾個(gè)矩形同理

步驟14

先把主要區(qū)域的矩形圖層全部隱藏，然后構(gòu)建一個(gè)較大的矩形區(qū)域，這將應(yīng)用到選擇具體卡片后的細(xì)節(jié)界面。

做完后，此圖層組不透明度設(shè)置為0%

觸控點(diǎn)

步驟1

創(chuàng)建新圖層，命名為”Tap”，畫(huà)一個(gè)白色形狀，不透明度70%

步驟2

復(fù)制這個(gè)圓形，擴(kuò)大，去掉填充，描邊設(shè)置為3pt白色

繼續(xù)復(fù)制，擴(kuò)大，描邊2pt

完事后居中對(duì)齊

隱藏tap圖層組，因?yàn)閯偧虞d完界面是不會(huì)顯示觸控點(diǎn)的，但是當(dāng)選擇元素產(chǎn)生轉(zhuǎn)場(chǎng)時(shí)會(huì)出現(xiàn)。

滾動(dòng)效果

步驟1

現(xiàn)在，終于開(kāi)始做UI動(dòng)態(tài)演示效果了，打開(kāi)時(shí)間軸面板，創(chuàng)建幀動(dòng)畫(huà)

按下圖那個(gè)紅色劃線按鈕，創(chuàng)建新幀

步驟2

顯示Tap圖層組，隱藏兩個(gè)描邊圓，用來(lái)代表滾動(dòng)手勢(shì)。當(dāng)開(kāi)始滾動(dòng)時(shí)，兩個(gè)描邊圈也出現(xiàn)，漣漪效果能夠突出滾動(dòng)手勢(shì)。

步驟3

第一幀1s，第二幀開(kāi)始幀延遲設(shè)置為0.2s

步驟4

添加幀

步驟5

顯示Tap圖層組所有突出。使用移動(dòng)工具，來(lái)上移Tap圖層組和主要內(nèi)容圖層組

步驟6

為了讓滾動(dòng)效果更流暢，選中當(dāng)前幀和前一幀，點(diǎn)擊時(shí)間軸面板中得選項(xiàng)，選擇過(guò)渡

設(shè)置如下

現(xiàn)在，便有稍微流暢的效果了。

步驟7

如果感覺(jué)動(dòng)效有點(diǎn)慢，想讓它快點(diǎn)，那么可以將幀延遲設(shè)置為0.1s

播放一下，不要忘記循環(huán)次數(shù)選擇永遠(yuǎn)，更好地觀摩效果以便調(diào)試

步驟8

現(xiàn)在我們想讓界面滾動(dòng)回來(lái)，我們需要復(fù)制第二幀到最后一幀

拷貝單幀

選擇粘貼單幀，將其移動(dòng)到最后一幀。

步驟9

同步驟7，選擇過(guò)渡

添加新幀，隱藏Tap圖層組。

效果演示：

點(diǎn)擊菜單分類項(xiàng)效果

步驟1

現(xiàn)在想要設(shè)置點(diǎn)擊菜單項(xiàng)后的效果。首先，創(chuàng)建新的幀0.5s。

然后再創(chuàng)建一個(gè)幀，在這個(gè)幀里面，

將首頁(yè)加（粗版）不透明度設(shè)置為0%，常規(guī)從0%->100%

雜志（粗版）不透明度設(shè)置為100%。常規(guī)從100%->0%

步驟2

激活Tap圖層組，將其移動(dòng)到雜志選項(xiàng)附近，然后將幀延遲設(shè)置成0.2s