【呆大的動畫庫】你所不知道的“縮放效果”

? ? ?之前的幾期,我們聊過了淡出、擦除和飛入三個最常見的動畫效果,對應的鏈接在這里,需要回憶的小伙伴可以直接穿越到相應的文章

? ? ?【呆大的動畫庫】從“淡出”開始

? ? ?【呆大的動畫庫】“擦”出你的精彩

? ? ?【呆大的動畫庫】“飛”我想飛

? ? ? 今天我們來聊的效果比較多,有三個,分別是“縮放”、“基本縮放”和“放大/縮小”,之所以把這個三個效果放到一起,主要還是因為他們之間很有很多的共同點,通過下面文章的介紹,幫助大家進行理解和區分,找到最適合的效果,好吧,正式開始今天的分享啦!

? ? ? 今天干貨比較多,大家耐心看,首先進入【基礎篇】啦!


【基礎篇】

? ? 1.效果解析。縮放、基本縮放和放大/縮小,他們三個之間最大的共同點,自然是放大縮小的效果,但具體而言,還是有一些細節上的差別,具體來看下、
? ? ? ?縮放:效果從沒有開始,按照等比例效果,逐漸變化到100%出現的過程,期間伴隨著淡出的效果,放大比例不可調,屬于進入效果的一種。

? ? ? 基本縮放:效果從沒有開始,按照等比例效果,逐漸變化到100%出現的過程,但期間沒有淡出的效果,放大比例不可調,屬于進入效果的一種。

? ? ? 放大/縮小:效果在原本比例的基礎上,進行放大或縮小,縮放的比例可任意調整,且可以水平/垂直方向縮放,屬于強調動畫的一種。

? ? ?從上面的文字描述就可以看出,主要的區別的在于三點:淡出效果,比例調整和所在的位置,具體的可以下圖的慢動作比較就更加直觀了。

?2.效果位置。縮放的位置比較好找,進入效果第一排的最后一個


基本縮放,則在“更多進入效果”里面


“放大/縮小”在強調里面


3.應用對象。同前面幾個效果類似,他的應用對象可以是形狀,也可以是文字,或者是圖片都是可以的,屬于應用范圍最廣的效果之一。

4.效果選項。對于縮放和基本縮放而言,除了淡出效果之外,這里也是區別最大的地方。主要區別在于縮放的方向,基本縮放的前兩項對應縮放的前兩項,區別在于有沒有淡出的效果


? ? 而基本縮放的后面四項,效果如下


? ? ? ?輕微放大:從一定比例開始,到全部出現;

? ? ? ?切出:從畫面中間偏左位置進入,縮小出現,類似從視線身后飛過來的效果;

? ? ? ?從屏幕底部縮小:從同切出類似,區別是從屏幕底部飛入

? ? ? ?輕微縮小:同輕微放大效果類似。

? ? ? 放大/縮小的效果選項,相當于是基本縮放的“升級版”,配合其他動畫效果,比如淡出和路徑動畫等,就可以實現和基本縮放相同的效果,同時還具備基本縮放所沒有的功能,特別是軸向的縮放效果,一個是水平方向,一個則是垂直方向。


? ?水平:縮放效果僅在水平方向進行

? ?垂直:縮放效果僅在垂直方向進行

? ?兩者:縮放效果在兩個方向同時進行,同縮放一樣

? ?微小:縮放比例為25%

? ? 較小:縮放比例為50%

? ? 較大:縮放比例為150%

? ?巨大:縮放比例為25%

另外,這里需要特別注意的是,放大\縮小的比例是可以任意調整的,只要雙擊動畫效果,就可以在尺寸-自定義的地方進行修改,但是新手經常會忽略的一個步驟,從而無法完成修改:修改完自定義比例后,一定要記得按下回車,否則修改無法完成

? ? ?還有一個放大/縮小的小技巧,就是“自動翻轉”,對于一些連續縮放的效果,特別是對于裝飾動畫而言,完全可以用很重復效果來實現

以上就是今天的【基礎篇】內容,下面進入到案例的展示階段。


【實踐篇】

? 1. 圖片和文字的飛入。同前面幾個效果類似,這是動畫效果的基本應用,常規對于圖片的縮放,我們直接應用就可以了,但是對于文字的應用,則可以通過按字母和按詞發送,特別是配合動畫效果選項,可以做出更多的變化,比如下圖的,每個點都用了不同的縮放效果,而且只用了縮放的效果,一個原本很簡單的封面或者過渡頁的設計,就變得比較生動了


2.中心炫彩特效。對于一些封面或者內頁的裝飾效果,有時候會用到從頁面中心連續飛出的效果,比如下圖這樣的靜態效果

通常思路下,我們可以給各個圓加上飛出的退出效果,然后設置方向就可以了,方法比較簡單,但是局限是飛出的角度都是45°的倍數,這個在上次的分享中跟大家提到了,而且如果元素比較多,工作量還是蠻大的,比如下圖的效果


? ? ? ? ? 當然,如果用路徑動畫完全可以解決飛出角度的問題,但是相對的工作量也非常的大

? ? ? ? ?不過對于這種效果,我們完全可以換個思路,比如,用縮放其實就可以很簡單的實現,對于縮放效果里面的動選項,第二個效果,從幻燈片中心縮放很容易被我們忽視,但這個效果,卻可以很輕松的實現從幻燈片中心,到各個點縮放效果,對于上面的效果,我們只需要給各個圓形加上縮放動畫,效果選擇從幻燈片中心,然后將各個圓移動到幻燈片之外就可以了,比如下圖所示

3.縮放的中心。或者叫做動畫中心,這點在之前的一篇教程跟大家聊過,【呆大的動畫庫】我們來聊聊那些動畫“小思維”,喜歡的小伙伴可以直接穿越回去,這里簡單的跟大家再回憶下。

? ? ? 對于動畫中心而言,其實影響最大的就是縮放效果,不同的縮放中心,就意味著不同的縮放效果,所以動畫中心的應用,多是跟旋轉、縮放這些內容有關的,特別是跟圓類似的圖形的關系比較大,舉個栗子吧,如果有一個扇形,我們想給他加個縮放或者陀螺旋的動畫效果,雖然選中的時候看起來像是個方形,比如下圖

扇形


我在扇形的中心放個圓形比較下,用過之后就知道其實旋轉和縮放的中心跟扇形的角度關系很大,比如下圖

扇形縮放


最后一個相對最接近圓形,所以縮放的過程也跟圓形重合越多,所以處理的方法有一種,一種是補位的技巧,比如第一個扇形,我就在他的下面加個能完全覆蓋他的正方形組合一下,然后把正方形的填充和邊框都去掉就可以了,為了方便比較,下圖的效果我保留了邊框

補位后的效果

第二種處理的方法,是利用PA里面的動畫中心工具

特別是對于比較復雜的圖形,利用這個工具相對補位的過程要更加的簡單,我們來看看個案例,比如下圖咖啡杯的飛入,很明顯旋轉的中心是咖啡杯的內部的中心,但是因為有個把手的原因,幾何中心卻不是杯子的中心,所以需要我們進行調整,常規按照補位的技巧大家可以試下,也可以實現,但是調整的次數比較多

案例

所以這里我們可以用PA的動畫中心工具,選中之后打開工具,就可以發現杯子已經在畫面中了,我們只需要手動點擊杯子的中心就可以了,如果需要微調,那就用右下角的方向鍵接可以了,是不是很方便?

動畫中心工具

? ? 對于這點的應用,也是提升動畫效果非常重要的一點,所以再給大家看幾個案例,比如下圖的效果,大家可以感受下動畫中心調整后的效果。


4.放大/縮小的自動翻轉。因為自動翻轉的功能,對于一些連續的縮放效果,我們就可以進行連續的簡單操作了,特別是對于背景的裝飾動畫,如果再配合PA插件的動畫風暴功能,就可以更加輕松和更多變化了,比如下面的案例。


? ? ?配合PA插件,如果在放大之后繼續淡出的效果,就變成了下圖效果

5.軸向動畫的應用。前面的效果大多數是在水平和垂直兩個方向上變化,但是放大/縮小是完全可以在2個方向上變化的,利用這一效果,我們可以實現下面的效果,比如音樂播放器里面會看到下圖所示

同樣的如果配合PA插件里面的動畫風暴編程效果,完全可以做的更加的精細,比如下圖所示

6.PA動畫風暴的應用。之前很多次跟大家分享過PA插件的動畫風暴功能,因為里面的內容相對比較多,所以這里就不做具體的分析了,只給大家分享一些可以實現的動畫效果吧


? ? ?仔細觀察就可以發現,每個效果里面縮放都是縮放,但卻有比例的變化,有興趣并且會使用PA插件的小伙伴,可以通過源文件研究下,這里就不一一分析了。


? ? ?今天的內容就怎么多,我們下周見啦!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容