iOS 上推退出动画里,App Icon 出现白边的排查与修复

如果你在 iPhone 上看到这个现象：从 App 上推回桌面时，图标左下角和右下角有一圈白边，十有八九是 AppIcon 资源带了透明通道（RGBA）。

这不是业务页面的背景色问题，核心在图标素材本身。

问题现象

在 DueSight 的真机测试里，日常使用正常，但执行上推手势回桌面时，系统动画过程出现短暂白边：

• • 白边集中在图标圆角附近，尤其左下和右下
• • 只在过渡动画里明显，静态桌面图标没问题
• • 深色风格 App 更容易被看出来

根因分析

1. 图标是 RGBA，四角透明

检查 AppIcon.appiconset 可以看到，图标文件是 TrueColorAlpha，也就是带 alpha 通道。

典型检查命令：

identify -verbose DueSight/Resources/Assets.xcassets/AppIcon.appiconset/1024.png | rg "Type:|Alpha:|png:IHDR.color_type"

修复前会看到类似输出：

Type: TrueColorAlpha
png:IHDR.color_type: 6 (RGBA)

四角像素也能直接看到是透明：

magick DueSight/Resources/Assets.xcassets/AppIcon.appiconset/1024.png \
  -format "TL:%[pixel:p{0,0}] BR:%[pixel:p{%[fx:w-1],%[fx:h-1]}]" info:

输出类似：

TL:srgba(0,0,0,0) BR:srgba(0,0,0,0)

2. 上推动画阶段会发生边缘混色

iOS 在 App 回桌面的过渡里，会把 App 快照和桌面图标做一段复合动画。图标边缘如果有透明抗锯齿像素，参与系统合成时容易和浅色背景混色，视觉上就像出现了白边。

所以你在业务代码里改 window.backgroundColor、view.backgroundColor，通常治不了这个问题。

实际修复方案

目标很直接：把 AppIcon.appiconset 全部转成不带 alpha 的不透明 PNG。

批量处理命令

ICON_DIR='DueSight/Resources/Assets.xcassets/AppIcon.appiconset'
BACKUP_DIR="/tmp/DueSight-AppIcon-alpha-backup-$(date +%Y%m%d%H%M%S)"

mkdir -p "$BACKUP_DIR"
cp "$ICON_DIR"/*.png "$BACKUP_DIR"/

for f in "$ICON_DIR"/*.png; do
  magick "$f" -background '#1E1E21' -alpha remove -alpha off "$f"
done

这里用了两步处理：

• • -alpha remove：把透明区域按指定背景色压平
• • -alpha off：移除 alpha 通道，输出 truecolor

修复后验证

再检查同一个文件：

identify -verbose DueSight/Resources/Assets.xcassets/AppIcon.appiconset/1024.png | rg "Type:|Alpha:|png:IHDR.color_type"

应该看到：

Type: TrueColor
png:IHDR.color_type: 2 (Truecolor)

再扫一遍整个 iconset，确认没有任何 alpha：

for f in DueSight/Resources/Assets.xcassets/AppIcon.appiconset/*.png; do
  t=$(identify -format '%[channels]' "$f")
  if [[ "$t" == *a* || "$t" == *A* ]]; then
    echo "alpha: $f $t"
  fi
done

无输出就是通过。

为什么不是改 LaunchScreen

问题在回桌面动画，不是冷启动闪白。LaunchScreen 资源即使存在风格差异，也不是这类白边的主因。

简化判断：

• • 冷启动瞬间闪白，优先查 UILaunchScreen 和窗口底色
• • 上推回桌面图标边缘发白，优先查 AppIcon 的 alpha

团队里建议固化的规范

设计与导出规范

1. 1. iOS App Icon 最终交付必须是无透明通道 PNG。
2. 2. 不要在 1024 源图里做“额外透明画布”来留边。
3. 3. 圆角交给系统，不要自己叠加半透明边缘去模拟系统圆角。

工程侧 CI 检查

可以在 CI 增加一个轻量校验，阻止带 alpha 的图标被提交：

for f in DueSight/Resources/Assets.xcassets/AppIcon.appiconset/*.png; do
  type=$(identify -format '%[channels]' "$f")
  if [[ "$type" == *a* || "$type" == *A* ]]; then
    echo "[FAIL] icon has alpha: $f"
    exit 1
  fi
done

排查心得

这类问题很容易误判成“过渡动画 bug”或者“页面背景色不一致”，然后在业务代码里反复调颜色，最后浪费很多时间。

更稳的做法是先看资源属性，先确认素材通道信息，再决定改代码还是改资产。对 App Icon 这类系统级资源，图像通道往往比界面代码更关键。

本文适用范围

• • iOS 15+，手势上推回桌面
• • 使用 Assets.xcassets 管理 App Icon
• • 图标风格包含深色背景、发光、半透明边缘时更容易触发

如果你也遇到同类问题，建议第一步就先跑一遍 identify -verbose，先确认是不是 alpha 通道导致的。

2026.04.10 09:22
沪 · 赵巷KFC

📌 声明：本文由 AI 辅助完成