案列展示
动画使用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()
}
}
}