Compare commits
2 Commits
1e163ee426
...
0cde8d0c32
| Author | SHA1 | Date | |
|---|---|---|---|
| 0cde8d0c32 | |||
| b851e32eda |
@ -1,558 +1,21 @@
|
||||
import SwiftUI
|
||||
import SwiftData
|
||||
import AVKit
|
||||
|
||||
// MARK: - Notification Names
|
||||
extension Notification.Name {
|
||||
static let blindBoxStatusChanged = Notification.Name("blindBoxStatusChanged")
|
||||
}
|
||||
|
||||
struct BlindBoxView: View {
|
||||
let mediaType: BlindBoxMediaType
|
||||
@State private var showModal = false // 控制用户资料弹窗显示
|
||||
@State private var showSettings = false // 控制设置页面显示
|
||||
@State private var isMember = false // 是否是会员
|
||||
@State private var memberDate = "" // 会员到期时间
|
||||
@State private var showLogin = false
|
||||
@State private var memberProfile: MemberProfile? = nil
|
||||
@State private var blindCount: BlindCount? = nil
|
||||
@State private var blindList: [BlindList] = [] // Changed to array
|
||||
// 生成盲盒
|
||||
@State private var blindGenerate : BlindBoxData?
|
||||
@State private var showLottieAnimation = true
|
||||
// 轮询接口
|
||||
@State private var isPolling = false
|
||||
@State private var pollingTimer: Timer?
|
||||
@State private var currentBoxType: String = ""
|
||||
// 盲盒链接
|
||||
@State private var videoURL: String = ""
|
||||
@State private var imageURL: String = ""
|
||||
// 按钮状态 倒计时
|
||||
@State private var countdown: (minutes: Int, seconds: Int, milliseconds: Int) = (36, 50, 20)
|
||||
@State private var countdownTimer: Timer?
|
||||
// 盲盒数据
|
||||
@State private var displayData: BlindBoxData? = nil
|
||||
@State private var showScalingOverlay = false
|
||||
@State private var animationPhase: BlindBoxAnimationPhase = .loading
|
||||
@State private var scale: CGFloat = 0.1
|
||||
@State private var videoPlayer: AVPlayer?
|
||||
@State private var showControls = false
|
||||
@State private var isAnimating = true
|
||||
@State private var aspectRatio: CGFloat = 1.0
|
||||
@State private var isPortrait: Bool = false
|
||||
@State private var displayImage: UIImage?
|
||||
@State private var showMedia = false
|
||||
|
||||
// 查询数据 - 简单查询
|
||||
@Query private var login: [Login]
|
||||
|
||||
init(mediaType: BlindBoxMediaType) {
|
||||
self.mediaType = mediaType
|
||||
}
|
||||
|
||||
// 倒计时
|
||||
private func startCountdown() {
|
||||
// 重置为36:50:20
|
||||
countdown = (36, 50, 20)
|
||||
|
||||
countdownTimer?.invalidate()
|
||||
countdownTimer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
|
||||
var (minutes, seconds, milliseconds) = countdown
|
||||
|
||||
// 更新毫秒
|
||||
milliseconds -= 10
|
||||
if milliseconds < 0 {
|
||||
milliseconds = 90
|
||||
seconds -= 1
|
||||
}
|
||||
|
||||
// 更新秒
|
||||
if seconds < 0 {
|
||||
seconds = 59
|
||||
minutes -= 1
|
||||
}
|
||||
|
||||
// 如果倒计时结束，停止计时器
|
||||
if minutes <= 0 && seconds <= 0 && milliseconds <= 0 {
|
||||
countdownTimer?.invalidate()
|
||||
countdownTimer = nil
|
||||
return
|
||||
}
|
||||
|
||||
countdown = (minutes, seconds, milliseconds)
|
||||
}
|
||||
}
|
||||
|
||||
private func loadMedia() {
|
||||
print("loadMedia called with mediaType: \(mediaType)")
|
||||
|
||||
switch mediaType {
|
||||
case .video:
|
||||
loadVideo()
|
||||
currentBoxType = "Video"
|
||||
startPolling()
|
||||
case .image:
|
||||
loadImage()
|
||||
currentBoxType = "Image"
|
||||
startPolling()
|
||||
case .all:
|
||||
print("Loading all content...")
|
||||
// 会员信息
|
||||
NetworkService.shared.get(
|
||||
path: "/membership/personal-center-info",
|
||||
parameters: nil
|
||||
) { (result: Result<MemberProfileResponse, NetworkError>) in
|
||||
DispatchQueue.main.async {
|
||||
switch result {
|
||||
case .success(let response):
|
||||
self.memberProfile = response.data
|
||||
self.isMember = response.data.membershipLevel == "Pioneer"
|
||||
self.memberDate = response.data.membershipEndAt ?? ""
|
||||
print("✅ 成功获取会员信息:", response.data)
|
||||
print("✅ 用户ID:", response.data.userInfo.userId)
|
||||
case .failure(let error):
|
||||
print("❌ 获取会员信息失败:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 盲盒数量
|
||||
NetworkService.shared.get(
|
||||
path: "/blind_box/available/quantity",
|
||||
parameters: nil
|
||||
) { (result: Result<APIResponse<BlindCount>, NetworkError>) in
|
||||
DispatchQueue.main.async {
|
||||
switch result {
|
||||
case .success(let response):
|
||||
self.blindCount = response.data
|
||||
print("✅ 成功获取盲盒数量:", response.data)
|
||||
case .failure(let error):
|
||||
print("❌ 获取数量失败:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 盲盒列表
|
||||
NetworkService.shared.get(
|
||||
path: "/blind_boxs/query",
|
||||
parameters: nil
|
||||
) { (result: Result<APIResponse<[BlindList]>, NetworkError>) in
|
||||
DispatchQueue.main.async {
|
||||
switch result {
|
||||
case .success(let response):
|
||||
self.blindList = response.data ?? []
|
||||
// 如果列表为空数组 设置盲盒状态为none
|
||||
if self.blindList.isEmpty {
|
||||
self.animationPhase = .none
|
||||
}
|
||||
print("✅ 成功获取 \(self.blindList.count) 个盲盒")
|
||||
case .failure(let error):
|
||||
self.blindList = []
|
||||
self.animationPhase = .none
|
||||
print("❌ 获取盲盒列表失败:", error.localizedDescription)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 轮询接口
|
||||
private func startPolling() {
|
||||
stopPolling()
|
||||
isPolling = true
|
||||
checkBlindBoxStatus()
|
||||
}
|
||||
|
||||
private func stopPolling() {
|
||||
pollingTimer?.invalidate()
|
||||
pollingTimer = nil
|
||||
isPolling = false
|
||||
}
|
||||
|
||||
private func checkBlindBoxStatus() {
|
||||
guard !currentBoxType.isEmpty else {
|
||||
stopPolling()
|
||||
return
|
||||
}
|
||||
|
||||
NetworkService.shared.postWithToken(
|
||||
path: "/blind_box/generate/mock",
|
||||
parameters: ["box_type": currentBoxType]
|
||||
) { (result: Result<APIResponse<BlindBoxData>, NetworkError>) in
|
||||
DispatchQueue.main.async {
|
||||
switch result {
|
||||
case .success(let response):
|
||||
let data = response.data
|
||||
self.blindGenerate = data
|
||||
print("当前盲盒状态: \(data.status)")
|
||||
// 更新显示数据
|
||||
if self.mediaType == .all, let firstItem = self.blindList.first {
|
||||
self.displayData = BlindBoxData(from: firstItem)
|
||||
} else {
|
||||
self.displayData = data
|
||||
}
|
||||
|
||||
// 发送状态变更通知
|
||||
NotificationCenter.default.post(
|
||||
name: .blindBoxStatusChanged,
|
||||
object: nil,
|
||||
userInfo: ["status": data.status]
|
||||
)
|
||||
|
||||
if data.status != "Preparing" {
|
||||
self.stopPolling()
|
||||
print("✅ 盲盒准备就绪，状态: \(data.status)")
|
||||
if self.mediaType == .video {
|
||||
self.videoURL = data.url ?? ""
|
||||
} else if self.mediaType == .image {
|
||||
self.imageURL = data.url ?? ""
|
||||
}
|
||||
} else {
|
||||
self.pollingTimer = Timer.scheduledTimer(
|
||||
withTimeInterval: 2.0,
|
||||
repeats: false
|
||||
) { _ in
|
||||
self.checkBlindBoxStatus()
|
||||
}
|
||||
}
|
||||
case .failure(let error):
|
||||
print("❌ 获取盲盒状态失败: \(error.localizedDescription)")
|
||||
self.stopPolling()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func loadImage() {
|
||||
guard !imageURL.isEmpty, let url = URL(string: imageURL) else {
|
||||
print("⚠️ 图片URL无效或为空")
|
||||
return
|
||||
}
|
||||
|
||||
URLSession.shared.dataTask(with: url) { data, _, _ in
|
||||
if let data = data, let image = UIImage(data: data) {
|
||||
DispatchQueue.main.async {
|
||||
self.displayImage = image
|
||||
self.aspectRatio = image.size.width / image.size.height
|
||||
self.isPortrait = image.size.height > image.size.width
|
||||
self.showScalingOverlay = true // 确保显示媒体内容
|
||||
}
|
||||
}
|
||||
}.resume()
|
||||
}
|
||||
|
||||
private func loadVideo() {
|
||||
guard !videoURL.isEmpty, let url = URL(string: videoURL) else {
|
||||
print("⚠️ 视频URL无效或为空")
|
||||
return
|
||||
}
|
||||
|
||||
let asset = AVAsset(url: url)
|
||||
let playerItem = AVPlayerItem(asset: asset)
|
||||
let player = AVPlayer(playerItem: playerItem)
|
||||
|
||||
let videoTracks = asset.tracks(withMediaType: .video)
|
||||
if let videoTrack = videoTracks.first {
|
||||
let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform)
|
||||
let width = abs(size.width)
|
||||
let height = abs(size.height)
|
||||
|
||||
aspectRatio = width / height
|
||||
isPortrait = height > width
|
||||
}
|
||||
|
||||
// 更新视频播放器
|
||||
videoPlayer = player
|
||||
videoPlayer?.play()
|
||||
showScalingOverlay = true // 确保显示媒体内容
|
||||
}
|
||||
|
||||
private func prepareVideo() {
|
||||
guard !videoURL.isEmpty, let url = URL(string: videoURL) else {
|
||||
print("⚠️ 视频URL无效或为空")
|
||||
return
|
||||
}
|
||||
|
||||
let asset = AVAsset(url: url)
|
||||
let playerItem = AVPlayerItem(asset: asset)
|
||||
let player = AVPlayer(playerItem: playerItem)
|
||||
|
||||
let videoTracks = asset.tracks(withMediaType: .video)
|
||||
if let videoTrack = videoTracks.first {
|
||||
let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform)
|
||||
let width = abs(size.width)
|
||||
let height = abs(size.height)
|
||||
|
||||
aspectRatio = width / height
|
||||
isPortrait = height > width
|
||||
}
|
||||
|
||||
// 更新视频播放器
|
||||
videoPlayer = player
|
||||
}
|
||||
|
||||
private func prepareImage() {
|
||||
guard !imageURL.isEmpty, let url = URL(string: imageURL) else {
|
||||
print("⚠️ 图片URL无效或为空")
|
||||
return
|
||||
}
|
||||
|
||||
URLSession.shared.dataTask(with: url) { data, _, _ in
|
||||
if let data = data, let image = UIImage(data: data) {
|
||||
DispatchQueue.main.async {
|
||||
self.displayImage = image
|
||||
self.aspectRatio = image.size.width / image.size.height
|
||||
self.isPortrait = image.size.height > image.size.width
|
||||
}
|
||||
}
|
||||
}.resume()
|
||||
}
|
||||
|
||||
private func startScalingAnimation() {
|
||||
self.scale = 0.1
|
||||
self.showScalingOverlay = true
|
||||
|
||||
withAnimation(.spring(response: 2.0, dampingFraction: 0.5, blendDuration: 0.8)) {
|
||||
self.scale = 1.0
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Computed Properties
|
||||
private var scaledWidth: CGFloat {
|
||||
if isPortrait {
|
||||
return UIScreen.main.bounds.height * scale * 1/aspectRatio
|
||||
} else {
|
||||
return UIScreen.main.bounds.width * scale
|
||||
}
|
||||
}
|
||||
|
||||
private var scaledHeight: CGFloat {
|
||||
if isPortrait {
|
||||
return UIScreen.main.bounds.height * scale
|
||||
} else {
|
||||
return UIScreen.main.bounds.width * scale * 1/aspectRatio
|
||||
}
|
||||
}
|
||||
/// App entry content. Keeps only routing/navigation and delegates feature UIs to their own files.
|
||||
struct ContentView: View {
|
||||
@StateObject private var router = Router.shared
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
Color.themeTextWhiteSecondary.ignoresSafeArea()
|
||||
.onAppear {
|
||||
print("🎯 BlindBoxView appeared with mediaType: \(mediaType)")
|
||||
print("🎯 Current thread: \(Thread.current)")
|
||||
// 初始化显示数据
|
||||
if mediaType == .all, let firstItem = blindList.first {
|
||||
displayData = BlindBoxData(from: firstItem)
|
||||
} else {
|
||||
displayData = blindGenerate
|
||||
}
|
||||
|
||||
// 添加盲盒状态变化监听
|
||||
NotificationCenter.default.addObserver(
|
||||
forName: .blindBoxStatusChanged,
|
||||
object: nil,
|
||||
queue: .main
|
||||
) { notification in
|
||||
if let status = notification.userInfo?["status"] as? String {
|
||||
switch status {
|
||||
case "Preparing":
|
||||
withAnimation {
|
||||
self.animationPhase = .loading
|
||||
}
|
||||
case "Unopened":
|
||||
withAnimation {
|
||||
self.animationPhase = .ready
|
||||
}
|
||||
default:
|
||||
// 其他状态不处理
|
||||
withAnimation {
|
||||
self.animationPhase = .ready
|
||||
}
|
||||
break
|
||||
NavigationStack(path: $router.path) {
|
||||
// Home entry: show the BlindBox home (all)
|
||||
BlindBoxView(mediaType: .all)
|
||||
.navigationDestination(for: AppRoute.self) { route in
|
||||
route.view
|
||||
}
|
||||
}
|
||||
}
|
||||
// 调用接口
|
||||
loadMedia()
|
||||
}
|
||||
.onDisappear {
|
||||
stopPolling()
|
||||
countdownTimer?.invalidate()
|
||||
countdownTimer = nil
|
||||
|
||||
// Clean up video player
|
||||
videoPlayer?.pause()
|
||||
videoPlayer?.replaceCurrentItem(with: nil)
|
||||
videoPlayer = nil
|
||||
|
||||
NotificationCenter.default.removeObserver(
|
||||
self,
|
||||
name: .blindBoxStatusChanged,
|
||||
object: nil
|
||||
)
|
||||
}
|
||||
|
||||
if showScalingOverlay {
|
||||
MediaOverlayView(
|
||||
videoPlayer: $videoPlayer,
|
||||
showControls: $showControls,
|
||||
mediaType: mediaType,
|
||||
displayImage: displayImage,
|
||||
scaledWidth: scaledWidth,
|
||||
scaledHeight: scaledHeight,
|
||||
scale: scale,
|
||||
videoURL: videoURL,
|
||||
imageURL: imageURL,
|
||||
blindGenerate: blindGenerate,
|
||||
onBackTap: {
|
||||
// 导航到BlindOutcomeView
|
||||
if mediaType == .video, !videoURL.isEmpty, let url = URL(string: videoURL) {
|
||||
Router.shared.navigate(to: .blindOutcome(media: .video(url, nil), time: blindGenerate?.videoGenerateTime ?? "hhsdshjsjdhn", description:blindGenerate?.description ?? "informationinformationinformationinformationinformationinformation"))
|
||||
} else if mediaType == .image, let image = displayImage {
|
||||
Router.shared.navigate(to: .blindOutcome(media: .image(image), time: blindGenerate?.videoGenerateTime ?? "hhsdshjsjdhn", description:blindGenerate?.description ?? "informationinformationinformationinformationinformationinformation"))
|
||||
}
|
||||
}
|
||||
)
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.animation(.easeInOut(duration: 1.0), value: scale)
|
||||
.ignoresSafeArea()
|
||||
.onAppear {
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
|
||||
withAnimation(.spring(response: 2.5, dampingFraction: 0.6, blendDuration: 1.0)) {
|
||||
self.scale = 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Original content
|
||||
VStack {
|
||||
VStack(spacing: 20) {
|
||||
if mediaType == .all {
|
||||
BlindBoxNavigationBar(
|
||||
memberProfile: memberProfile,
|
||||
showLogin: showLogin,
|
||||
showUserProfile: showUserProfile
|
||||
)
|
||||
}
|
||||
|
||||
// 标题
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text("Hi! Click And")
|
||||
Text("Open Your First Box~")
|
||||
}
|
||||
.font(Typography.font(for: .smallLargeTitle))
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(Color.themeTextMessageMain)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(.horizontal)
|
||||
.opacity(showScalingOverlay ? 0 : 1)
|
||||
.offset(y: showScalingOverlay ? -UIScreen.main.bounds.height * 0.2 : 0)
|
||||
.animation(.easeInOut(duration: 0.5), value: showScalingOverlay)
|
||||
|
||||
// 盲盒动画
|
||||
BlindBoxAnimationView(
|
||||
mediaType: mediaType,
|
||||
animationPhase: animationPhase,
|
||||
blindCount: blindCount,
|
||||
blindGenerate: blindGenerate,
|
||||
scale: scale,
|
||||
showScalingOverlay: showScalingOverlay,
|
||||
showMedia: showMedia,
|
||||
onBoxTap: {
|
||||
print("点击了盲盒")
|
||||
withAnimation {
|
||||
animationPhase = .opening
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 控制按钮
|
||||
BlindBoxControls(
|
||||
mediaType: mediaType,
|
||||
animationPhase: animationPhase,
|
||||
countdown: countdown,
|
||||
onButtonTap: {
|
||||
if animationPhase == .ready {
|
||||
// 处理准备就绪状态的操作
|
||||
// 导航到订阅页面
|
||||
Router.shared.navigate(to: .subscribe)
|
||||
} else {
|
||||
showUserProfile()
|
||||
}
|
||||
},
|
||||
onCountdownStart: startCountdown
|
||||
)
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.background(Color.themeTextWhiteSecondary)
|
||||
.offset(x: showModal ? UIScreen.main.bounds.width * 0.8 : 0)
|
||||
.animation(.spring(response: 0.6, dampingFraction: 0.8), value: showModal)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
}
|
||||
|
||||
// 用户资料弹窗
|
||||
SlideInModal(
|
||||
isPresented: $showModal,
|
||||
onDismiss: hideUserProfile
|
||||
) {
|
||||
UserProfileModal(
|
||||
showModal: $showModal,
|
||||
showSettings: $showSettings,
|
||||
isMember: $isMember,
|
||||
memberDate: $memberDate
|
||||
)
|
||||
}
|
||||
.offset(x: showSettings ? UIScreen.main.bounds.width : 0)
|
||||
.animation(.spring(response: 0.6, dampingFraction: 0.8), value: showSettings)
|
||||
|
||||
// 设置页面遮罩层
|
||||
ZStack {
|
||||
if showSettings {
|
||||
Color.black.opacity(0.3)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
.onTapGesture(perform: hideSettings)
|
||||
.transition(.opacity)
|
||||
}
|
||||
|
||||
if showSettings {
|
||||
SettingsView(isPresented: $showSettings)
|
||||
.transition(.move(edge: .leading))
|
||||
.zIndex(1)
|
||||
}
|
||||
}
|
||||
.animation(.spring(response: 0.6, dampingFraction: 0.8), value: showSettings)
|
||||
}
|
||||
}
|
||||
.navigationBarBackButtonHidden(true)
|
||||
}
|
||||
/// 显示用户资料弹窗
|
||||
private func showUserProfile() {
|
||||
withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
|
||||
// print("登录记录数量: \(login.count)")
|
||||
// for (index, item) in login.enumerated() {
|
||||
// print("记录 \(index + 1): 邮箱=\(item.email), 姓名=\(item.name)")
|
||||
// }
|
||||
print("当前登录记录：")
|
||||
for (index, item) in login.enumerated() {
|
||||
print("记录 \(index + 1): 邮箱=\(item.email), 姓名=\(item.name)")
|
||||
}
|
||||
showModal.toggle()
|
||||
.environmentObject(router)
|
||||
}
|
||||
}
|
||||
|
||||
/// 隐藏用户资料弹窗
|
||||
private func hideUserProfile() {
|
||||
withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
|
||||
showModal = false
|
||||
}
|
||||
}
|
||||
|
||||
/// 隐藏设置页面
|
||||
private func hideSettings() {
|
||||
withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
|
||||
showSettings = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 预览
|
||||
#Preview {
|
||||
BlindBoxView(mediaType: .video)
|
||||
ContentView()
|
||||
}
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct AvatarBoxView: View {
|
||||
@Environment(\.dismiss) private var dismiss
|
||||
@EnvironmentObject private var router: Router
|
||||
@State private var isAnimating = false
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Background color
|
||||
Color.white
|
||||
.ignoresSafeArea()
|
||||
|
||||
VStack(spacing: 0) {
|
||||
// Navigation Bar
|
||||
HStack {
|
||||
Button(action: {
|
||||
dismiss()
|
||||
}) {
|
||||
Image(systemName: "chevron.left")
|
||||
.font(.system(size: 17, weight: .medium))
|
||||
.foregroundColor(.black)
|
||||
.padding()
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
Text("动画页面")
|
||||
.font(.headline)
|
||||
.foregroundColor(.black)
|
||||
|
||||
Spacer()
|
||||
|
||||
// Invisible spacer to center the title
|
||||
Color.clear
|
||||
.frame(width: 44, height: 44)
|
||||
}
|
||||
.frame(height: 44)
|
||||
.background(Color.white)
|
||||
|
||||
Spacer()
|
||||
|
||||
// Animated Content
|
||||
ZStack {
|
||||
// Pulsing circle animation
|
||||
Circle()
|
||||
.fill(Color.blue.opacity(0.2))
|
||||
.frame(width: 200, height: 200)
|
||||
.scaleEffect(isAnimating ? 1.5 : 1.0)
|
||||
.opacity(isAnimating ? 0.5 : 1.0)
|
||||
.animation(
|
||||
Animation.easeInOut(duration: 1.5)
|
||||
.repeatForever(autoreverses: true),
|
||||
value: isAnimating
|
||||
)
|
||||
|
||||
// Center icon
|
||||
Image(systemName: "sparkles")
|
||||
.font(.system(size: 60))
|
||||
.foregroundColor(.blue)
|
||||
.rotationEffect(.degrees(isAnimating ? 360 : 0))
|
||||
.animation(
|
||||
Animation.linear(duration: 8)
|
||||
.repeatForever(autoreverses: false),
|
||||
value: isAnimating
|
||||
)
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
|
||||
Spacer()
|
||||
|
||||
// Bottom Button
|
||||
Button(action: {
|
||||
router.navigate(to: .feedbackView)
|
||||
}) {
|
||||
Text("Continue")
|
||||
.font(.headline)
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(height: 56)
|
||||
.background(Color.themePrimary)
|
||||
.cornerRadius(25)
|
||||
.padding(.horizontal, 24)
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
}
|
||||
.navigationBarBackButtonHidden(true)
|
||||
.navigationBarHidden(true)
|
||||
.onAppear {
|
||||
isAnimating = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Preview
|
||||
struct AvatarBoxView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
NavigationView {
|
||||
AvatarBoxView()
|
||||
.environmentObject(Router.shared)
|
||||
}
|
||||
.navigationViewStyle(StackNavigationViewStyle())
|
||||
}
|
||||
}
|
||||
@ -1,301 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct FilmStripView: View {
|
||||
@State private var animate = false
|
||||
// 使用SF Symbols名称数组
|
||||
private let symbolNames = [
|
||||
"photo.fill", "heart.fill", "star.fill", "bookmark.fill",
|
||||
"flag.fill", "bell.fill", "tag.fill", "paperplane.fill"
|
||||
]
|
||||
private let targetIndices = [2, 5, 3] // 每条胶片最终停止的位置
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
Color.black.edgesIgnoringSafeArea(.all)
|
||||
|
||||
// 三条胶片带
|
||||
FilmStrip(
|
||||
symbols: symbolNames,
|
||||
targetIndex: targetIndices[0],
|
||||
offset: 0,
|
||||
stripColor: .red
|
||||
)
|
||||
.rotationEffect(.degrees(5))
|
||||
.zIndex(1)
|
||||
|
||||
FilmStrip(
|
||||
symbols: symbolNames,
|
||||
targetIndex: targetIndices[1],
|
||||
offset: 0.3,
|
||||
stripColor: .blue
|
||||
)
|
||||
.rotationEffect(.degrees(-3))
|
||||
.zIndex(2)
|
||||
|
||||
FilmStrip(
|
||||
symbols: symbolNames,
|
||||
targetIndex: targetIndices[2],
|
||||
offset: 0.6,
|
||||
stripColor: .green
|
||||
)
|
||||
.rotationEffect(.degrees(2))
|
||||
.zIndex(3)
|
||||
}
|
||||
.onAppear {
|
||||
withAnimation(
|
||||
.timingCurve(0.2, 0.1, 0.8, 0.9, duration: 4.0)
|
||||
) {
|
||||
animate = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 单个胶片带视图
|
||||
struct FilmStrip: View {
|
||||
let symbols: [String]
|
||||
let targetIndex: Int
|
||||
let offset: Double
|
||||
let stripColor: Color
|
||||
@State private var animate = false
|
||||
|
||||
var body: some View {
|
||||
GeometryReader { geometry in
|
||||
let itemWidth: CGFloat = 100
|
||||
let spacing: CGFloat = 8
|
||||
let totalWidth = itemWidth * CGFloat(symbols.count) + spacing * CGFloat(symbols.count - 1)
|
||||
|
||||
// 胶片背景
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.fill(stripColor.opacity(0.8))
|
||||
.frame(height: 160)
|
||||
.overlay(
|
||||
// 胶片齿孔
|
||||
HStack(spacing: spacing) {
|
||||
ForEach(0..<symbols.count * 3, id: \.self) { index in
|
||||
Circle()
|
||||
.fill(Color.black)
|
||||
.frame(width: 12, height: 12)
|
||||
.offset(y: -75)
|
||||
}
|
||||
}
|
||||
.frame(width: totalWidth * 3),
|
||||
alignment: .leading
|
||||
)
|
||||
.overlay(
|
||||
// 符号内容
|
||||
HStack(spacing: spacing) {
|
||||
ForEach(0..<symbols.count * 3, id: \.self) { index in
|
||||
let actualIndex = index % symbols.count
|
||||
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 6)
|
||||
.fill(Color.white)
|
||||
.frame(width: itemWidth - 10, height: 100)
|
||||
|
||||
Image(systemName: symbols[actualIndex])
|
||||
.font(.system(size: 30))
|
||||
.foregroundColor(stripColor)
|
||||
.shadow(radius: 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
.offset(x: animate ? -CGFloat(targetIndex) * (itemWidth + spacing) - totalWidth : 0)
|
||||
.frame(width: totalWidth * 3),
|
||||
alignment: .leading
|
||||
)
|
||||
}
|
||||
.frame(height: 180)
|
||||
.onAppear {
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + offset) {
|
||||
withAnimation(
|
||||
.timingCurve(0.2, 0.1, 0.8, 0.9, duration: 3.5)
|
||||
) {
|
||||
animate = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 增强版胶片视图（带边框和阴影）
|
||||
struct EnhancedFilmStrip: View {
|
||||
let symbols: [String]
|
||||
let targetIndex: Int
|
||||
let offset: Double
|
||||
let stripColor: Color
|
||||
@State private var animate = false
|
||||
|
||||
var body: some View {
|
||||
GeometryReader { geometry in
|
||||
let itemWidth: CGFloat = 110
|
||||
let spacing: CGFloat = 10
|
||||
let totalWidth = itemWidth * CGFloat(symbols.count) + spacing * CGFloat(symbols.count - 1)
|
||||
|
||||
ZStack {
|
||||
// 胶片阴影
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(Color.black.opacity(0.3))
|
||||
.frame(height: 170)
|
||||
.offset(y: 5)
|
||||
.blur(radius: 3)
|
||||
|
||||
// 胶片主体
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.fill(stripColor)
|
||||
.frame(height: 170)
|
||||
.overlay(
|
||||
// 胶片齿孔
|
||||
HStack(spacing: spacing) {
|
||||
ForEach(0..<symbols.count * 3, id: \.self) { index in
|
||||
VStack {
|
||||
Circle()
|
||||
.fill(Color.black)
|
||||
.frame(width: 14, height: 14)
|
||||
.padding(.top, 8)
|
||||
Spacer()
|
||||
Circle()
|
||||
.fill(Color.black)
|
||||
.frame(width: 14, height: 14)
|
||||
.padding(.bottom, 8)
|
||||
}
|
||||
.frame(height: 170)
|
||||
}
|
||||
}
|
||||
.frame(width: totalWidth * 3),
|
||||
alignment: .leading
|
||||
)
|
||||
|
||||
// 符号内容
|
||||
HStack(spacing: spacing) {
|
||||
ForEach(0..<symbols.count * 3, id: \.self) { index in
|
||||
let actualIndex = index % symbols.count
|
||||
|
||||
ZStack {
|
||||
RoundedRectangle(cornerRadius: 8)
|
||||
.fill(Color.white)
|
||||
.frame(width: itemWidth - 15, height: 110)
|
||||
.shadow(color: .black.opacity(0.2), radius: 3, x: 0, y: 2)
|
||||
|
||||
VStack {
|
||||
Image(systemName: symbols[actualIndex])
|
||||
.font(.system(size: 32, weight: .bold))
|
||||
.foregroundColor(stripColor)
|
||||
|
||||
Text("\(actualIndex + 1)")
|
||||
.font(.caption)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.offset(x: animate ? -CGFloat(targetIndex) * (itemWidth + spacing) - totalWidth : 0)
|
||||
.frame(width: totalWidth * 3)
|
||||
}
|
||||
}
|
||||
.frame(height: 180)
|
||||
.onAppear {
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + offset) {
|
||||
withAnimation(
|
||||
.timingCurve(0.2, 0.1, 0.8, 0.9, duration: 3.5)
|
||||
) {
|
||||
animate = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预览
|
||||
struct FilmStripView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
FilmStripView()
|
||||
}
|
||||
}
|
||||
|
||||
// 使用增强版的视图
|
||||
struct EnhancedFilmStripView: View {
|
||||
@State private var animate = false
|
||||
private let symbolNames = [
|
||||
"camera.fill", "film.fill", "photo.fill", "heart.fill",
|
||||
"star.fill", "bookmark.fill", "flag.fill", "bell.fill"
|
||||
]
|
||||
private let targetIndices = [2, 5, 3]
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
LinearGradient(
|
||||
gradient: Gradient(colors: [Color.blue.opacity(0.8), Color.purple.opacity(0.8)]),
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
|
||||
VStack(spacing: 30) {
|
||||
Text("胶片动效展示")
|
||||
.font(.title)
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(.white)
|
||||
.padding(.top)
|
||||
|
||||
EnhancedFilmStrip(
|
||||
symbols: symbolNames,
|
||||
targetIndex: targetIndices[0],
|
||||
offset: 0,
|
||||
stripColor: .red
|
||||
)
|
||||
.rotationEffect(.degrees(4))
|
||||
|
||||
EnhancedFilmStrip(
|
||||
symbols: symbolNames,
|
||||
targetIndex: targetIndices[1],
|
||||
offset: 0.4,
|
||||
stripColor: .blue
|
||||
)
|
||||
.rotationEffect(.degrees(-2))
|
||||
|
||||
EnhancedFilmStrip(
|
||||
symbols: symbolNames,
|
||||
targetIndex: targetIndices[2],
|
||||
offset: 0.8,
|
||||
stripColor: .green
|
||||
)
|
||||
.rotationEffect(.degrees(3))
|
||||
|
||||
Button("重新播放") {
|
||||
restartAnimation()
|
||||
}
|
||||
.padding()
|
||||
.background(Color.white)
|
||||
.foregroundColor(.blue)
|
||||
.cornerRadius(10)
|
||||
.padding()
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
startAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
private func startAnimation() {
|
||||
withAnimation(
|
||||
.timingCurve(0.2, 0.1, 0.8, 0.9, duration: 4.0)
|
||||
) {
|
||||
animate = true
|
||||
}
|
||||
}
|
||||
|
||||
private func restartAnimation() {
|
||||
animate = false
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
|
||||
startAnimation()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预览增强版
|
||||
struct EnhancedFilmStripView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
EnhancedFilmStripView()
|
||||
}
|
||||
}
|
||||
@ -1,253 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct ReplayableFilmReelAnimation: View {
|
||||
// 控制动画状态的变量
|
||||
@State private var animationProgress: CGFloat = 0
|
||||
@State private var isCatching: Bool = false
|
||||
@State private var isDisappearing: Bool = false
|
||||
@State private var showReplayButton: Bool = false
|
||||
|
||||
// 更长的胶卷图片数据（16帧）
|
||||
private let reelImages: [[String]] = [
|
||||
(0..<16).map { "film1-\($0+1)" }, // 上方倾斜胶卷
|
||||
(0..<16).map { "film2-\($0+1)" }, // 中间正胶卷
|
||||
(0..<16).map { "film3-\($0+1)" } // 下方倾斜胶卷
|
||||
]
|
||||
|
||||
// 两边胶卷的倾斜角度
|
||||
private let topTiltAngle: Double = -7 // 上方胶卷左倾
|
||||
private let bottomTiltAngle: Double = 7 // 下方胶卷右倾
|
||||
|
||||
// 最终要突出显示的图片索引
|
||||
private let targetImageIndex: Int = 8
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// 深色背景增强胶片质感
|
||||
Color(red: 0.08, green: 0.08, blue: 0.08).edgesIgnoringSafeArea(.all)
|
||||
|
||||
// 胶卷层 - 中间正胶卷，上下各一个倾斜胶卷
|
||||
ZStack {
|
||||
// 上方倾斜胶卷（向右移动）
|
||||
FilmReelView1(images: reelImages[0])
|
||||
.rotationEffect(Angle(degrees: topTiltAngle))
|
||||
.offset(x: calculateTopOffset(), y: -200)
|
||||
.opacity(isDisappearing ? 0 : 1)
|
||||
.zIndex(1)
|
||||
|
||||
// 中间正胶卷（向左移动）
|
||||
FilmReelView1(images: reelImages[1])
|
||||
.offset(x: calculateMiddleOffset(), y: 0)
|
||||
.scaleEffect(isCatching ? 1.03 : 1.0)
|
||||
.opacity(isDisappearing ? 0 : 1)
|
||||
.zIndex(2)
|
||||
|
||||
// 下方倾斜胶卷（向右移动）
|
||||
FilmReelView1(images: reelImages[2])
|
||||
.rotationEffect(Angle(degrees: bottomTiltAngle))
|
||||
.offset(x: calculateBottomOffset(), y: 200)
|
||||
.opacity(isDisappearing ? 0 : 1)
|
||||
.zIndex(1)
|
||||
|
||||
// 最终显示的图片
|
||||
if isDisappearing {
|
||||
Image(reelImages[1][targetImageIndex])
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.padding()
|
||||
.transition(.opacity.combined(with: .scale))
|
||||
.zIndex(3)
|
||||
}
|
||||
}
|
||||
|
||||
// 重复播放按钮
|
||||
if showReplayButton {
|
||||
Button(action: resetAndReplay) {
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(Color.black.opacity(0.7))
|
||||
.frame(width: 60, height: 60)
|
||||
.shadow(radius: 10)
|
||||
|
||||
Image(systemName: "arrow.counterclockwise")
|
||||
.foregroundColor(.white)
|
||||
.font(.system(size: 24))
|
||||
}
|
||||
}
|
||||
.position(x: UIScreen.main.bounds.width - 40, y: 40)
|
||||
.transition(.opacity.combined(with: .scale))
|
||||
.zIndex(4)
|
||||
}
|
||||
}
|
||||
.onAppear {
|
||||
startAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
// 重置并重新播放动画
|
||||
private func resetAndReplay() {
|
||||
withAnimation(.easeInOut(duration: 0.5)) {
|
||||
showReplayButton = false
|
||||
isDisappearing = false
|
||||
isCatching = false
|
||||
animationProgress = 0
|
||||
}
|
||||
|
||||
// 延迟一小段时间后重新启动动画
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
|
||||
startAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
// 上方倾斜胶卷偏移量计算（向右移动）
|
||||
private func calculateTopOffset() -> CGFloat {
|
||||
let baseDistance: CGFloat = 1000
|
||||
let speedFactor: CGFloat = 1.0
|
||||
|
||||
return baseDistance * speedFactor * progressCurve()
|
||||
}
|
||||
|
||||
// 中间正胶卷偏移量计算（向左移动）
|
||||
private func calculateMiddleOffset() -> CGFloat {
|
||||
let baseDistance: CGFloat = -1100
|
||||
let speedFactor: CGFloat = 1.05
|
||||
|
||||
return baseDistance * speedFactor * progressCurve()
|
||||
}
|
||||
|
||||
// 下方倾斜胶卷偏移量计算（向右移动）
|
||||
private func calculateBottomOffset() -> CGFloat {
|
||||
let baseDistance: CGFloat = 1000
|
||||
let speedFactor: CGFloat = 0.95
|
||||
|
||||
return baseDistance * speedFactor * progressCurve()
|
||||
}
|
||||
|
||||
// 动画曲线：先慢后快，最后卡顿
|
||||
private func progressCurve() -> CGFloat {
|
||||
if animationProgress < 0.6 {
|
||||
// 初期加速阶段
|
||||
return easeInQuad(animationProgress / 0.6) * 0.7
|
||||
} else if animationProgress < 0.85 {
|
||||
// 高速移动阶段
|
||||
return 0.7 + easeOutQuad((animationProgress - 0.6) / 0.25) * 0.25
|
||||
} else {
|
||||
// 卡顿阶段
|
||||
let t = (animationProgress - 0.85) / 0.15
|
||||
return 0.95 + t * 0.05
|
||||
}
|
||||
}
|
||||
|
||||
// 缓入曲线
|
||||
private func easeInQuad(_ t: CGFloat) -> CGFloat {
|
||||
return t * t
|
||||
}
|
||||
|
||||
// 缓出曲线
|
||||
private func easeOutQuad(_ t: CGFloat) -> CGFloat {
|
||||
return t * (2 - t)
|
||||
}
|
||||
|
||||
// 启动动画序列
|
||||
private func startAnimation() {
|
||||
// 第一阶段：逐渐加速
|
||||
withAnimation(.easeIn(duration: 3.5)) {
|
||||
animationProgress = 0.6
|
||||
}
|
||||
|
||||
// 第二阶段：高速移动
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 3.5) {
|
||||
withAnimation(.linear(duration: 2.5)) {
|
||||
animationProgress = 0.85
|
||||
}
|
||||
|
||||
// 第三阶段：卡顿效果
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 2.5) {
|
||||
withAnimation(.easeOut(duration: 1.8)) {
|
||||
animationProgress = 1.0
|
||||
isCatching = true
|
||||
}
|
||||
|
||||
// 卡顿后重合消失，显示目标图片
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 1.8) {
|
||||
withAnimation(.easeInOut(duration: 0.7)) {
|
||||
isDisappearing = true
|
||||
}
|
||||
|
||||
// 显示重复播放按钮
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {
|
||||
withAnimation(.easeInOut(duration: 0.3)) {
|
||||
showReplayButton = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 电影胶卷视图组件
|
||||
struct FilmReelView1: View {
|
||||
let images: [String]
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 10) {
|
||||
ForEach(images.indices, id: \.self) { index in
|
||||
ZStack {
|
||||
// 胶卷边框
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.stroke(Color.gray, lineWidth: 2)
|
||||
.background(Color(red: 0.15, green: 0.15, blue: 0.15))
|
||||
|
||||
// 图片内容
|
||||
Rectangle()
|
||||
.fill(
|
||||
LinearGradient(
|
||||
gradient: Gradient(colors: [.blue, .indigo]),
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
)
|
||||
.opacity(0.9)
|
||||
.cornerRadius(2)
|
||||
.padding(2)
|
||||
|
||||
// 模拟图片文本
|
||||
Text("\(images[index])")
|
||||
.foregroundColor(.white)
|
||||
.font(.caption2)
|
||||
}
|
||||
.frame(width: 90, height: 130)
|
||||
// 胶卷孔洞
|
||||
.overlay(
|
||||
HStack {
|
||||
VStack(spacing: 6) {
|
||||
ForEach(0..<6) { _ in
|
||||
Circle()
|
||||
.frame(width: 6, height: 6)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
Spacer()
|
||||
VStack(spacing: 6) {
|
||||
ForEach(0..<6) { _ in
|
||||
Circle()
|
||||
.frame(width: 6, height: 6)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预览
|
||||
struct ReplayableFilmReelAnimation_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
ReplayableFilmReelAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,226 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct FilmAnimation1: View {
|
||||
// 设备尺寸
|
||||
private let deviceWidth = UIScreen.main.bounds.width
|
||||
private let deviceHeight = UIScreen.main.bounds.height
|
||||
|
||||
// 动画状态控制
|
||||
@State private var animationProgress: CGFloat = 0.0 // 0-1总进度
|
||||
@State private var isAnimating: Bool = false
|
||||
@State private var animationComplete: Bool = false
|
||||
|
||||
// 胶卷数据
|
||||
private let reelImages: [[String]] = [
|
||||
(0..<150).map { "film1-\($0+1)" }, // 上方胶卷
|
||||
(0..<180).map { "film2-\($0+1)" }, // 中间胶卷（垂直）
|
||||
(0..<150).map { "film3-\($0+1)" } // 下方胶卷
|
||||
]
|
||||
|
||||
// 胶卷参数
|
||||
private let frameWidth: CGFloat = 90
|
||||
private let frameHeight: CGFloat = 130
|
||||
private let frameSpacing: CGFloat = 10
|
||||
private let totalDistance: CGFloat = 2000 // 总移动距离
|
||||
|
||||
// 动画时间参数
|
||||
private let accelerationDuration: Double = 5.0 // 加速阶段时长（0-5s）
|
||||
private let constantSpeedDuration: Double = 6.0 // 匀速+放大阶段时长（5-11s）
|
||||
private var totalDuration: Double { accelerationDuration + constantSpeedDuration }
|
||||
private var scaleStartProgress: CGFloat { accelerationDuration / totalDuration }
|
||||
private let finalScale: CGFloat = 3.0 // 展示完整胶片的缩放比例
|
||||
|
||||
// 对称布局核心参数（重点调整）
|
||||
private let symmetricTiltAngle: Double = 8 // 减小倾斜角度，增强对称感
|
||||
private let verticalOffset: CGFloat = 140 // 减小垂直距离，靠近中间胶卷
|
||||
private let initialMiddleY: CGFloat = 50 // 中间胶卷初始位置上移，缩短与上下距离
|
||||
|
||||
// 上下胶卷与中间胶卷的初始水平偏移（确保视觉对称）
|
||||
private let horizontalOffset: CGFloat = 30
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// 深色背景
|
||||
Color(red: 0.08, green: 0.08, blue: 0.08)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
|
||||
// 上方倾斜胶卷（左高右低，与中间距离适中）
|
||||
FilmReelView3(images: reelImages[0])
|
||||
.rotationEffect(Angle(degrees: -symmetricTiltAngle))
|
||||
.offset(x: topReelPosition - horizontalOffset, y: -verticalOffset) // 水平微调增强对称
|
||||
.opacity(upperLowerOpacity)
|
||||
.zIndex(1)
|
||||
|
||||
// 下方倾斜胶卷（左低右高，与中间距离适中）
|
||||
FilmReelView3(images: reelImages[2])
|
||||
.rotationEffect(Angle(degrees: symmetricTiltAngle))
|
||||
.offset(x: bottomReelPosition + horizontalOffset, y: verticalOffset) // 水平微调增强对称
|
||||
.opacity(upperLowerOpacity)
|
||||
.zIndex(1)
|
||||
|
||||
// 中间胶卷（垂直居中）
|
||||
FilmReelView3(images: reelImages[1])
|
||||
.offset(x: middleReelPosition, y: middleYPosition)
|
||||
.scaleEffect(currentScale)
|
||||
.position(centerPosition)
|
||||
.zIndex(2)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
}
|
||||
.onAppear {
|
||||
startAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 动画逻辑
|
||||
|
||||
private func startAnimation() {
|
||||
guard !isAnimating && !animationComplete else { return }
|
||||
isAnimating = true
|
||||
|
||||
withAnimation(Animation.timingCurve(0.2, 0.0, 0.8, 1.0, duration: totalDuration)) {
|
||||
animationProgress = 1.0
|
||||
}
|
||||
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + totalDuration) {
|
||||
isAnimating = false
|
||||
animationComplete = true
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 动画计算
|
||||
|
||||
private var currentScale: CGFloat {
|
||||
guard animationProgress >= scaleStartProgress else {
|
||||
return 1.0
|
||||
}
|
||||
|
||||
let scalePhaseProgress = (animationProgress - scaleStartProgress) / (1.0 - scaleStartProgress)
|
||||
return 1.0 + (finalScale - 1.0) * scalePhaseProgress
|
||||
}
|
||||
|
||||
// 中间胶卷Y轴位置（微调至更居中）
|
||||
private var middleYPosition: CGFloat {
|
||||
if animationProgress < scaleStartProgress {
|
||||
return initialMiddleY - (initialMiddleY * (animationProgress / scaleStartProgress))
|
||||
} else {
|
||||
return 0 // 5s后精准居中
|
||||
}
|
||||
}
|
||||
|
||||
private var upperLowerOpacity: Double {
|
||||
if animationProgress < scaleStartProgress {
|
||||
return 0.8
|
||||
} else {
|
||||
let fadeProgress = (animationProgress - scaleStartProgress) / (1.0 - scaleStartProgress)
|
||||
return 0.8 * (1.0 - fadeProgress)
|
||||
}
|
||||
}
|
||||
|
||||
private var centerPosition: CGPoint {
|
||||
CGPoint(x: deviceWidth / 2, y: deviceHeight / 2)
|
||||
}
|
||||
|
||||
// MARK: - 位置计算（确保对称运动）
|
||||
|
||||
private var motionProgress: CGFloat {
|
||||
if animationProgress < scaleStartProgress {
|
||||
let t = animationProgress / scaleStartProgress
|
||||
return t * t // 加速阶段
|
||||
} else {
|
||||
return 1.0 + (animationProgress - scaleStartProgress) *
|
||||
(scaleStartProgress / (1.0 - scaleStartProgress))
|
||||
}
|
||||
}
|
||||
|
||||
// 上方胶卷位置（与下方保持对称速度）
|
||||
private var topReelPosition: CGFloat {
|
||||
totalDistance * 0.9 * motionProgress
|
||||
}
|
||||
|
||||
// 中间胶卷位置（主视觉移动）
|
||||
private var middleReelPosition: CGFloat {
|
||||
-totalDistance * 1.2 * motionProgress
|
||||
}
|
||||
|
||||
// 下方胶卷位置（与上方保持对称速度）
|
||||
private var bottomReelPosition: CGFloat {
|
||||
totalDistance * 0.9 * motionProgress // 与上方速度完全一致
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 胶卷组件
|
||||
|
||||
struct FilmReelView3: View {
|
||||
let images: [String]
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 10) {
|
||||
ForEach(images.indices, id: \.self) { index in
|
||||
FilmFrameView3(imageName: images[index])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct FilmFrameView3: View {
|
||||
let imageName: String
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// 胶卷边框
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.stroke(Color.gray, lineWidth: 2)
|
||||
.background(Color(red: 0.15, green: 0.15, blue: 0.15))
|
||||
|
||||
// 帧内容
|
||||
Rectangle()
|
||||
.fill(gradientColor)
|
||||
.cornerRadius(2)
|
||||
.padding(2)
|
||||
|
||||
// 帧标识
|
||||
Text(imageName)
|
||||
.foregroundColor(.white)
|
||||
.font(.caption2)
|
||||
}
|
||||
.frame(width: 90, height: 130)
|
||||
// 胶卷孔洞
|
||||
.overlay(
|
||||
HStack {
|
||||
VStack(spacing: 6) {
|
||||
ForEach(0..<6) { _ in
|
||||
Circle()
|
||||
.frame(width: 6, height: 6)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
Spacer()
|
||||
VStack(spacing: 6) {
|
||||
ForEach(0..<6) { _ in
|
||||
Circle()
|
||||
.frame(width: 6, height: 6)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
private var gradientColor: LinearGradient {
|
||||
if imageName.hasPrefix("film1") {
|
||||
return LinearGradient(gradient: Gradient(colors: [.blue, .indigo]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
} else if imageName.hasPrefix("film2") {
|
||||
return LinearGradient(gradient: Gradient(colors: [.yellow, .orange]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
} else {
|
||||
return LinearGradient(gradient: Gradient(colors: [.teal, .cyan]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预览
|
||||
struct FilmAnimation_Previews3: PreviewProvider {
|
||||
static var previews: some View {
|
||||
FilmAnimation1()
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,140 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
// MARK: - 主视图：电影胶卷盲盒动效
|
||||
struct FilmStripBlindBoxView: View {
|
||||
@State private var isAnimating = false
|
||||
@State private var revealCenter = false
|
||||
|
||||
// 三格盲盒内容（使用 SF Symbols 模拟不同“隐藏款”）
|
||||
let boxContents = ["popcorn", "star", "music.note"]
|
||||
|
||||
var body: some View {
|
||||
GeometryReader { geometry in
|
||||
let width = geometry.size.width
|
||||
|
||||
ZStack {
|
||||
// 左边盲盒胶卷帧
|
||||
BlindBoxFrame(symbol: boxContents[0])
|
||||
.offset(x: isAnimating ? -width / 4 : -width)
|
||||
.opacity(isAnimating ? 1 : 0)
|
||||
|
||||
// 中间盲盒胶卷帧（最终放大）
|
||||
BlindBoxFrame(symbol: boxContents[1])
|
||||
.scaleEffect(revealCenter ? 1.6 : 1)
|
||||
.offset(x: isAnimating ? 0 : width)
|
||||
.opacity(isAnimating ? 1 : 0)
|
||||
|
||||
// 右边盲盒胶卷帧
|
||||
BlindBoxFrame(symbol: boxContents[2])
|
||||
.offset(x: isAnimating ? width / 4 : width * 1.5)
|
||||
.opacity(isAnimating ? 1 : 0)
|
||||
}
|
||||
.onAppear {
|
||||
// 第一阶段：胶卷滑入
|
||||
withAnimation(.easeOut(duration: 1.0)) {
|
||||
isAnimating = true
|
||||
}
|
||||
|
||||
// 第二阶段：中间帧“开盒”放大
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 1.2) {
|
||||
withAnimation(
|
||||
.interpolatingSpring(stiffness: 80, damping: 12).delay(0.3)
|
||||
) {
|
||||
revealCenter = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame(height: 140)
|
||||
.padding()
|
||||
.background(Color.black.opacity(0.05))
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 盲盒胶卷帧：带孔 + 橙色背景 + SF Symbol
|
||||
struct BlindBoxFrame: View {
|
||||
let symbol: String
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// 胶片边框（橙色 + 打孔）
|
||||
FilmBorder()
|
||||
|
||||
// SF Symbol 作为“盲盒内容”
|
||||
Image(systemName: symbol)
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.foregroundColor(.white.opacity(0.85))
|
||||
.frame(width: 60, height: 60)
|
||||
}
|
||||
.frame(width: 120, height: 120)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 胶片边框：#FFB645 背景 + 打孔
|
||||
struct FilmBorder: View {
|
||||
var body: some View {
|
||||
Canvas { context, size in
|
||||
let w = size.width
|
||||
let h = size.height
|
||||
|
||||
// 背景色：FFB645
|
||||
let bgColor = Color(hex: 0xFFB645)
|
||||
context.fill(Path(CGRect(origin: .zero, size: size)), with: .color(bgColor))
|
||||
|
||||
// 打孔参数
|
||||
let holeRadius: CGFloat = 3.5
|
||||
let margin: CGFloat = 12
|
||||
let holeYOffset: CGFloat = h * 0.25
|
||||
|
||||
// 左侧打孔（3个）
|
||||
for i in 0..<3 {
|
||||
let y = CGFloat(i + 1) * (h / 4)
|
||||
context.fill(
|
||||
Path(ellipseIn: CGRect(
|
||||
x: margin - holeRadius * 2,
|
||||
y: y - holeRadius,
|
||||
width: holeRadius * 2,
|
||||
height: holeRadius * 2
|
||||
)),
|
||||
with: .color(.black)
|
||||
)
|
||||
}
|
||||
|
||||
// 右侧打孔（3个）
|
||||
for i in 0..<3 {
|
||||
let y = CGFloat(i + 1) * (h / 4)
|
||||
context.fill(
|
||||
Path(ellipseIn: CGRect(
|
||||
x: w - margin,
|
||||
y: y - holeRadius,
|
||||
width: holeRadius * 2,
|
||||
height: holeRadius * 2
|
||||
)),
|
||||
with: .color(.black)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Color 扩展：支持 HEX 颜色
|
||||
extension Color {
|
||||
init(hex: UInt) {
|
||||
self.init(
|
||||
.sRGB,
|
||||
red: Double((hex >> 16) & 0xff) / 255,
|
||||
green: Double((hex >> 8) & 0xff) / 255,
|
||||
blue: Double(hex & 0xff) / 255,
|
||||
opacity: 1.0
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 预览
|
||||
struct FilmStripBlindBoxView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
FilmStripBlindBoxView()
|
||||
.preferredColorScheme(.dark)
|
||||
}
|
||||
}
|
||||
@ -1,222 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct FilmAnimation5: View {
|
||||
// 设备尺寸
|
||||
private let deviceWidth = UIScreen.main.bounds.width
|
||||
private let deviceHeight = UIScreen.main.bounds.height
|
||||
|
||||
// 动画状态控制
|
||||
@State private var animationProgress: CGFloat = 0.0 // 0-1总进度
|
||||
@State private var isAnimating: Bool = false
|
||||
@State private var animationComplete: Bool = false
|
||||
|
||||
// 胶卷数据
|
||||
private let reelImages: [[String]] = [
|
||||
(0..<150).map { "film1-\($0+1)" }, // 上方倾斜胶卷
|
||||
(0..<180).map { "film2-\($0+1)" }, // 中间胶卷
|
||||
(0..<150).map { "film3-\($0+1)" } // 下方倾斜胶卷
|
||||
]
|
||||
|
||||
// 胶卷参数
|
||||
private let frameWidth: CGFloat = 90
|
||||
private let frameHeight: CGFloat = 130
|
||||
private let totalDistance: CGFloat = 1800 // 总移动距离
|
||||
|
||||
// 动画阶段时间参数（核心调整）
|
||||
private let accelerationDuration: Double = 5.0 // 0-5s加速
|
||||
private let constantSpeedDuration: Double = 1.0 // 5-6s匀速移动
|
||||
private let scaleDuration: Double = 2.0 // 6-8s共同放大
|
||||
private var totalDuration: Double { accelerationDuration + constantSpeedDuration + scaleDuration }
|
||||
|
||||
// 各阶段进度阈值
|
||||
private var accelerationEnd: CGFloat { accelerationDuration / totalDuration }
|
||||
private var constantSpeedEnd: CGFloat { (accelerationDuration + constantSpeedDuration) / totalDuration }
|
||||
|
||||
// 对称倾斜参数
|
||||
private let symmetricTiltAngle: Double = 10 // 上下胶卷对称倾斜角度
|
||||
private let verticalOffset: CGFloat = 120 // 上下胶卷垂直距离（对称）
|
||||
private let finalScale: CGFloat = 4.0 // 最终放大倍数
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// 深色背景
|
||||
Color(red: 0.08, green: 0.08, blue: 0.08)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
|
||||
// 上方倾斜胶卷（向右移动）
|
||||
FilmReelView5(images: reelImages[0])
|
||||
.rotationEffect(Angle(degrees: -symmetricTiltAngle))
|
||||
.offset(x: topReelPosition, y: -verticalOffset)
|
||||
.scaleEffect(currentScale)
|
||||
.opacity(upperLowerOpacity)
|
||||
.zIndex(2)
|
||||
|
||||
// 下方倾斜胶卷（向右移动）
|
||||
FilmReelView5(images: reelImages[2])
|
||||
.rotationEffect(Angle(degrees: symmetricTiltAngle))
|
||||
.offset(x: bottomReelPosition, y: verticalOffset)
|
||||
.scaleEffect(currentScale)
|
||||
.opacity(upperLowerOpacity)
|
||||
.zIndex(2)
|
||||
|
||||
// 中间胶卷（向左移动，最终保留）
|
||||
FilmReelView5(images: reelImages[1])
|
||||
.offset(x: middleReelPosition, y: 0)
|
||||
.scaleEffect(currentScale)
|
||||
.opacity(1.0) // 始终不透明
|
||||
.zIndex(1)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
}
|
||||
.onAppear {
|
||||
startAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 动画逻辑
|
||||
|
||||
private func startAnimation() {
|
||||
guard !isAnimating && !animationComplete else { return }
|
||||
isAnimating = true
|
||||
|
||||
// 分阶段动画曲线：先加速后匀速
|
||||
withAnimation(Animation.timingCurve(0.3, 0.0, 0.7, 1.0, duration: totalDuration)) {
|
||||
animationProgress = 1.0
|
||||
}
|
||||
|
||||
// 动画结束标记
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + totalDuration) {
|
||||
isAnimating = false
|
||||
animationComplete = true
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 动画计算
|
||||
|
||||
// 共同放大比例（6s后开始放大）
|
||||
private var currentScale: CGFloat {
|
||||
guard animationProgress >= constantSpeedEnd else {
|
||||
return 1.0 // 前6s保持原尺寸
|
||||
}
|
||||
|
||||
// 放大阶段相对进度（0-1）
|
||||
let scalePhaseProgress = (animationProgress - constantSpeedEnd) / (1.0 - constantSpeedEnd)
|
||||
return 1.0 + (finalScale - 1.0) * scalePhaseProgress
|
||||
}
|
||||
|
||||
// 上下胶卷透明度（放大阶段逐渐隐藏）
|
||||
private var upperLowerOpacity: Double {
|
||||
guard animationProgress >= constantSpeedEnd else {
|
||||
return 0.8 // 前6s保持可见
|
||||
}
|
||||
|
||||
// 放大阶段同步淡出
|
||||
let fadeProgress = (animationProgress - constantSpeedEnd) / (1.0 - constantSpeedEnd)
|
||||
return 0.8 * (1.0 - fadeProgress)
|
||||
}
|
||||
|
||||
// MARK: - 移动速度控制（确保匀速阶段速度一致）
|
||||
|
||||
private var motionProgress: CGFloat {
|
||||
if animationProgress < accelerationEnd {
|
||||
// 0-5s加速阶段：二次方曲线加速
|
||||
let t = animationProgress / accelerationEnd
|
||||
return t * t
|
||||
} else {
|
||||
// 5s后匀速阶段：保持最大速度
|
||||
return 1.0 + (animationProgress - accelerationEnd) *
|
||||
(accelerationEnd / (1.0 - accelerationEnd))
|
||||
}
|
||||
}
|
||||
|
||||
// 上方胶卷位置（向右移动）
|
||||
private var topReelPosition: CGFloat {
|
||||
totalDistance * 0.8 * motionProgress
|
||||
}
|
||||
|
||||
// 中间胶卷位置（向左移动）
|
||||
private var middleReelPosition: CGFloat {
|
||||
-totalDistance * 0.8 * motionProgress // 与上下胶卷速度大小相同，方向相反
|
||||
}
|
||||
|
||||
// 下方胶卷位置（向右移动）
|
||||
private var bottomReelPosition: CGFloat {
|
||||
totalDistance * 0.8 * motionProgress // 与上方胶卷速度完全一致，保持对称
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 胶卷组件
|
||||
|
||||
struct FilmReelView5: View {
|
||||
let images: [String]
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 10) {
|
||||
ForEach(images.indices, id: \.self) { index in
|
||||
FilmFrameView5(imageName: images[index])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct FilmFrameView5: View {
|
||||
let imageName: String
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// 胶卷边框
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.stroke(Color.gray, lineWidth: 2)
|
||||
.background(Color(red: 0.15, green: 0.15, blue: 0.15))
|
||||
|
||||
// 帧内容
|
||||
Rectangle()
|
||||
.fill(gradientColor)
|
||||
.cornerRadius(2)
|
||||
.padding(2)
|
||||
|
||||
// 帧标识
|
||||
Text(imageName)
|
||||
.foregroundColor(.white)
|
||||
.font(.caption2)
|
||||
}
|
||||
.frame(width: 90, height: 130)
|
||||
// 胶卷孔洞
|
||||
.overlay(
|
||||
HStack {
|
||||
VStack(spacing: 6) {
|
||||
ForEach(0..<6) { _ in
|
||||
Circle()
|
||||
.frame(width: 6, height: 6)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
Spacer()
|
||||
VStack(spacing: 6) {
|
||||
ForEach(0..<6) { _ in
|
||||
Circle()
|
||||
.frame(width: 6, height: 6)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
private var gradientColor: LinearGradient {
|
||||
if imageName.hasPrefix("film1") {
|
||||
return LinearGradient(gradient: Gradient(colors: [.blue, .indigo]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
} else if imageName.hasPrefix("film2") {
|
||||
return LinearGradient(gradient: Gradient(colors: [.yellow, .orange]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
} else {
|
||||
return LinearGradient(gradient: Gradient(colors: [.teal, .cyan]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预览
|
||||
struct FilmAnimation_Previews5: PreviewProvider {
|
||||
static var previews: some View {
|
||||
FilmAnimation5()
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,250 +0,0 @@
|
||||
import SwiftUI
|
||||
|
||||
struct FilmAnimation: View {
|
||||
// 设备尺寸
|
||||
private let deviceWidth = UIScreen.main.bounds.width
|
||||
private let deviceHeight = UIScreen.main.bounds.height
|
||||
|
||||
// 动画状态控制
|
||||
@State private var animationProgress: CGFloat = 0.0 // 0-1总进度
|
||||
@State private var isAnimating: Bool = false
|
||||
@State private var animationComplete: Bool = false
|
||||
|
||||
// 胶卷数据
|
||||
private let reelImages: [[String]] = [
|
||||
(0..<300).map { "film1-\($0+1)" }, // 上方胶卷
|
||||
(0..<350).map { "film2-\($0+1)" }, // 中间胶卷
|
||||
(0..<300).map { "film3-\($0+1)" } // 下方胶卷
|
||||
]
|
||||
|
||||
// 胶卷参数
|
||||
private let frameWidth: CGFloat = 90
|
||||
private let frameHeight: CGFloat = 130
|
||||
private let frameSpacing: CGFloat = 12
|
||||
|
||||
// 动画阶段时间参数
|
||||
private let accelerationDuration: Double = 5.0 // 0-5s加速
|
||||
private let constantSpeedDuration: Double = 1.0 // 5-6s匀速
|
||||
private let scaleStartDuration: Double = 1.0 // 6-7s共同放大
|
||||
private let scaleFinishDuration: Double = 1.0 // 7-8s仅中间胶卷放大
|
||||
private var totalDuration: Double {
|
||||
accelerationDuration + constantSpeedDuration + scaleStartDuration + scaleFinishDuration
|
||||
}
|
||||
|
||||
// 各阶段进度阈值
|
||||
private var accelerationEnd: CGFloat { accelerationDuration / totalDuration }
|
||||
private var constantSpeedEnd: CGFloat { (accelerationDuration + constantSpeedDuration) / totalDuration }
|
||||
private var scaleStartEnd: CGFloat {
|
||||
(accelerationDuration + constantSpeedDuration + scaleStartDuration) / totalDuration
|
||||
}
|
||||
|
||||
// 布局与运动参数（核心：对称倾斜角度）
|
||||
private let tiltAngle: Double = 10 // 基础倾斜角度
|
||||
private let upperTilt: Double = -10 // 上方胶卷：左高右低（负角度）
|
||||
private let lowerTilt: Double = 10 // 下方胶卷：左低右高（正角度）
|
||||
private let verticalSpacing: CGFloat = 200 // 上下胶卷垂直间距
|
||||
private let finalScale: CGFloat = 4.5
|
||||
|
||||
// 移动距离参数
|
||||
private let maxTiltedReelMovement: CGFloat = 3500 // 倾斜胶卷最大移动距离
|
||||
private let maxMiddleReelMovement: CGFloat = -3000 // 中间胶卷最大移动距离
|
||||
|
||||
var body: some View {
|
||||
// 固定背景
|
||||
Color(red: 0.08, green: 0.08, blue: 0.08)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
.overlay(
|
||||
ZStack {
|
||||
// 上方倾斜胶卷（左高右低，向右移动）
|
||||
if showTiltedReels {
|
||||
FilmReelView(images: reelImages[0])
|
||||
.rotationEffect(Angle(degrees: upperTilt)) // 左高右低
|
||||
.offset(x: upperReelXPosition, y: -verticalSpacing/2)
|
||||
.scaleEffect(tiltedScale)
|
||||
.opacity(tiltedOpacity)
|
||||
.zIndex(1)
|
||||
}
|
||||
|
||||
// 下方倾斜胶卷（左低右高，向右移动）
|
||||
if showTiltedReels {
|
||||
FilmReelView(images: reelImages[2])
|
||||
.rotationEffect(Angle(degrees: lowerTilt)) // 左低右高
|
||||
.offset(x: lowerReelXPosition, y: verticalSpacing/2)
|
||||
.scaleEffect(tiltedScale)
|
||||
.opacity(tiltedOpacity)
|
||||
.zIndex(1)
|
||||
}
|
||||
|
||||
// 中间胶卷（垂直，向左移动）
|
||||
FilmReelView(images: reelImages[1])
|
||||
.offset(x: middleReelXPosition, y: 0)
|
||||
.scaleEffect(middleScale)
|
||||
.opacity(1.0)
|
||||
.zIndex(2)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
}
|
||||
)
|
||||
.onAppear {
|
||||
startAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 动画逻辑
|
||||
|
||||
private func startAnimation() {
|
||||
guard !isAnimating && !animationComplete else { return }
|
||||
isAnimating = true
|
||||
|
||||
withAnimation(Animation.easeInOut(duration: totalDuration)) {
|
||||
animationProgress = 1.0
|
||||
}
|
||||
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + totalDuration) {
|
||||
isAnimating = false
|
||||
animationComplete = true
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 位置计算（确保向右移动）
|
||||
|
||||
// 上方倾斜胶卷X位置
|
||||
private var upperReelXPosition: CGFloat {
|
||||
let startPosition: CGFloat = -deviceWidth * 1.2 // 左侧屏幕外起始
|
||||
return startPosition + (maxTiltedReelMovement * movementProgress)
|
||||
}
|
||||
|
||||
// 下方倾斜胶卷X位置
|
||||
private var lowerReelXPosition: CGFloat {
|
||||
let startPosition: CGFloat = -deviceWidth * 0.8 // 稍右于上方胶卷起始
|
||||
return startPosition + (maxTiltedReelMovement * movementProgress)
|
||||
}
|
||||
|
||||
// 中间胶卷X位置
|
||||
private var middleReelXPosition: CGFloat {
|
||||
let startPosition: CGFloat = deviceWidth * 0.3
|
||||
return startPosition + (maxMiddleReelMovement * movementProgress)
|
||||
}
|
||||
|
||||
// 移动进度（0-1）
|
||||
private var movementProgress: CGFloat {
|
||||
if animationProgress < constantSpeedEnd {
|
||||
return animationProgress / constantSpeedEnd
|
||||
} else {
|
||||
return 1.0 // 6秒后停止移动
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 缩放与显示控制
|
||||
|
||||
// 中间胶卷缩放
|
||||
private var middleScale: CGFloat {
|
||||
guard animationProgress >= constantSpeedEnd else {
|
||||
return 1.0
|
||||
}
|
||||
|
||||
let scalePhaseProgress = (animationProgress - constantSpeedEnd) / (1.0 - constantSpeedEnd)
|
||||
return 1.0 + (finalScale - 1.0) * scalePhaseProgress
|
||||
}
|
||||
|
||||
// 倾斜胶卷缩放
|
||||
private var tiltedScale: CGFloat {
|
||||
guard animationProgress >= constantSpeedEnd, animationProgress < scaleStartEnd else {
|
||||
return 1.0
|
||||
}
|
||||
|
||||
let scalePhaseProgress = (animationProgress - constantSpeedEnd) / (scaleStartEnd - constantSpeedEnd)
|
||||
return 1.0 + (finalScale * 0.6 - 1.0) * scalePhaseProgress
|
||||
}
|
||||
|
||||
// 倾斜胶卷透明度
|
||||
private var tiltedOpacity: Double {
|
||||
guard animationProgress >= constantSpeedEnd, animationProgress < scaleStartEnd else {
|
||||
return 0.8
|
||||
}
|
||||
|
||||
let fadeProgress = (animationProgress - constantSpeedEnd) / (scaleStartEnd - constantSpeedEnd)
|
||||
return 0.8 * (1.0 - fadeProgress)
|
||||
}
|
||||
|
||||
// 控制倾斜胶卷显示
|
||||
private var showTiltedReels: Bool {
|
||||
animationProgress < scaleStartEnd
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 胶卷组件
|
||||
|
||||
struct FilmReelView: View {
|
||||
let images: [String]
|
||||
|
||||
var body: some View {
|
||||
HStack(spacing: 12) {
|
||||
ForEach(images.indices, id: \.self) { index in
|
||||
FilmFrameView(imageName: images[index])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct FilmFrameView: View {
|
||||
let imageName: String
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// 胶卷边框
|
||||
RoundedRectangle(cornerRadius: 4)
|
||||
.stroke(Color.gray, lineWidth: 2)
|
||||
.background(Color(red: 0.15, green: 0.15, blue: 0.15))
|
||||
|
||||
// 帧内容
|
||||
Rectangle()
|
||||
.fill(gradientColor)
|
||||
.cornerRadius(2)
|
||||
.padding(2)
|
||||
|
||||
// 帧标识
|
||||
Text(imageName)
|
||||
.foregroundColor(.white)
|
||||
.font(.caption2)
|
||||
}
|
||||
.frame(width: 90, height: 130)
|
||||
// 胶卷孔洞
|
||||
.overlay(
|
||||
HStack {
|
||||
VStack(spacing: 6) {
|
||||
ForEach(0..<6) { _ in
|
||||
Circle()
|
||||
.frame(width: 6, height: 6)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
Spacer()
|
||||
VStack(spacing: 6) {
|
||||
ForEach(0..<6) { _ in
|
||||
Circle()
|
||||
.frame(width: 6, height: 6)
|
||||
.foregroundColor(.gray)
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
private var gradientColor: LinearGradient {
|
||||
if imageName.hasPrefix("film1") {
|
||||
return LinearGradient(gradient: Gradient(colors: [.blue, .indigo]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
} else if imageName.hasPrefix("film2") {
|
||||
return LinearGradient(gradient: Gradient(colors: [.yellow, .orange]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
} else {
|
||||
return LinearGradient(gradient: Gradient(colors: [.purple, .pink]), startPoint: .topLeading, endPoint: .bottomTrailing)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 预览
|
||||
struct FilmAnimation_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
FilmAnimation()
|
||||
}
|
||||
}
|
||||
|
||||
558
wake/View/BlindBox/BlindBoxView.swift
Normal file
558
wake/View/BlindBox/BlindBoxView.swift
Normal file
@ -0,0 +1,558 @@
|
||||
import SwiftUI
|
||||
import SwiftData
|
||||
import AVKit
|
||||
|
||||
// MARK: - Notification Names
|
||||
extension Notification.Name {
|
||||
static let blindBoxStatusChanged = Notification.Name("blindBoxStatusChanged")
|
||||
}
|
||||
|
||||
struct BlindBoxView: View {
|
||||
let mediaType: BlindBoxMediaType
|
||||
@State private var showModal = false // 控制用户资料弹窗显示
|
||||
@State private var showSettings = false // 控制设置页面显示
|
||||
@State private var isMember = false // 是否是会员
|
||||
@State private var memberDate = "" // 会员到期时间
|
||||
@State private var showLogin = false
|
||||
@State private var memberProfile: MemberProfile? = nil
|
||||
@State private var blindCount: BlindCount? = nil
|
||||
@State private var blindList: [BlindList] = [] // Changed to array
|
||||
// 生成盲盒
|
||||
@State private var blindGenerate : BlindBoxData?
|
||||
@State private var showLottieAnimation = true
|
||||
// 轮询接口
|
||||
@State private var isPolling = false
|
||||
@State private var pollingTimer: Timer?
|
||||
@State private var currentBoxType: String = ""
|
||||
// 盲盒链接
|
||||
@State private var videoURL: String = ""
|
||||
@State private var imageURL: String = ""
|
||||
// 按钮状态 倒计时
|
||||
@State private var countdown: (minutes: Int, seconds: Int, milliseconds: Int) = (36, 50, 20)
|
||||
@State private var countdownTimer: Timer?
|
||||
// 盲盒数据
|
||||
@State private var displayData: BlindBoxData? = nil
|
||||
@State private var showScalingOverlay = false
|
||||
@State private var animationPhase: BlindBoxAnimationPhase = .loading
|
||||
@State private var scale: CGFloat = 0.1
|
||||
@State private var videoPlayer: AVPlayer?
|
||||
@State private var showControls = false
|
||||
@State private var isAnimating = true
|
||||
@State private var aspectRatio: CGFloat = 1.0
|
||||
@State private var isPortrait: Bool = false
|
||||
@State private var displayImage: UIImage?
|
||||
@State private var showMedia = false
|
||||
|
||||
// 查询数据 - 简单查询
|
||||
@Query private var login: [Login]
|
||||
|
||||
init(mediaType: BlindBoxMediaType) {
|
||||
self.mediaType = mediaType
|
||||
}
|
||||
|
||||
// 倒计时
|
||||
private func startCountdown() {
|
||||
// 重置为36:50:20
|
||||
countdown = (36, 50, 20)
|
||||
|
||||
countdownTimer?.invalidate()
|
||||
countdownTimer = Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
|
||||
var (minutes, seconds, milliseconds) = countdown
|
||||
|
||||
// 更新毫秒
|
||||
milliseconds -= 10
|
||||
if milliseconds < 0 {
|
||||
milliseconds = 90
|
||||
seconds -= 1
|
||||
}
|
||||
|
||||
// 更新秒
|
||||
if seconds < 0 {
|
||||
seconds = 59
|
||||
minutes -= 1
|
||||
}
|
||||
|
||||
// 如果倒计时结束，停止计时器
|
||||
if minutes <= 0 && seconds <= 0 && milliseconds <= 0 {
|
||||
countdownTimer?.invalidate()
|
||||
countdownTimer = nil
|
||||
return
|
||||
}
|
||||
|
||||
countdown = (minutes, seconds, milliseconds)
|
||||
}
|
||||
}
|
||||
|
||||
private func loadMedia() {
|
||||
print("loadMedia called with mediaType: \(mediaType)")
|
||||
|
||||
switch mediaType {
|
||||
case .video:
|
||||
loadVideo()
|
||||
currentBoxType = "Video"
|
||||
startPolling()
|
||||
case .image:
|
||||
loadImage()
|
||||
currentBoxType = "Image"
|
||||
startPolling()
|
||||
case .all:
|
||||
print("Loading all content...")
|
||||
// 会员信息
|
||||
NetworkService.shared.get(
|
||||
path: "/membership/personal-center-info",
|
||||
parameters: nil
|
||||
) { (result: Result<MemberProfileResponse, NetworkError>) in
|
||||
DispatchQueue.main.async {
|
||||
switch result {
|
||||
case .success(let response):
|
||||
self.memberProfile = response.data
|
||||
self.isMember = response.data.membershipLevel == "Pioneer"
|
||||
self.memberDate = response.data.membershipEndAt ?? ""
|
||||
print("✅ 成功获取会员信息:", response.data)
|
||||
print("✅ 用户ID:", response.data.userInfo.userId)
|
||||
case .failure(let error):
|
||||
print("❌ 获取会员信息失败:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 盲盒数量
|
||||
NetworkService.shared.get(
|
||||
path: "/blind_box/available/quantity",
|
||||
parameters: nil
|
||||
) { (result: Result<APIResponse<BlindCount>, NetworkError>) in
|
||||
DispatchQueue.main.async {
|
||||
switch result {
|
||||
case .success(let response):
|
||||
self.blindCount = response.data
|
||||
print("✅ 成功获取盲盒数量:", response.data)
|
||||
case .failure(let error):
|
||||
print("❌ 获取数量失败:", error)
|
||||
}
|
||||
}
|
||||
}
|
||||
// 盲盒列表
|
||||
NetworkService.shared.get(
|
||||
path: "/blind_boxs/query",
|
||||
parameters: nil
|
||||
) { (result: Result<APIResponse<[BlindList]>, NetworkError>) in
|
||||
DispatchQueue.main.async {
|
||||
switch result {
|
||||
case .success(let response):
|
||||
self.blindList = response.data ?? []
|
||||
// 如果列表为空数组 设置盲盒状态为none
|
||||
if self.blindList.isEmpty {
|
||||
self.animationPhase = .none
|
||||
}
|
||||
print("✅ 成功获取 \(self.blindList.count) 个盲盒")
|
||||
case .failure(let error):
|
||||
self.blindList = []
|
||||
self.animationPhase = .none
|
||||
print("❌ 获取盲盒列表失败:", error.localizedDescription)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 轮询接口
|
||||
private func startPolling() {
|
||||
stopPolling()
|
||||
isPolling = true
|
||||
checkBlindBoxStatus()
|
||||
}
|
||||
|
||||
private func stopPolling() {
|
||||
pollingTimer?.invalidate()
|
||||
pollingTimer = nil
|
||||
isPolling = false
|
||||
}
|
||||
|
||||
private func checkBlindBoxStatus() {
|
||||
guard !currentBoxType.isEmpty else {
|
||||
stopPolling()
|
||||
return
|
||||
}
|
||||
|
||||
NetworkService.shared.postWithToken(
|
||||
path: "/blind_box/generate/mock",
|
||||
parameters: ["box_type": currentBoxType]
|
||||
) { (result: Result<APIResponse<BlindBoxData>, NetworkError>) in
|
||||
DispatchQueue.main.async {
|
||||
switch result {
|
||||
case .success(let response):
|
||||
let data = response.data
|
||||
self.blindGenerate = data
|
||||
print("当前盲盒状态: \(data.status)")
|
||||
// 更新显示数据
|
||||
if self.mediaType == .all, let firstItem = self.blindList.first {
|
||||
self.displayData = BlindBoxData(from: firstItem)
|
||||
} else {
|
||||
self.displayData = data
|
||||
}
|
||||
|
||||
// 发送状态变更通知
|
||||
NotificationCenter.default.post(
|
||||
name: .blindBoxStatusChanged,
|
||||
object: nil,
|
||||
userInfo: ["status": data.status]
|
||||
)
|
||||
|
||||
if data.status != "Preparing" {
|
||||
self.stopPolling()
|
||||
print("✅ 盲盒准备就绪，状态: \(data.status)")
|
||||
if self.mediaType == .video {
|
||||
self.videoURL = data.url ?? ""
|
||||
} else if self.mediaType == .image {
|
||||
self.imageURL = data.url ?? ""
|
||||
}
|
||||
} else {
|
||||
self.pollingTimer = Timer.scheduledTimer(
|
||||
withTimeInterval: 2.0,
|
||||
repeats: false
|
||||
) { _ in
|
||||
self.checkBlindBoxStatus()
|
||||
}
|
||||
}
|
||||
case .failure(let error):
|
||||
print("❌ 获取盲盒状态失败: \(error.localizedDescription)")
|
||||
self.stopPolling()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private func loadImage() {
|
||||
guard !imageURL.isEmpty, let url = URL(string: imageURL) else {
|
||||
print("⚠️ 图片URL无效或为空")
|
||||
return
|
||||
}
|
||||
|
||||
URLSession.shared.dataTask(with: url) { data, _, _ in
|
||||
if let data = data, let image = UIImage(data: data) {
|
||||
DispatchQueue.main.async {
|
||||
self.displayImage = image
|
||||
self.aspectRatio = image.size.width / image.size.height
|
||||
self.isPortrait = image.size.height > image.size.width
|
||||
self.showScalingOverlay = true // 确保显示媒体内容
|
||||
}
|
||||
}
|
||||
}.resume()
|
||||
}
|
||||
|
||||
private func loadVideo() {
|
||||
guard !videoURL.isEmpty, let url = URL(string: videoURL) else {
|
||||
print("⚠️ 视频URL无效或为空")
|
||||
return
|
||||
}
|
||||
|
||||
let asset = AVAsset(url: url)
|
||||
let playerItem = AVPlayerItem(asset: asset)
|
||||
let player = AVPlayer(playerItem: playerItem)
|
||||
|
||||
let videoTracks = asset.tracks(withMediaType: .video)
|
||||
if let videoTrack = videoTracks.first {
|
||||
let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform)
|
||||
let width = abs(size.width)
|
||||
let height = abs(size.height)
|
||||
|
||||
aspectRatio = width / height
|
||||
isPortrait = height > width
|
||||
}
|
||||
|
||||
// 更新视频播放器
|
||||
videoPlayer = player
|
||||
videoPlayer?.play()
|
||||
showScalingOverlay = true // 确保显示媒体内容
|
||||
}
|
||||
|
||||
private func prepareVideo() {
|
||||
guard !videoURL.isEmpty, let url = URL(string: videoURL) else {
|
||||
print("⚠️ 视频URL无效或为空")
|
||||
return
|
||||
}
|
||||
|
||||
let asset = AVAsset(url: url)
|
||||
let playerItem = AVPlayerItem(asset: asset)
|
||||
let player = AVPlayer(playerItem: playerItem)
|
||||
|
||||
let videoTracks = asset.tracks(withMediaType: .video)
|
||||
if let videoTrack = videoTracks.first {
|
||||
let size = videoTrack.naturalSize.applying(videoTrack.preferredTransform)
|
||||
let width = abs(size.width)
|
||||
let height = abs(size.height)
|
||||
|
||||
aspectRatio = width / height
|
||||
isPortrait = height > width
|
||||
}
|
||||
|
||||
// 更新视频播放器
|
||||
videoPlayer = player
|
||||
}
|
||||
|
||||
private func prepareImage() {
|
||||
guard !imageURL.isEmpty, let url = URL(string: imageURL) else {
|
||||
print("⚠️ 图片URL无效或为空")
|
||||
return
|
||||
}
|
||||
|
||||
URLSession.shared.dataTask(with: url) { data, _, _ in
|
||||
if let data = data, let image = UIImage(data: data) {
|
||||
DispatchQueue.main.async {
|
||||
self.displayImage = image
|
||||
self.aspectRatio = image.size.width / image.size.height
|
||||
self.isPortrait = image.size.height > image.size.width
|
||||
}
|
||||
}
|
||||
}.resume()
|
||||
}
|
||||
|
||||
private func startScalingAnimation() {
|
||||
self.scale = 0.1
|
||||
self.showScalingOverlay = true
|
||||
|
||||
withAnimation(.spring(response: 2.0, dampingFraction: 0.5, blendDuration: 0.8)) {
|
||||
self.scale = 1.0
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Computed Properties
|
||||
private var scaledWidth: CGFloat {
|
||||
if isPortrait {
|
||||
return UIScreen.main.bounds.height * scale * 1/aspectRatio
|
||||
} else {
|
||||
return UIScreen.main.bounds.width * scale
|
||||
}
|
||||
}
|
||||
|
||||
private var scaledHeight: CGFloat {
|
||||
if isPortrait {
|
||||
return UIScreen.main.bounds.height * scale
|
||||
} else {
|
||||
return UIScreen.main.bounds.width * scale * 1/aspectRatio
|
||||
}
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
Color.themeTextWhiteSecondary.ignoresSafeArea()
|
||||
.onAppear {
|
||||
print("🎯 BlindBoxView appeared with mediaType: \(mediaType)")
|
||||
print("🎯 Current thread: \(Thread.current)")
|
||||
// 初始化显示数据
|
||||
if mediaType == .all, let firstItem = blindList.first {
|
||||
displayData = BlindBoxData(from: firstItem)
|
||||
} else {
|
||||
displayData = blindGenerate
|
||||
}
|
||||
|
||||
// 添加盲盒状态变化监听
|
||||
NotificationCenter.default.addObserver(
|
||||
forName: .blindBoxStatusChanged,
|
||||
object: nil,
|
||||
queue: .main
|
||||
) { notification in
|
||||
if let status = notification.userInfo?["status"] as? String {
|
||||
switch status {
|
||||
case "Preparing":
|
||||
withAnimation {
|
||||
self.animationPhase = .loading
|
||||
}
|
||||
case "Unopened":
|
||||
withAnimation {
|
||||
self.animationPhase = .ready
|
||||
}
|
||||
default:
|
||||
// 其他状态不处理
|
||||
withAnimation {
|
||||
self.animationPhase = .ready
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
// 调用接口
|
||||
loadMedia()
|
||||
}
|
||||
.onDisappear {
|
||||
stopPolling()
|
||||
countdownTimer?.invalidate()
|
||||
countdownTimer = nil
|
||||
|
||||
// Clean up video player
|
||||
videoPlayer?.pause()
|
||||
videoPlayer?.replaceCurrentItem(with: nil)
|
||||
videoPlayer = nil
|
||||
|
||||
NotificationCenter.default.removeObserver(
|
||||
self,
|
||||
name: .blindBoxStatusChanged,
|
||||
object: nil
|
||||
)
|
||||
}
|
||||
|
||||
if showScalingOverlay {
|
||||
MediaOverlayView(
|
||||
videoPlayer: $videoPlayer,
|
||||
showControls: $showControls,
|
||||
mediaType: mediaType,
|
||||
displayImage: displayImage,
|
||||
scaledWidth: scaledWidth,
|
||||
scaledHeight: scaledHeight,
|
||||
scale: scale,
|
||||
videoURL: videoURL,
|
||||
imageURL: imageURL,
|
||||
blindGenerate: blindGenerate,
|
||||
onBackTap: {
|
||||
// 导航到BlindOutcomeView
|
||||
if mediaType == .video, !videoURL.isEmpty, let url = URL(string: videoURL) {
|
||||
Router.shared.navigate(to: .blindOutcome(media: .video(url, nil), time: blindGenerate?.videoGenerateTime ?? "hhsdshjsjdhn", description:blindGenerate?.description ?? "informationinformationinformationinformationinformationinformation"))
|
||||
} else if mediaType == .image, let image = displayImage {
|
||||
Router.shared.navigate(to: .blindOutcome(media: .image(image), time: blindGenerate?.videoGenerateTime ?? "hhsdshjsjdhn", description:blindGenerate?.description ?? "informationinformationinformationinformationinformationinformation"))
|
||||
}
|
||||
}
|
||||
)
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.animation(.easeInOut(duration: 1.0), value: scale)
|
||||
.ignoresSafeArea()
|
||||
.onAppear {
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
|
||||
withAnimation(.spring(response: 2.5, dampingFraction: 0.6, blendDuration: 1.0)) {
|
||||
self.scale = 1.0
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Original content
|
||||
VStack {
|
||||
VStack(spacing: 20) {
|
||||
if mediaType == .all {
|
||||
BlindBoxNavigationBar(
|
||||
memberProfile: memberProfile,
|
||||
showLogin: showLogin,
|
||||
showUserProfile: showUserProfile
|
||||
)
|
||||
}
|
||||
|
||||
// 标题
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text("Hi! Click And")
|
||||
Text("Open Your First Box~")
|
||||
}
|
||||
.font(Typography.font(for: .smallLargeTitle))
|
||||
.fontWeight(.bold)
|
||||
.foregroundColor(Color.themeTextMessageMain)
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(.horizontal)
|
||||
.opacity(showScalingOverlay ? 0 : 1)
|
||||
.offset(y: showScalingOverlay ? -UIScreen.main.bounds.height * 0.2 : 0)
|
||||
.animation(.easeInOut(duration: 0.5), value: showScalingOverlay)
|
||||
|
||||
// 盲盒动画
|
||||
BlindBoxAnimationView(
|
||||
mediaType: mediaType,
|
||||
animationPhase: animationPhase,
|
||||
blindCount: blindCount,
|
||||
blindGenerate: blindGenerate,
|
||||
scale: scale,
|
||||
showScalingOverlay: showScalingOverlay,
|
||||
showMedia: showMedia,
|
||||
onBoxTap: {
|
||||
print("点击了盲盒")
|
||||
withAnimation {
|
||||
animationPhase = .opening
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// 控制按钮
|
||||
BlindBoxControls(
|
||||
mediaType: mediaType,
|
||||
animationPhase: animationPhase,
|
||||
countdown: countdown,
|
||||
onButtonTap: {
|
||||
if animationPhase == .ready {
|
||||
// 处理准备就绪状态的操作
|
||||
// 导航到订阅页面
|
||||
Router.shared.navigate(to: .subscribe)
|
||||
} else {
|
||||
showUserProfile()
|
||||
}
|
||||
},
|
||||
onCountdownStart: startCountdown
|
||||
)
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.background(Color.themeTextWhiteSecondary)
|
||||
.offset(x: showModal ? UIScreen.main.bounds.width * 0.8 : 0)
|
||||
.animation(.spring(response: 0.6, dampingFraction: 0.8), value: showModal)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
}
|
||||
|
||||
// 用户资料弹窗
|
||||
SlideInModal(
|
||||
isPresented: $showModal,
|
||||
onDismiss: hideUserProfile
|
||||
) {
|
||||
UserProfileModal(
|
||||
showModal: $showModal,
|
||||
showSettings: $showSettings,
|
||||
isMember: $isMember,
|
||||
memberDate: $memberDate
|
||||
)
|
||||
}
|
||||
.offset(x: showSettings ? UIScreen.main.bounds.width : 0)
|
||||
.animation(.spring(response: 0.6, dampingFraction: 0.8), value: showSettings)
|
||||
|
||||
// 设置页面遮罩层
|
||||
ZStack {
|
||||
if showSettings {
|
||||
Color.black.opacity(0.3)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
.onTapGesture(perform: hideSettings)
|
||||
.transition(.opacity)
|
||||
}
|
||||
|
||||
if showSettings {
|
||||
SettingsView(isPresented: $showSettings)
|
||||
.transition(.move(edge: .leading))
|
||||
.zIndex(1)
|
||||
}
|
||||
}
|
||||
.animation(.spring(response: 0.6, dampingFraction: 0.8), value: showSettings)
|
||||
}
|
||||
}
|
||||
.navigationBarBackButtonHidden(true)
|
||||
}
|
||||
/// 显示用户资料弹窗
|
||||
private func showUserProfile() {
|
||||
withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
|
||||
// print("登录记录数量: \(login.count)")
|
||||
// for (index, item) in login.enumerated() {
|
||||
// print("记录 \(index + 1): 邮箱=\(item.email), 姓名=\(item.name)")
|
||||
// }
|
||||
print("当前登录记录：")
|
||||
for (index, item) in login.enumerated() {
|
||||
print("记录 \(index + 1): 邮箱=\(item.email), 姓名=\(item.name)")
|
||||
}
|
||||
showModal.toggle()
|
||||
}
|
||||
}
|
||||
|
||||
/// 隐藏用户资料弹窗
|
||||
private func hideUserProfile() {
|
||||
withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
|
||||
showModal = false
|
||||
}
|
||||
}
|
||||
|
||||
/// 隐藏设置页面
|
||||
private func hideSettings() {
|
||||
withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
|
||||
showSettings = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 预览
|
||||
#Preview {
|
||||
BlindBoxView(mediaType: .video)
|
||||
}
|
||||
229
wake/View/Subscribe/JoinModal.swift
Normal file
229
wake/View/Subscribe/JoinModal.swift
Normal file
@ -0,0 +1,229 @@
|
||||
import SwiftUI
|
||||
|
||||
struct JoinModal: View {
|
||||
@Binding var isPresented: Bool
|
||||
|
||||
var body: some View {
|
||||
ZStack(alignment: .bottom) {
|
||||
// Semi-transparent background
|
||||
if isPresented {
|
||||
Color.black.opacity(0.4)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
.onTapGesture {
|
||||
withAnimation {
|
||||
isPresented = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Modal content
|
||||
if isPresented {
|
||||
VStack(spacing: 0) {
|
||||
// IP Image peeking from top
|
||||
HStack {
|
||||
// Make sure you have an image named "IP" in your assets
|
||||
SVGImageHtml(svgName: "IP1")
|
||||
.frame(width: 116, height: 65)
|
||||
.offset(x: 30)
|
||||
Spacer()
|
||||
}
|
||||
.frame(height: 65)
|
||||
|
||||
VStack(spacing: 0) {
|
||||
// Close button on the right
|
||||
HStack {
|
||||
Spacer()
|
||||
Button(action: {
|
||||
withAnimation {
|
||||
Router.shared.navigate(to: .blindBox(mediaType: .all))
|
||||
}
|
||||
}) {
|
||||
Image(systemName: "xmark")
|
||||
.font(.system(size: 20, weight: .medium))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
.padding(12)
|
||||
}
|
||||
.padding(.trailing, 16)
|
||||
}
|
||||
|
||||
// 文本
|
||||
VStack(spacing: 8) {
|
||||
Text("Join us!")
|
||||
.font(Typography.font(for: .headline1, family: .quicksandBold))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
Text("Join us to get more exclusive benefits.")
|
||||
.font(.system(size: 14, weight: .regular))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
}
|
||||
.padding(.vertical, 12)
|
||||
// List content
|
||||
VStack (alignment: .leading) {
|
||||
HStack {
|
||||
SVGImage(svgName: "JoinList")
|
||||
.frame(width: 32, height: 32)
|
||||
HStack (alignment: .top){
|
||||
Text("Unlimited")
|
||||
.font(.system(size: 16, weight: .bold))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
Text(" blind box purchases.")
|
||||
.font(.system(size: 16, weight: .regular))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
}
|
||||
}
|
||||
.padding(.vertical, 12)
|
||||
.padding(.leading,12)
|
||||
HStack (alignment: .center) {
|
||||
SVGImage(svgName: "JoinList")
|
||||
.frame(width: 32, height: 32)
|
||||
VStack (alignment: .leading,spacing: 4) {
|
||||
HStack {
|
||||
Text("Freely")
|
||||
.font(.system(size: 16, weight: .bold))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
Text(" upload image and video")
|
||||
.font(.system(size: 16, weight: .regular))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
}
|
||||
Text(" materials.")
|
||||
.font(.system(size: 16, weight: .regular))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
}
|
||||
}
|
||||
.padding(.vertical, 12)
|
||||
.padding(.leading,12)
|
||||
|
||||
HStack(alignment: .top) {
|
||||
SVGImage(svgName: "JoinList")
|
||||
.frame(width: 32, height: 32)
|
||||
VStack (alignment: .leading,spacing: 4) {
|
||||
HStack {
|
||||
Text("500")
|
||||
.font(.system(size: 16, weight: .bold))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
Text(" credits daily,")
|
||||
.font(.system(size: 16, weight: .regular))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
}
|
||||
HStack(alignment: .top) {
|
||||
VStack (alignment: .leading, spacing: 4) {
|
||||
HStack {
|
||||
Text("5000")
|
||||
.font(.system(size: 16, weight: .bold))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
Text(" permanent credits on your first")
|
||||
.font(.system(size: 16, weight: .regular))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
}
|
||||
Text(" purchase!")
|
||||
.font(.system(size: 16, weight: .regular))
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.top, 12)
|
||||
.padding(.leading,12)
|
||||
HStack {
|
||||
Spacer() // This will push the button to the right
|
||||
Button(action: {
|
||||
// 点击跳转到会员页面
|
||||
Router.shared.navigate(to: .subscribe)
|
||||
}) {
|
||||
HStack {
|
||||
Text("See More")
|
||||
.font(.system(size: 16))
|
||||
Image(systemName: "chevron.right")
|
||||
.font(.system(size: 14))
|
||||
}
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
.padding(.vertical, 12)
|
||||
.padding(.horizontal, 24)
|
||||
.cornerRadius(20)
|
||||
}
|
||||
}
|
||||
.padding(.trailing, 16) // Add some right padding to match the design
|
||||
Button(action: {
|
||||
// 点击跳转到会员页面
|
||||
Router.shared.navigate(to: .subscribe)
|
||||
}) {
|
||||
HStack {
|
||||
Text("Subscribe")
|
||||
.font(Typography.font(for: .body, family: .quicksandBold))
|
||||
Spacer()
|
||||
Text("$1.00/Mon")
|
||||
.font(Typography.font(for: .body, family: .quicksandBold))
|
||||
}
|
||||
.foregroundColor(.themeTextMessageMain)
|
||||
.padding(.vertical, 12)
|
||||
.padding(.horizontal, 30)
|
||||
.background(Color.themePrimary)
|
||||
.cornerRadius(20)
|
||||
}
|
||||
.padding(.top, 16)
|
||||
// 协议条款
|
||||
HStack(alignment: .center) {
|
||||
Button(action: {
|
||||
// Action for Terms of Service
|
||||
if let url = URL(string: "https://memorywake.com/privacy-policy") {
|
||||
UIApplication.shared.open(url)
|
||||
}
|
||||
}) {
|
||||
Text("Terms of Service")
|
||||
.font(.system(size: 12, weight: .regular))
|
||||
.foregroundColor(.themeTextMessage)
|
||||
.underline() // Add underline
|
||||
}
|
||||
Rectangle()
|
||||
.fill(Color.gray.opacity(0.5))
|
||||
.frame(width: 1, height: 16)
|
||||
.padding(.vertical, 4)
|
||||
Button(action: {
|
||||
// 打开网页
|
||||
if let url = URL(string: "https://memorywake.com/privacy-policy") {
|
||||
UIApplication.shared.open(url)
|
||||
}
|
||||
}) {
|
||||
Text("Privacy Policy")
|
||||
.font(.system(size: 12, weight: .regular))
|
||||
.foregroundColor(.themeTextMessage)
|
||||
.underline() // Add underline
|
||||
}
|
||||
Rectangle()
|
||||
.fill(Color.gray.opacity(0.5))
|
||||
.frame(width: 1, height: 16)
|
||||
.padding(.vertical, 4)
|
||||
Button(action: {
|
||||
// Action for Restore Purchase
|
||||
if let url = URL(string: "https://memorywake.com/privacy-policy") {
|
||||
UIApplication.shared.open(url)
|
||||
}
|
||||
}) {
|
||||
Text("AI Usage Guidelines")
|
||||
.font(.system(size: 12, weight: .regular))
|
||||
.foregroundColor(.themeTextMessage)
|
||||
.underline() // Add underline
|
||||
}
|
||||
}
|
||||
.padding(.bottom, 24)
|
||||
.frame(maxWidth: .infinity, alignment: .center)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
}
|
||||
.background(Color.white)
|
||||
.cornerRadius(20, corners: [.topLeft, .topRight])
|
||||
}
|
||||
.frame(height: nil)
|
||||
.transition(.move(edge: .bottom))
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
.animation(.easeInOut, value: isPresented)
|
||||
}
|
||||
}
|
||||
|
||||
struct JoinModal_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
JoinModal(isPresented: .constant(true))
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user