iOS SwiftUI Animation repeatForever autoreverses 반복 애니메이션

dog

 

import SwiftUI

/// 강아지 반복 이동 뷰
struct MovingDogView: View {
    @State private var position: CGFloat = -(UIScreen.main.bounds.width / 2 - 50)
    @State private var isFlipped = false // 이미지 반전 여부
    @State private var timer: Timer?
    
    private let duration: TimeInterval = 2
    
    var body: some View {
        VStack {
            GifImageView("dog")
                .frame(width: 50, height: 50)
                .scaleEffect(x: isFlipped ? -1 : 1, y: 1) // 좌우 반전 효과
                .offset(x: position)
                .animation(.linear(duration: duration).repeatForever(autoreverses: true), value: position)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .onAppear {
            startAnimation()
        }
        .onDisappear {
            timer?.invalidate()
        }
    }
    
    private func startAnimation() {
        DispatchQueue.main.async {
            position = UIScreen.main.bounds.width / 2 - 50
            
            timer = .scheduledTimer(withTimeInterval: duration, repeats: true) { _ in
                isFlipped.toggle() // 방향이 바뀔 때마다 이미지 반전
            }
        }
    }
}

#Preview {
    MovingDogView()
}

 

import SwiftUI
import WebKit

// https://medium.com/@venkateshmandapati/displaying-gifs-in-swiftui-using-gifimageview-04179d926552
/// GIF 뷰
struct GifImageView: UIViewRepresentable {
    
    private let name: String
    
    init(_ name: String) {
        self.name = name
    }
    
    func makeUIView(context: Context) -> WKWebView {
        let webview = WKWebView()
        if let url = Bundle.main.url(forResource: name, withExtension: "gif"),
           let data = try? Data(contentsOf: url) {
            webview.load(data, mimeType: "image/gif", characterEncodingName: "UTF-8", baseURL: url.deletingLastPathComponent())
        }
        return webview
    }
    
    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.reload()
    }
}

 

iOS

Swift

SwiftUI

Xcode

Objective-C

Android

Animation

scaleEffect

offset

duration

linear

repeatForever

autoreverses