feat: Background Card
This commit is contained in:
parent
562c7aab88
commit
1e57f993c2
1
wake/Assets/Lottie/opening.json
Normal file
1
wake/Assets/Lottie/opening.json
Normal file
File diff suppressed because one or more lines are too long
1
wake/Assets/Lottie/preparing.json
Normal file
1
wake/Assets/Lottie/preparing.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,44 +1,8 @@
|
|||||||
import SwiftUI
|
import SwiftUI
|
||||||
|
|
||||||
struct CustomLightSequenceAnimation: View {
|
|
||||||
// 核心循环序列:按"123321123321"规律定义基础单元
|
|
||||||
private let baseSequence: [Int] = [1, 2, 3, 3, 2, 1, 1, 2, 3, 3, 2, 1]
|
|
||||||
@State private var currentLight: Int = 1 // 当前显示的图片序号
|
|
||||||
@State private var sequenceIndex: Int = 0 // 当前在序列中的索引
|
|
||||||
|
|
||||||
// 淡入淡出透明度控制(确保切换丝滑)
|
|
||||||
@State private var currentOpacity: CGFloat = 1.0
|
|
||||||
@State private var nextOpacity: CGFloat = 0.0
|
|
||||||
|
|
||||||
// 尺寸参数(适配正方形卡片)
|
|
||||||
private let screenWidth = UIScreen.main.bounds.width
|
|
||||||
private let squareSize: CGFloat
|
|
||||||
private let imageSize: CGFloat
|
|
||||||
|
|
||||||
init() {
|
|
||||||
self.squareSize = screenWidth * 1.8 // 正方形背景尺寸
|
|
||||||
self.imageSize = squareSize / 3 // 光束卡片尺寸(1/3背景大小)
|
|
||||||
}
|
|
||||||
|
|
||||||
// 卡片中心位置(固定,确保摆正居中)
|
|
||||||
private var centerPosition: CGPoint {
|
|
||||||
CGPoint(x: screenWidth / 2, y: squareSize * 0.325)
|
|
||||||
}
|
|
||||||
|
|
||||||
var body: some View {
|
|
||||||
ZStack {
|
|
||||||
// 底部背景(正方形,SwiftUI 重绘)
|
|
||||||
CardBlindBackground()
|
|
||||||
.frame(width: squareSize, height: squareSize)
|
|
||||||
.position(centerPosition)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// MARK: - SwiftUI 背景重绘(方形版本)
|
// MARK: - SwiftUI 背景重绘(方形版本)
|
||||||
private struct CardBlindBackground: View {
|
struct CardBlindBackground: View {
|
||||||
var body: some View {
|
var body: some View {
|
||||||
GeometryReader { geo in
|
GeometryReader { geo in
|
||||||
let w = geo.size.width
|
let w = geo.size.width
|
||||||
@ -50,6 +14,34 @@ private struct CardBlindBackground: View {
|
|||||||
.shadow(color: .black.opacity(0.08), radius: 12, y: 6)
|
.shadow(color: .black.opacity(0.08), radius: 12, y: 6)
|
||||||
.padding()
|
.padding()
|
||||||
|
|
||||||
|
Rectangle()
|
||||||
|
.fill(
|
||||||
|
LinearGradient(
|
||||||
|
colors: [Color(hex: "FFFFFF"), Color(hex: "FFEFB2")],
|
||||||
|
startPoint: .topTrailing,
|
||||||
|
endPoint: .bottomLeading
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.frame(width: w - 100 , height: h - 130)
|
||||||
|
.cornerRadius(20)
|
||||||
|
.padding(.top, Theme.Spacing.lg)
|
||||||
|
// var view = UIView()
|
||||||
|
// view.frame = CGRect(x: 0, y: 0, width: 320, height: 464)
|
||||||
|
// let layer0 = CAGradientLayer()
|
||||||
|
// layer0.colors = [
|
||||||
|
// UIColor(red: 1, green: 1, blue: 1, alpha: 1).cgColor,
|
||||||
|
// UIColor(red: 1, green: 0.937, blue: 0.698, alpha: 1).cgColor
|
||||||
|
// ]
|
||||||
|
// layer0.locations = [0, 1]
|
||||||
|
// layer0.startPoint = CGPoint(x: 0.25, y: 0.5)
|
||||||
|
// layer0.endPoint = CGPoint(x: 0.75, y: 0.5)
|
||||||
|
// layer0.transform = CATransform3DMakeAffineTransform(CGAffineTransform(a: -1.13, b: 1.07, c: -1.08, d: -0.54, tx: 1.65, ty: 0.24))
|
||||||
|
// layer0.bounds = view.bounds.insetBy(dx: -0.5*view.bounds.size.width, dy: -0.5*view.bounds.size.height)
|
||||||
|
// layer0.position = view.center
|
||||||
|
// view.layer.addSublayer(layer0)
|
||||||
|
|
||||||
|
// view.layer.cornerRadius = 18
|
||||||
|
|
||||||
// 左上光斑
|
// 左上光斑
|
||||||
// Circle()
|
// Circle()
|
||||||
// .fill(Color.themePrimary.opacity(0.18))
|
// .fill(Color.themePrimary.opacity(0.18))
|
||||||
@ -76,13 +68,6 @@ private struct CardBlindBackground: View {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 预览
|
|
||||||
struct CustomLightSequenceAnimation_Previews: PreviewProvider {
|
|
||||||
static var previews: some View {
|
|
||||||
CustomLightSequenceAnimation()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 预览
|
// 预览
|
||||||
struct CardBlindBackground_Previews: PreviewProvider {
|
struct CardBlindBackground_Previews: PreviewProvider {
|
||||||
static var previews: some View {
|
static var previews: some View {
|
||||||
@ -384,11 +384,9 @@ struct BlindBoxView: View {
|
|||||||
|
|
||||||
// 盲盒
|
// 盲盒
|
||||||
ZStack {
|
ZStack {
|
||||||
// 1. 背景(SwiftUI 重绘)
|
// 1. 背景Card
|
||||||
if !showScalingOverlay {
|
if !showScalingOverlay {
|
||||||
BlindBackground()
|
CardBlindBackground()
|
||||||
.opacity(showScalingOverlay ? 0 : 1)
|
|
||||||
.animation(.easeOut(duration: 1.5), value: showScalingOverlay)
|
|
||||||
}
|
}
|
||||||
if mediaType == .all && !showScalingOverlay {
|
if mediaType == .all && !showScalingOverlay {
|
||||||
BlindCountBadge(text: "\(viewModel.blindCount?.availableQuantity ?? 0) Boxes")
|
BlindCountBadge(text: "\(viewModel.blindCount?.availableQuantity ?? 0) Boxes")
|
||||||
@ -664,51 +662,6 @@ struct BlindBoxView: View {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// MARK: - 盲盒背景(SwiftUI 重绘)
|
|
||||||
private struct BlindBackground: View {
|
|
||||||
var body: some View {
|
|
||||||
GeometryReader { geo in
|
|
||||||
let w = geo.size.width
|
|
||||||
let h = geo.size.height
|
|
||||||
ZStack {
|
|
||||||
// 主背景卡片
|
|
||||||
RoundedRectangle(cornerRadius: 28)
|
|
||||||
.fill(
|
|
||||||
LinearGradient(
|
|
||||||
colors: [Color.white, Color.white.opacity(0.96)],
|
|
||||||
startPoint: .topLeading,
|
|
||||||
endPoint: .bottomTrailing
|
|
||||||
)
|
|
||||||
)
|
|
||||||
.shadow(color: Color.black.opacity(0.06), radius: 16, x: 0, y: 8)
|
|
||||||
.frame(width: min(w * 0.9, 360), height: min(h * 0.6, 260))
|
|
||||||
.position(x: w / 2, y: h * 0.35)
|
|
||||||
|
|
||||||
// 左上光斑
|
|
||||||
Circle()
|
|
||||||
.fill(Color.themePrimary.opacity(0.18))
|
|
||||||
.blur(radius: 40)
|
|
||||||
.frame(width: 160, height: 160)
|
|
||||||
.position(x: w * 0.22, y: h * 0.18)
|
|
||||||
|
|
||||||
// 右下光斑
|
|
||||||
Circle()
|
|
||||||
.fill(Color.orange.opacity(0.14))
|
|
||||||
.blur(radius: 50)
|
|
||||||
.frame(width: 180, height: 180)
|
|
||||||
.position(x: w * 0.78, y: h * 0.55)
|
|
||||||
|
|
||||||
// 中央高光
|
|
||||||
RoundedRectangle(cornerRadius: 28)
|
|
||||||
.stroke(Color.white.opacity(0.35), lineWidth: 1)
|
|
||||||
.frame(width: min(w * 0.9, 360), height: min(h * 0.6, 260))
|
|
||||||
.position(x: w / 2, y: h * 0.35)
|
|
||||||
.blendMode(.overlay)
|
|
||||||
.opacity(0.7)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/// 隐藏设置页面
|
/// 隐藏设置页面
|
||||||
private func hideSettings() {
|
private func hideSettings() {
|
||||||
|
|||||||
21
wake/Media.xcassets/Empty.imageset/Contents.json
vendored
Normal file
21
wake/Media.xcassets/Empty.imageset/Contents.json
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"images" : [
|
||||||
|
{
|
||||||
|
"filename" : "Empty.png",
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "1x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "2x"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"idiom" : "universal",
|
||||||
|
"scale" : "3x"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"info" : {
|
||||||
|
"author" : "xcode",
|
||||||
|
"version" : 1
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
wake/Media.xcassets/Empty.imageset/Empty.png
vendored
Normal file
BIN
wake/Media.xcassets/Empty.imageset/Empty.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Loading…
x
Reference in New Issue
Block a user