為什麼 iOS 圓角四邊形圖標在放大和縮小過程中圓角有一個較突然的收縮過程？

01-06

除了過程中的變化，即變化前後穩態的圓角對應整個矩形佔比的變化。還有放大動畫結束之後，圖標都已經到最大的程度了，文件夾的邊緣會忽然有個驟變。

不知道我的理解是否正確，如果題主問的是文件夾在打開和關閉過程中發生的圓角突變，我或許可以說一下我的看法。

之所以強調「過程中」，是因為剛剛發現8.1中文件夾打開「之後」也會有一個微小的收縮，簡直逼死強迫症……如果題主問的是這個那我就不知道原因了。

iOS 7/8 中的動畫效果的實現原理有這樣一個特點：當一個元素從A狀態變為B狀態時，並沒有在這兩個狀態中應用平滑的過渡動畫，而是只準備了兩個狀態的靜態圖像，通過透明度來轉換。

假設文件夾未展開的圖標為邊長120px、圓角半徑為27px的圓角矩形（雖然我們都知道其實它並不是真正的圓角矩形），此為狀態A；展開之後邊長608px、圓角半徑為72px，此為狀態B。動畫事實為狀態A進行等比例放大，如果這樣，變大後圓角半徑會有136.8px。因此，在狀態A放大到一半的時候，便透明淡出，同時縮小的狀態B淡入，繼續放大的動畫。於是，在淡入淡出的交接處，就會看到圓角大小的突變。

以下內容由 OSX 10.10 自帶QuickTime錄製 iOS 8.1.1 截圖所得。以文件夾關閉動畫為例（展開動畫會因為觸摸反饋變暗而看不清楚）：

狀態A

可以看到它已經開始淡出了（壁紙圖案透出）

狀態B開始淡入

最後完全到達狀態B

↑ 就這些

一不小心暴露了App喜好什麼的，大家無視就好……

======題外話分割線======

在 OSX 10.10 上，Launchpad里文件夾的縮放做的就很精緻（可以按住Shift檢驗），個人猜測是因為這裡的文件夾展開尺寸是一個動態數值（高度會因內部App數量變化而變化）所以文件夾圖形乾脆就是用代碼繪製的。

還有一個原因可能是這樣：如果仔細觀察，你會發現iOS的文件夾展開前和展開後，它對於其下方元素的模糊效果是不一致的！這裡簡單描述為，未展開的文件夾圖標比展開後要更白一些。

（其實我們可以看到，iOS在不同的場合應用的毛玻璃效果並不是統一的，通知中心的黑玻璃模糊半徑比控制中心的白玻璃低很多，多任務界面的主屏幕是模糊很重但更清澈的白玻璃，Spotlight中則是強化飽和度的無色毛玻璃。）

除了Spotlight搜索的呼出動效中，模糊效果是平滑變化的之外，其他任何場合，Apple都沒有試圖解決模糊效果的平滑變化問題。比如鎖屏到輸入密碼的界面中，可以明顯看出模糊層是事先就存在的，通過淡入來遮蓋本不模糊的界面。

同樣，在文件夾展開的動畫中，也沒有讓模糊效果平滑漸變，而是採用了淡入淡出的策略。

而OSX中，文件夾模糊效果是不發生改變的。

iOS Simulator 裡面可以切換慢速動畫，這樣看就方便很多了。Update：

因為變慢的只是「Frontmost App」，所以變慢的動畫和實際的動畫會有出入，還是需要看直接慢放的視頻。兩者配合起來更容易看清楚詳細的變化。下面兩個視頻分別是開啟慢速和直接放慢的效果。

iOS icon slomo 1視頻視頻封面

iOS icon slomo 2視頻

我就在這裡拋磚引玉了。

用 iOS simulator 看了好幾遍沒看出來。真機 iPhone 5s 動畫也很快，看來必須用錄屏工具錄下來一幀幀的研究一下才能確認。不過我印象在之前的 iOS 7 宣傳視頻介紹圖標的時候應該確實有這個動畫演示。

我覺得是因為 iOS 按鈕必須是圓角矩形，但是圖標還是圓形更好看（OS X 越來越多的圓形圖標應該不是錯覺），所以用一個動畫使按鈕在響應動作的一瞬間有一個圓的趨勢，比如 Safari 圖標，在 iOS 7/8 後很明顯就是OS X的純圓形圖標縮小到了圓角矩形的按鈕裡面（之前可以認為是截取了指南針內部圓角矩形的一塊兒），如果多縮一些就可以縮到內部的圓形指南針。

這樣這個動畫從邏輯上統一了 iOS 和 OS X 的圖標設計思路使之相互呼應。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

以上就是命題作文，我先去找視頻了。

今天更新到 iOS8.3，文件夾好像不會縮回了。

為了保持外圓與內圓的比例一致，這樣從視覺效果上看才更協調，更舒服。我想這一定是老喬的想法，完美強迫症啊！

ios8.0.1的時候我也有發現這個現象，圓角會往裡縮一點，但是升級了8.1.1以後就看不出來了

個人認為是蘋果特意設計的，為了保持圓角和邊線的比例，使得用戶視覺上和諧。就像在電腦上話一個圓角矩形，單純的用點擊滑鼠拖動頂點來放大矩形，會導致圓角和邊線比例失調，尤其在視覺上更加明顯。

不用那麼費勁，在設置里把reduce motion打開，可以很清楚地看到這個過程。

回答問題：這是iOS的一個bug。我相信蘋果會在未來的某個更新里修復。

根據格式塔的圖形背景原理，圖形的「複雜」程度要高於背景。在變化之前，文件夾里的icon的輪廓趨於直角，所以文件夾的外輪廓弧度只要高於內部icon即可；在變化之後，文件夾里的icon的輪廓弧度變大，因此為了保持良好的圖形背景關係，文件夾的外部輪廓的弧度跟著變大。可以參考《格式塔心理學原理》163頁，《為什麼背景比圖形更簡單？》。