feat: 首页入场动画 + 增大最近作品卡片尺寸

入场动画:
- heroSection 添加 opacity + offset 交错入场动画
- recentWorksSection/emptyStateHint 延迟 0.2s 后动画进入
- 使用 DesignTokens.Animation.standard 保持一致性

卡片尺寸:
- RecentWorkCard 从 110x150 增大到 130x178
- 保持相近比例,提升视觉冲击力和触控目标

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
empty
2026-02-07 21:13:56 +08:00
parent a75aeed767
commit 4588c7c1eb

View File

@@ -16,18 +16,26 @@ struct HomeView: View {
@State private var selectedItem: PhotosPickerItem?
@State private var isLoading = false
@State private var errorMessage: String?
@State private var showHero = false
@State private var showRecentWorks = false
var body: some View {
ScrollView(showsIndicators: false) {
VStack(spacing: DesignTokens.Spacing.xxl) {
//
heroSection
.opacity(showHero ? 1 : 0)
.offset(y: showHero ? 0 : 20)
//
if !recentWorks.recentWorks.isEmpty {
recentWorksSection
.opacity(showRecentWorks ? 1 : 0)
.offset(y: showRecentWorks ? 0 : 20)
} else {
emptyStateHint
.opacity(showRecentWorks ? 1 : 0)
.offset(y: showRecentWorks ? 0 : 20)
}
}
.padding(.horizontal, DesignTokens.Spacing.xl)
@@ -50,6 +58,12 @@ struct HomeView: View {
}
.onAppear {
recentWorks.cleanupDeletedAssets()
withAnimation(DesignTokens.Animation.standard) {
showHero = true
}
withAnimation(DesignTokens.Animation.standard.delay(0.2)) {
showRecentWorks = true
}
}
}
@@ -304,13 +318,13 @@ struct RecentWorkCard: View {
Image(uiImage: thumbnail)
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 110, height: 150)
.frame(width: 130, height: 178)
.clipShape(RoundedRectangle(cornerRadius: DesignTokens.Radius.md))
.transition(.opacity.combined(with: .scale(scale: 0.95)))
} else {
RoundedRectangle(cornerRadius: DesignTokens.Radius.md)
.fill(Color.softPressed)
.frame(width: 110, height: 150)
.frame(width: 130, height: 178)
.overlay {
Image(systemName: "livephoto")
.font(.system(size: 24))
@@ -329,7 +343,7 @@ struct RecentWorkCard: View {
}
.padding(DesignTokens.Spacing.sm)
}
.frame(width: 110, height: 150)
.frame(width: 130, height: 178)
//
VStack(alignment: .leading, spacing: 2) {