SwiftUI-火星探測器着陸升起動畫 案列展示 案例源碼

案列展示

動畫使用gif展示，原動畫不存在卡頓

案例源碼

struct ContentView: View {
    var body: some View {
        MarsView()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct ProbeAnimaiton: UIViewRepresentable {
    func updateUIView(_ uiView: UIViewType, context: Context) {
    }
    
    func makeUIView(context: Context) -> some UIView {
        let animView = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
        imageView.clipsToBounds = true
        imageView.layer.cornerRadius = 20
        imageView.autoresizesSubviews = true
        imageView.contentMode = .scaleAspectFill
        imageView.image = UIImage.animatedImageNamed("image", duration: 0.5)
        animView.addSubview(imageView)
        return animView
    }
}

struct ProbeView: View {
    @State var probeHover: Bool = false
    @State var probeRotate: Bool = false
    
    var body: some View {
        ZStack {
            ProbeAnimaiton()
                .offset(x: 120, y: probeHover ? 200 : 595)
                
                .animation(.easeInOut(duration: 2).repeatForever(autoreverses: true))
                .onAppear(perform: {
                    self.probeHover.toggle()
                })
        }
        .rotationEffect(.degrees(probeRotate ? -10 : 10))
        .animation(.easeInOut(duration: 0.9).repeatForever(autoreverses: true))
        .onAppear(perform: {
            self.probeRotate.toggle()
        })
    }
}

struct MarsView: View {
    
    var body: some View {
        ZStack {
            Image("marsbg").resizable().edgesIgnoringSafeArea(.all)
            ProbeView()            
        }
    }
}