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:
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user