diff --git a/wake/Assets/Lottie/loading.json b/wake/Assets/Lottie/loading.json new file mode 100644 index 0000000..12914ef --- /dev/null +++ b/wake/Assets/Lottie/loading.json @@ -0,0 +1,106 @@ +{ + "v": "5.7.4", + "fr": 60, + "ip": 0, + "op": 90, + "w": 100, + "h": 100, + "nm": "Loading", + "ddd": 0, + "assets": [], + "layers": [ + { + "ddd": 0, + "ind": 1, + "ty": 4, + "nm": "Loading", + "sr": 1, + "ks": { + "o": { "a": 0, "k": 100, "ix": 11 }, + "r": { + "a": 1, + "k": [ + { "i": { "x": [0.667], "y": [1] }, "o": { "x": [0.333], "y": [0] }, "t": 0, "s": [0] }, + { "t": 90, "s": [360] } + ], + "ix": 10 + }, + "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100, 100], "ix": 6 } + }, + "ao": 0, + "shapes": [ + { + "ty": "gr", + "it": [ + { + "ty": "st", + "c": { "a": 0, "k": [0.0706, 0.5608, 0.9843, 1], "ix": 3 }, + "o": { "a": 0, "k": 100, "ix": 4 }, + "w": { "a": 0, "k": 8, "ix": 5 }, + "lc": 2, + "lj": 2, + "ml": 4, + "d": [ + { "n": "d", "nm": "d", "v": { "a": 0, "k": 1, "ix": 0 } }, + { "n": "d", "nm": "d", "v": { "a": 0, "k": 2, "ix": 1 } } + ], + "nm": "Stroke 1", + "mn": "ADBE Vector Graphic - Stroke", + "hd": false + }, + { + "ty": "sh", + "ks": { + "a": 0, + "k": { + "i": [ + [0, 0], + [0, 0] + ], + "o": [ + [0, 0], + [0, 0] + ], + "v": [ + [0, -20], + [0, 20] + ], + "c": false + }, + "ix": 1 + }, + "nm": "Path 1", + "mn": "ADBE Vector Shape - Group", + "hd": false + }, + { + "ty": "tr", + "p": { "a": 0, "k": [0, 0], "ix": 2 }, + "a": { "a": 0, "k": [0, 0], "ix": 1 }, + "s": { "a": 0, "k": [100, 100], "ix": 3 }, + "r": { "a": 0, "k": 0, "ix": 6 }, + "o": { "a": 0, "k": 100, "ix": 7 }, + "sk": { "a": 0, "k": 0, "ix": 4 }, + "sa": { "a": 0, "k": 0, "ix": 5 }, + "nm": "Transform" + } + ], + "nm": "Group 1", + "np": 2, + "cix": 2, + "bm": 0, + "ix": 1, + "mn": "ADBE Vector Group", + "hd": false + } + ], + "ip": 0, + "op": 90, + "st": 0, + "bm": 0 + } + ], + "markers": [] + } \ No newline at end of file diff --git a/wake/Components/Lottie/LottieView.swift b/wake/Components/Lottie/LottieView.swift new file mode 100644 index 0000000..6976ff4 --- /dev/null +++ b/wake/Components/Lottie/LottieView.swift @@ -0,0 +1,46 @@ +import SwiftUI +import Lottie + +struct LottieView: UIViewRepresentable { + let name: String + let loopMode: LottieLoopMode + let animationSpeed: CGFloat + + init(name: String, loopMode: LottieLoopMode = .loop, animationSpeed: CGFloat = 1.0) { + self.name = name + self.loopMode = loopMode + self.animationSpeed = animationSpeed + } + + func makeUIView(context: Context) -> LottieAnimationView { + let animationView = LottieAnimationView() + + // 方法1: 直接使用文件名加载 + if let animation = LottieAnimation.named(name) { + animationView.animation = animation + } + // 方法2: 如果方法1失败,尝试使用文件路径加载 + else if let path = Bundle.main.path(forResource: name, ofType: "json") { + let animation = LottieAnimation.filepath(path) + animationView.animation = animation + } + + // 配置动画 + animationView.loopMode = loopMode + animationView.animationSpeed = animationSpeed + animationView.contentMode = .scaleAspectFit + animationView.backgroundBehavior = .pauseAndRestore + + // 播放动画 + animationView.play() + + return animationView + } + + func updateUIView(_ uiView: LottieAnimationView, context: Context) { + // 确保动画持续播放 + if !uiView.isAnimationPlaying { + uiView.play() + } + } +} \ No newline at end of file diff --git a/wake/ContentView.swift b/wake/ContentView.swift index a2e4978..189a468 100644 --- a/wake/ContentView.swift +++ b/wake/ContentView.swift @@ -102,15 +102,20 @@ struct ContentView: View { // 盲盒 // 添加SVG背景图片 ZStack { - // 背景SVG - 保持原位置不变 - // SVGImage(svgName: "BlindBg") - // .frame( - // width: UIScreen.main.bounds.width * 1.8, - // height: UIScreen.main.bounds.height * 0.65 - // ) - // .position(x: UIScreen.main.bounds.width / 2, y: UIScreen.main.bounds.height * 0.325) - // AE 动画 通过lottie实现 - + // 1. 背景SVG + SVGImage(svgName: "BlindBg") + .frame( + width: UIScreen.main.bounds.width * 1.8, + height: UIScreen.main.bounds.height * 0.65 + ) + .position(x: UIScreen.main.bounds.width / 2, + y: UIScreen.main.bounds.height * 0.325) + + // 2. Lottie动画层 + LottieView(name: "loading", loopMode: .loop) + .frame(width: 200, height: 200) + .position(x: UIScreen.main.bounds.width / 2, + y: UIScreen.main.bounds.height * 0.325) } .frame( maxWidth: .infinity,