Compare commits
2 Commits
1e163ee426
...
0cde8d0c32
| Author | SHA1 | Date | |
|---|---|---|---|
| 0cde8d0c32 | |||
| b851e32eda |
@ -1,558 +1,21 @@
|
|||||||
import SwiftUI
|
import SwiftUI
|
||||||
import SwiftData
|
|
||||||
import AVKit
|
|
||||||
|
|
||||||
// MARK: - Notification Names
|
/// App entry content. Keeps only routing/navigation and delegates feature UIs to their own files.
|
||||||
extension Notification.Name {
|
struct ContentView: View {
|
||||||
static let blindBoxStatusChanged = Notification.Name("blindBoxStatusChanged")
|
@StateObject private var router = Router.shared
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
var body: some View {
|
||||||
ZStack {
|
NavigationStack(path: $router.path) {
|
||||||
Color.themeTextWhiteSecondary.ignoresSafeArea()
|
// Home entry: show the BlindBox home (all)
|
||||||
.onAppear {
|
BlindBoxView(mediaType: .all)
|
||||||
print("🎯 BlindBoxView appeared with mediaType: \(mediaType)")
|
.navigationDestination(for: AppRoute.self) { route in
|
||||||
print("🎯 Current thread: \(Thread.current)")
|
route.view
|
||||||
// 初始化显示数据
|
|
||||||
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
|
|
||||||
}
|
}
|
||||||
|
.environmentObject(router)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// MARK: - 预览
|
|
||||||
#Preview {
|
#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