import SwiftUI import SwiftData import AVKit // MARK: - Constants private enum MediaURLs { static let videoURL = "https://cdn.memorywake.com/users/7363409620351717377/files/7366657553935241216/39C069E1-7C3E-4261-8486-12058F855B38.mov" static let imageURL = "https://cdn.fairclip.cn/files/7343228671693557760/20250604-164000.jpg" static let VideoBlindURL = "https://cdn.memorywake.com/users/7363409620351717377/files/7366658779259211776/AD970D28-9D1E-4817-A245-F11967441B8F.mp4" } extension Notification.Name { static let navigateToMediaViewer = Notification.Name("navigateToMediaViewer") } // MARK: - 主视图 struct VisualEffectView: UIViewRepresentable { var effect: UIVisualEffect? func makeUIView(context: Context) -> UIVisualEffectView { let view = UIVisualEffectView(effect: nil) // Use a simpler approach without animator let blurEffect = UIBlurEffect(style: .systemUltraThinMaterialLight) // Create a custom blur effect with reduced intensity let blurView = UIVisualEffectView(effect: blurEffect) blurView.alpha = 0.3 // Reduce intensity // Add a white background with low opacity for better frosted effect let backgroundView = UIView() backgroundView.backgroundColor = UIColor.white.withAlphaComponent(0.1) backgroundView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.contentView.addSubview(backgroundView) view.contentView.addSubview(blurView) blurView.frame = view.bounds blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] return view } func updateUIView(_ uiView: UIVisualEffectView, context: Context) { // No need to update the effect } } struct AVPlayerController: UIViewControllerRepresentable { @Binding var player: AVPlayer? func makeUIViewController(context: Context) -> AVPlayerViewController { let controller = AVPlayerViewController() controller.player = player controller.showsPlaybackControls = false controller.videoGravity = .resizeAspect controller.view.backgroundColor = .clear return controller } func updateUIViewController(_ uiViewController: AVPlayerViewController, context: Context) { uiViewController.player = player } } struct BlindBoxView: View { enum BlindBoxMediaType { case video case image } let mediaType: BlindBoxMediaType @State private var showLottieAnimation = true @State private var showScalingOverlay = false @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? init(mediaType: BlindBoxMediaType) { self.mediaType = mediaType } private func loadMedia() { switch mediaType { case .video: loadVideo() case .image: loadImage() } } private func loadImage() { guard let url = URL(string: MediaURLs.imageURL) else { 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 loadVideo() { guard let url = URL(string: MediaURLs.videoURL) else { 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 } player.isMuted = true self.videoPlayer = player } 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() if showScalingOverlay { ZStack { VisualEffectView(effect: UIBlurEffect(style: .systemUltraThinMaterialLight)) .opacity(0.3) .edgesIgnoringSafeArea(.all) Group { if mediaType == .video, let player = videoPlayer { // Video Player AVPlayerController(player: $videoPlayer) .frame(width: scaledWidth, height: scaledHeight) .opacity(scale == 1 ? 1 : 0.7) .onAppear { player.play() } } else if mediaType == .image, let image = displayImage { // Image View Image(uiImage: image) .resizable() .scaledToFit() .frame(width: scaledWidth, height: scaledHeight) .opacity(scale == 1 ? 1 : 0.7) } } .onTapGesture { withAnimation(.easeInOut(duration: 0.1)) { showControls.toggle() } } // 返回按钮 if showControls { VStack { HStack { Button(action: { // 导航到BlindOutcomeView if mediaType == .video, let videoURL = URL(string: MediaURLs.videoURL) { Router.shared.navigate(to: .blindOutcome(media: .video(videoURL, nil))) } else if mediaType == .image, let image = displayImage { Router.shared.navigate(to: .blindOutcome(media: .image(image))) } }) { Image(systemName: "chevron.left.circle.fill") .font(.system(size: 36)) .foregroundColor(.black) .padding(12) .clipShape(Circle()) } Spacer() } Spacer() } .frame(maxWidth: .infinity, maxHeight: .infinity) .padding(.top, 50) .padding(.leading, 20) .zIndex(1000) .transition(.opacity) .onAppear { // 2秒后显示按钮 DispatchQueue.main.asyncAfter(deadline: .now() + 2) { withAnimation(.easeInOut(duration: 0.3)) { showControls = true } } } } } .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) { // 标题 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) // 盲盒 ZStack { // 1. 背景SVG if !showScalingOverlay { SVGImage(svgName: "BlindBoxBg") .frame( width: UIScreen.main.bounds.width * 1.8, height: UIScreen.main.bounds.height * 0.85 ) .position(x: UIScreen.main.bounds.width / 2, y: UIScreen.main.bounds.height * 0.325) .opacity(showScalingOverlay ? 0 : 1) .animation(.easeOut(duration: 1.5), value: showScalingOverlay) } if !showScalingOverlay { VStack(spacing: 20) { let player = AVPlayer(url: URL(string: MediaURLs.VideoBlindURL)!) VideoPlayer(player: player) .background(TransparentVideoPlayer()) .frame(width: 300, height: 300) .onAppear { player.play() player.isMuted = true } .onDisappear { player.pause() } } .compositingGroup() .padding() } } .frame( maxWidth: .infinity, maxHeight: UIScreen.main.bounds.height * 0.65 ) .opacity(showScalingOverlay ? 0 : 1) .animation(.easeOut(duration: 1.5), value: showScalingOverlay) .offset(y: showScalingOverlay ? -100 : 0) .animation(.easeInOut(duration: 1.5), value: showScalingOverlay) } .frame(maxWidth: .infinity, maxHeight: .infinity) .background(Color.themeTextWhiteSecondary) .edgesIgnoringSafeArea(.all) } } } .navigationBarBackButtonHidden(true) .onAppear { self.loadMedia() // Start animation after media is loaded DispatchQueue.main.asyncAfter(deadline: .now() + 5) { self.startScalingAnimation() } } } } // MARK: - 预览 #Preview { BlindBoxView(mediaType: .video) } struct TransparentVideoPlayer: UIViewRepresentable { func makeUIView(context: Context) -> UIView { let view = UIView() view.backgroundColor = .clear view.isOpaque = false return view } func updateUIView(_ uiView: UIView, context: Context) {} }