SwiftUI-火星探测器着陆升起动画

案列展示

动画使用gif展示,原动画不存在卡顿

probe2.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()            
        }
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容