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