feat: 盲盒主页面
This commit is contained in:
jinyaqiu
parent
0c5083f72c
commit
817cd23c4a
@ -2,309 +2,369 @@ import SwiftUI
|
||||
import SwiftData
|
||||
import AVKit
|
||||
|
||||
// MARK: - 自定义过渡动画
|
||||
extension AnyTransition {
|
||||
/// 创建从左向右的滑动过渡动画
|
||||
static var slideFromLeading: AnyTransition {
|
||||
.asymmetric(
|
||||
insertion: .move(edge: .trailing).combined(with: .opacity), // 从右侧滑入
|
||||
removal: .move(edge: .leading).combined(with: .opacity) // 向左侧滑出
|
||||
)
|
||||
}
|
||||
// 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"
|
||||
}
|
||||
|
||||
// MARK: - Video Player View
|
||||
struct VideoPlayerView: View {
|
||||
let player: AVPlayer
|
||||
@Binding var isFullscreen: Bool
|
||||
private enum BlindBoxAnimationPhase {
|
||||
case loading
|
||||
case ready
|
||||
case opening
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
ZStack(alignment: .bottomTrailing) {
|
||||
VideoPlayer(player: player)
|
||||
.frame(width: 300, height: 200)
|
||||
.cornerRadius(12)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 12)
|
||||
.stroke(Color.gray.opacity(0.3), lineWidth: 1)
|
||||
)
|
||||
|
||||
// 全屏按钮
|
||||
Button(action: {
|
||||
isFullscreen = true
|
||||
player.play()
|
||||
}) {
|
||||
Image(systemName: "arrow.up.left.and.arrow.down.right")
|
||||
.font(.system(size: 20))
|
||||
.foregroundColor(.white)
|
||||
.padding(8)
|
||||
.background(Color.black.opacity(0.6))
|
||||
.clipShape(Circle())
|
||||
}
|
||||
.padding(16)
|
||||
}
|
||||
.frame(width: 300, height: 200)
|
||||
.onTapGesture {
|
||||
player.play()
|
||||
}
|
||||
.onAppear {
|
||||
player.play()
|
||||
}
|
||||
.fullScreenCover(isPresented: $isFullscreen) {
|
||||
ZStack(alignment: .topLeading) {
|
||||
// 全屏视频播放器
|
||||
VideoPlayer(player: player)
|
||||
.edgesIgnoringSafeArea(.all)
|
||||
.onAppear { player.play() }
|
||||
|
||||
// 关闭按钮
|
||||
Button(action: {
|
||||
isFullscreen = false
|
||||
player.pause()
|
||||
}) {
|
||||
Image(systemName: "xmark.circle.fill")
|
||||
.font(.title)
|
||||
.foregroundColor(.white)
|
||||
.padding()
|
||||
.background(Color.black.opacity(0.4))
|
||||
.clipShape(Circle())
|
||||
}
|
||||
.padding(.top, 50)
|
||||
.padding(.leading, 20)
|
||||
}
|
||||
.background(Color.black.edgesIgnoringSafeArea(.all))
|
||||
.statusBar(hidden: true)
|
||||
}
|
||||
}
|
||||
extension Notification.Name {
|
||||
static let navigateToMediaViewer = Notification.Name("navigateToMediaViewer")
|
||||
}
|
||||
|
||||
// MARK: - 主视图
|
||||
struct ContentView: View {
|
||||
// MARK: - 状态属性
|
||||
@State private var showModal = false // 控制用户资料弹窗显示
|
||||
@State private var showSettings = false // 控制设置页面显示
|
||||
@State private var contentOffset: CGFloat = 0 // 内容偏移量
|
||||
@State private var showLogin = false
|
||||
@State private var animateGradient = false
|
||||
@State private var showLottieAnimation = true // 控制Lottie动画显示
|
||||
@State private var showVideoPlayer = false // 控制视频播放器显示
|
||||
@State private var isVideoFullscreen = false // 控制视频全屏状态
|
||||
struct VisualEffectView: UIViewRepresentable {
|
||||
var effect: UIVisualEffect?
|
||||
|
||||
let timer = Timer.publish(every: 0.02, on: .main, in: .common).autoconnect()
|
||||
func makeUIView(context: Context) -> UIVisualEffectView {
|
||||
let view = UIVisualEffectView(effect: nil)
|
||||
|
||||
// 获取模型上下文
|
||||
@Environment(\.modelContext) private var modelContext
|
||||
// Use a simpler approach without animator
|
||||
let blurEffect = UIBlurEffect(style: .systemUltraThinMaterialLight)
|
||||
|
||||
// 查询数据 - 简单查询
|
||||
@Query private var login: [Login]
|
||||
// Create a custom blur effect with reduced intensity
|
||||
let blurView = UIVisualEffectView(effect: blurEffect)
|
||||
blurView.alpha = 0.3 // Reduce intensity
|
||||
|
||||
// 视频播放器
|
||||
private let player: AVPlayer?
|
||||
// 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]
|
||||
|
||||
init() {
|
||||
// 使用远程视频URL
|
||||
if let videoURL = URL(string: "https://cdn.fairclip.cn/files/7342843896868769793/飞书20250617-144935.mp4") {
|
||||
self.player = AVPlayer(url: videoURL)
|
||||
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
|
||||
case all
|
||||
}
|
||||
|
||||
let mediaType: BlindBoxMediaType
|
||||
@State private var showLottieAnimation = true
|
||||
@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?
|
||||
|
||||
init(mediaType: BlindBoxMediaType) {
|
||||
self.mediaType = mediaType
|
||||
}
|
||||
|
||||
private func loadMedia() {
|
||||
switch mediaType {
|
||||
case .video:
|
||||
loadVideo()
|
||||
case .image:
|
||||
loadImage()
|
||||
case .all:
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
|
||||
private func loadData() {
|
||||
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 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 {
|
||||
self.player = nil
|
||||
print("Error: Invalid video URL")
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - 主体视图
|
||||
var body: some View {
|
||||
NavigationView {
|
||||
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) {
|
||||
// 顶部导航栏
|
||||
HStack {
|
||||
// 设置按钮
|
||||
Button(action: showUserProfile) {
|
||||
SVGImage(svgName: "User")
|
||||
.frame(width: 24, height: 24)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
// // 测试质感页面入口
|
||||
// NavigationLink(destination: TestView()) {
|
||||
// Text("TestView")
|
||||
// .font(.subheadline)
|
||||
// .padding(.horizontal, 12)
|
||||
// .padding(.vertical, 6)
|
||||
// .background(Color.brown)
|
||||
// .foregroundColor(.white)
|
||||
// .cornerRadius(8)
|
||||
// }
|
||||
|
||||
// // 订阅测试按钮
|
||||
// NavigationLink(destination: SubscribeView()) {
|
||||
// Text("Subscribe")
|
||||
// .font(.subheadline)
|
||||
// .padding(.horizontal, 12)
|
||||
// .padding(.vertical, 6)
|
||||
// .background(Color.orange)
|
||||
// .foregroundColor(.white)
|
||||
// .cornerRadius(8)
|
||||
// }
|
||||
// .padding(.trailing)
|
||||
// .fullScreenCover(isPresented: $showLogin) {
|
||||
// LoginView()
|
||||
// }
|
||||
NavigationLink(destination: SubscribeView()) {
|
||||
Text("3290")
|
||||
.font(Typography.font(for: .subtitle))
|
||||
.fontWeight(.bold)
|
||||
.padding(.horizontal, 12)
|
||||
.padding(.vertical, 6)
|
||||
.background(Color.black)
|
||||
.foregroundColor(.white)
|
||||
.cornerRadius(16)
|
||||
}
|
||||
.padding(.trailing)
|
||||
.fullScreenCover(isPresented: $showLogin) {
|
||||
LoginView()
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.padding(.top, 20)
|
||||
// 标题
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text("Hi! Click And")
|
||||
Text("Open Your Box~")
|
||||
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)
|
||||
|
||||
// 盲盒
|
||||
// 添加SVG背景图片
|
||||
ZStack {
|
||||
// 1. 背景SVG
|
||||
SVGImage(svgName: "BlindBg")
|
||||
if !showScalingOverlay {
|
||||
SVGImage(svgName: "BlindBoxBg")
|
||||
.frame(
|
||||
width: UIScreen.main.bounds.width * 1.8,
|
||||
height: UIScreen.main.bounds.height * 0.65
|
||||
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) {
|
||||
switch animationPhase {
|
||||
case .loading:
|
||||
GIFView(name: "BlindLoading")
|
||||
.frame(width: 300, height: 300)
|
||||
.onAppear {
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 6) {
|
||||
withAnimation {
|
||||
animationPhase = .ready
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Lottie动画层
|
||||
if showLottieAnimation {
|
||||
GIFView(name: "Blind") {
|
||||
// 点击事件处理
|
||||
Router.shared.navigate(to: .blindBox(mediaType: .video))
|
||||
case .ready:
|
||||
ZStack {
|
||||
GIFView(name: "BlindReady")
|
||||
.frame(width: 300, height: 300)
|
||||
|
||||
// Add a transparent overlay to capture taps
|
||||
Color.clear
|
||||
.contentShape(Rectangle()) // Make the entire area tappable
|
||||
.frame(width: 300, height: 300)
|
||||
.onTapGesture {
|
||||
print("点击了盲盒")
|
||||
withAnimation {
|
||||
animationPhase = .opening
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame(width: 300, height: 300)
|
||||
}
|
||||
|
||||
// 3. 视频播放器
|
||||
if showVideoPlayer, let player = player {
|
||||
VideoPlayerView(player: player, isFullscreen: $isVideoFullscreen)
|
||||
} else if showVideoPlayer {
|
||||
Text("Video not found")
|
||||
.foregroundColor(.red)
|
||||
case .opening:
|
||||
GIFView(name: "BlindOpen")
|
||||
.frame(width: 300, height: 300)
|
||||
.onAppear {
|
||||
self.loadMedia()
|
||||
// Start animation after media is loaded
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
|
||||
self.startScalingAnimation()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.compositingGroup()
|
||||
.padding()
|
||||
}
|
||||
}
|
||||
.frame(
|
||||
maxWidth: .infinity,
|
||||
maxHeight: UIScreen.main.bounds.height * 0.65
|
||||
)
|
||||
.clipped()
|
||||
// 打开
|
||||
Button(action: showUserProfile) {
|
||||
Text("Go to Buy")
|
||||
.font(Typography.font(for: .body))
|
||||
.fontWeight(.bold)
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding()
|
||||
.background(Color.themePrimary)
|
||||
.foregroundColor(Color.themeTextMessageMain)
|
||||
.cornerRadius(32)
|
||||
}
|
||||
.padding(.horizontal)
|
||||
.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)
|
||||
.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
|
||||
)
|
||||
}
|
||||
.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)
|
||||
}
|
||||
.background(Color.themeTextWhiteSecondary)
|
||||
.navigationBarHidden(true)
|
||||
.navigationBarBackButtonHidden(true)
|
||||
}
|
||||
.navigationViewStyle(StackNavigationViewStyle())
|
||||
.navigationBarHidden(true)
|
||||
.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 {
|
||||
ContentView()
|
||||
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) {}
|
||||
}
|
||||
|
||||
@ -12,7 +12,6 @@ enum AppRoute: Hashable {
|
||||
case memories
|
||||
case subscribe
|
||||
case userInfo
|
||||
case content
|
||||
|
||||
@ViewBuilder
|
||||
var view: some View {
|
||||
@ -37,8 +36,6 @@ enum AppRoute: Hashable {
|
||||
SubscribeView()
|
||||
case .userInfo:
|
||||
UserInfo()
|
||||
case .content:
|
||||
ContentView()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,354 +0,0 @@
|
||||
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"
|
||||
}
|
||||
|
||||
private enum BlindBoxAnimationPhase {
|
||||
case loading
|
||||
case ready
|
||||
case opening
|
||||
}
|
||||
|
||||
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 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?
|
||||
|
||||
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) {
|
||||
switch animationPhase {
|
||||
case .loading:
|
||||
GIFView(name: "BlindLoading")
|
||||
.frame(width: 300, height: 300)
|
||||
.onAppear {
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 6) {
|
||||
withAnimation {
|
||||
animationPhase = .ready
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
case .ready:
|
||||
ZStack {
|
||||
GIFView(name: "BlindReady")
|
||||
.frame(width: 300, height: 300)
|
||||
|
||||
// Add a transparent overlay to capture taps
|
||||
Color.clear
|
||||
.contentShape(Rectangle()) // Make the entire area tappable
|
||||
.frame(width: 300, height: 300)
|
||||
.onTapGesture {
|
||||
print("点击了盲盒")
|
||||
withAnimation {
|
||||
animationPhase = .opening
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame(width: 300, height: 300)
|
||||
|
||||
case .opening:
|
||||
GIFView(name: "BlindOpen")
|
||||
.frame(width: 300, height: 300)
|
||||
.onAppear {
|
||||
self.loadMedia()
|
||||
// Start animation after media is loaded
|
||||
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
|
||||
self.startScalingAnimation()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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)
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {}
|
||||
}
|
||||
@ -35,7 +35,7 @@ struct JoinModal: View {
|
||||
Spacer()
|
||||
Button(action: {
|
||||
withAnimation {
|
||||
Router.shared.navigate(to: .content)
|
||||
Router.shared.navigate(to: .blindBox(mediaType: .all))
|
||||
}
|
||||
}) {
|
||||
Image(systemName: "xmark")
|
||||
|
||||
@ -32,7 +32,6 @@ struct WakeApp: App {
|
||||
|
||||
var body: some Scene {
|
||||
WindowGroup {
|
||||
NavigationStack(path: $router.path) {
|
||||
ZStack {
|
||||
if showSplash {
|
||||
// 显示启动页
|
||||
@ -46,8 +45,12 @@ struct WakeApp: App {
|
||||
// 根据登录状态显示不同视图
|
||||
if authState.isAuthenticated {
|
||||
// 已登录：显示主页面
|
||||
ContentView()
|
||||
.environmentObject(authState)
|
||||
NavigationStack(path: $router.path) {
|
||||
BlindBoxView(mediaType: .all)
|
||||
.navigationDestination(for: AppRoute.self) { route in
|
||||
route.view
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 未登录：显示登录界面
|
||||
LoginView()
|
||||
@ -55,10 +58,6 @@ struct WakeApp: App {
|
||||
}
|
||||
}
|
||||
}
|
||||
.navigationDestination(for: AppRoute.self) { route in
|
||||
route.view
|
||||
}
|
||||
}
|
||||
.environmentObject(router)
|
||||
.environmentObject(authState)
|
||||
.onAppear {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user