利用ps做APP簡單動效,會陸續發出各種動效小製作,上一篇教程教童鞋製作靜態元素圖,完成了才能開始本次動態學習哈
先放動效給大家看,準備好就開始啦!
工具/原料
ps軟體,本文用的是PScc版本
方法/步驟
先來點準備工作
1.首先ps動效要在畫板的前提下才可以操作,所以如下圖,選中圖層0右鍵點選來自圖層的畫板,就可以了,如果擋住了內容,自行調整圖層順序
2.把需要用到的圓圈轉成智慧物件,且保證圓圈的同一個中心點
把ps功能桌面切換成動感,點選建立時間軸,找到灰黑色底條,點選灰色底條前的下拉三角形,就可以看到我們需要的設定條件區域
點選變換,大致數值形態請看下圖,這裡就不詳細描述了,點選變換,在三處位置都加一個幀,注意它們之間的長短,備註為A、B、C
1.選中A,Ctrl+T把灰黑底塊縮小為0,B變大,C不變
2.這裡灰黑色底塊就搞定了
選中白條:1.點選變換(注意下圖圓圈內的白條起點),新增A幀,B幀
2.A幀的白條如圖,B幀不變
3.新增透明度,幀的位置留意下圖,C修改透明為0,DE都為100
3.這裡白條就完成了
選中灰條,點選變換,新增A幀,B幀
1.A幀如下圖,B幀不變
這裡灰條完成
1.這裡綠條跟灰條的操作是一樣的,直接貼圖了,注意綠條位置
這裡綠條完成
最後只剩文字了,三個文字的設定都是一樣的,主要注意先後順序
1.下圖,其一是看先後順序
2.其二:選中已消費金額圖層,點選變換新增A、B、C幀,A幀下滑到底部,B幀在原本位置更高一點,C不變
3.新增不透明度,同樣新增三幀,跟變換的幀同個位置,D透明度為0,E和F為100
4.結束時下一個文字要剛好接上
這裡文字的操作就高一段落啦
最後貼上一張調整後的幀圖,之前為了讓大家看的清晰所以設的時間屬於很慢的,各位做完後也可以調一下
注意事項
記得轉變成畫板形式
把每個圓層都轉換成智慧物件,並且保證圓圈的中心點在統一一個地方