動畫效果會講故事，動效不僅僅是為了愉悅用戶，更是為了幫助理解當前操作進展，幫助提高app的使用效率。當動效製作非常成熟時，看起來應當是非常自然的。

App中隨處可見各種各樣絢麗的動態效果，從頁面跳轉到加載進度指示，從狀態反饋到下拉刷新。但動效的使用應當自然流暢，過多花哨或者不適當的動效反而會給用戶體驗帶來負面影響。

一、App store的全新改版

蘋果作為用戶體驗界的標杆，在最新的iOS11中，對界面及動效做了很多更新迭代。其中最明顯的就是App store的全新改版。改版後的應用每日會根據最新時事，精選出小眾精選、遊戲文化、獨立佳作等應用，用卡片的方式展示出來。作為第一級 Tab，巨大、顯眼的卡片式設計意味著信息更為聚焦。

首頁的今日推薦頁還使用了非常漂亮的轉場效果。轉場動效是十分重要的一種動效，它的作用是引導用戶，讓用戶更好地理解頁面跳轉，知道自己身處何方。App store的設計者為了避免卡片展示頁和卡片詳情頁之間的過度過於生硬，利用動效填補了頁面跳轉的中間過程，使體驗更加流暢自然。

二、小細節

App store的卡片頁和詳情頁之間的轉場在AE中用到的功能並不多，列舉出來就是放大縮小、位移、改變透明度、遮罩、曲線等基礎功能。而相對於普通的轉場動效來說，它的動效更加自然流暢的原因是它注重到了三個細節：

• 回彈
• 陰影
• 卡片展開時尺寸不變

1、回彈

回彈即是在原有過渡效果的基礎上，借用符合物理規則的輕微顫動來強化用戶體驗，讓動效更加生動。舉個例子：當你想讓一個球從屏幕最上方落下時，它在停止之前要有幾次強度逐漸減弱的回彈才符合物理規律；沒有回彈的動畫看起來則會非常生硬。

iOS動效最大的亮點在於，很多地方都有回彈的效果，卡片展開與收起的效果也不例外。

實現方式

以關閉按鈕的回彈為例：

step1: 用鋼筆工具勾出一條路徑，該路徑需要彎曲以製作回彈的效果；

step2: 選中路徑的path屬性複製，在要移動的物體的position屬性上粘貼，物體的中心點就會沿著路徑移動，從而產生回彈的效果。

step3: 調整位置運動路徑的曲線，使運動更加自然。（關於曲線調節可以查看這篇文章：徹底搞懂AE曲線，讓設計中的動效更加有趣）

小tips：

1、卡片與它裡面的字、關閉按鈕是分離的，分別處於單獨的圖層上面，因此要為它們創建不同的移動路徑。

2、回彈也可以用表達式製作，更加方便快捷。但這裡的回彈是物體彈出去以後往下移動，用表達式達不到想要的效果，因此我用了繪製路徑的方法。回彈表達式可以參考這篇文章：AE表達式：回彈。

2、陰影

陰影可以讓用戶理解元素的層次，讓他們知道兩個對象並不在同一高度，不是同一個層級。同時陰影也暗示了用戶某個元素其實是可點擊的。

App store中的每個卡片背後都使用了微妙的灰色彌散陰影，讓卡片的細節更加豐富，並暗示用戶卡片是可交互的。如果去掉陰影，卡片就失去了層次感，也沒有了明確的交互引導性，很容易讓用戶誤解為不可點擊。

當卡片展開時，陰影也會隨之擴散變大，透明度降低，與現實中物體擴大時陰影的變化方式相同。這樣的設計可以給用戶較高的感知度，能夠更加清楚地傳遞信息。

實現方式

step1: 卡片下面新建一個圖層，創建一個與卡片形狀大小相同的灰色圓角長方形，放在卡片正下方；

step2: 將圓角長方形向下移動5像素，使用高斯模糊並降低其透明度，做成陰影圖層；

step3: 卡片展開時，擴大陰影圖層，並繼續降低其透明度；

step4: 卡片收回時，將陰影圖層迴歸到原來的大小和透明度。

3、卡片展開時尺寸不變

這也是iOS卡片的特色之一，仔細觀察就會發現，當卡片詳情頁展開時，卡片的大小其實是沒有發生變化的。這樣做的好處是，在首頁的卡片展示中不會由於圖片的放大縮小而丟失細節，用戶在首頁就可以很清楚的看到推廣banner的每個細節。

實現方式

step1: 在卡片上加一個圓角長方形遮罩，使卡片只露出遮罩的部分；

step2: 點擊卡片展示卡片詳情頁時，放大遮罩，使卡片全部露出來。

step3: 卡片收起時，再將遮罩縮小到原來的大小。

以上是我對App store中卡片動效的理解，相信每個人對它都有不同的理解，都可以在AE中用不同的方式做出來，具體怎麼操作不重要，重要的是如何對一個動效進行解析和思考，並總結方法用在自己的設計上。

對於這篇文章中的動效有其他更好的方法也歡迎和我留言討論哦，寫教程不易，喜歡就點個贊吧～

鏈接：https://mp.weixin.qq.com/s/Nx3nhmSEYh2frC2RfReVoA

閱讀更多 白屏 的文章

關鍵字: 動態效果 物理 iOS