[swift] RxSwift에서의 애니메이션 처리 방법

20 Nov 2023

swift

RxSwift는 리액티브 프로그래밍을 지원하는 iOS 개발용 프레임워크입니다. 이를 통해 비동기적인 작업을 보다 쉽게 처리할 수 있습니다. 애니메이션 역시 RxSwift를 활용하여 보다 간편하게 처리할 수 있습니다. 이번 포스트에서는 RxSwift에서의 애니메이션 처리 방법에 대해 알아보겠습니다.

UIView의 애니메이션 처리

UIView에서의 애니메이션은 UIView.animate 함수를 활용하여 처리할 수 있습니다. 이를 리액티브하게 사용하기 위해 Observable을 생성할 수 있습니다. 다음은 UIView의 frame을 애니메이션을 통해 변경하는 예제 코드입니다.

import RxSwift
import RxCocoa

let disposeBag = DisposeBag()

let view = UIView()

Observable.just(CGRect(x: 0, y: 0, width: 200, height: 200))
    .observeOn(MainScheduler.instance)
    .bind(to: view.rx.frame)
    .disposed(by: disposeBag)

위 코드에서 Observable.just를 사용하여 CGRect를 통해 애니메이션을 적용할 frame 값을 설정합니다. observeOn을 사용하여 애니메이션을 처리할 스케줄러를 지정하고, bind(to:)를 통해 해당 값을 View의 frame 속성에 바인딩합니다.

CALayer의 애니메이션 처리

CALayer에서의 애니메이션 역시 RxSwift를 활용하여 처리할 수 있습니다. CALayer에 애니메이션을 적용하기 위해서는 Observable을 생성하는 대신 Observable.create를 사용하여 직접 애니메이션을 구현해야 합니다. 다음은 CALayer의 opacity를 애니메이션을 통해 변경하는 예제 코드입니다.

import RxSwift
import RxCocoa

let disposeBag = DisposeBag()

let layer = CALayer()

let animationObservable = Observable<CGFloat>.create { observer in
    CATransaction.begin()
    CATransaction.setCompletionBlock {
        observer.onCompleted()
    }
    let animation = CABasicAnimation(keyPath: "opacity")
    animation.duration = 1.0
    animation.fromValue = layer.opacity
    animation.toValue = 0.5
    layer.add(animation, forKey: "opacity")
    observer.onNext(0.5)
    CATransaction.commit()
    return Disposables.create()
}

animationObservable
    .bind(to: layer.rx.opacity)
    .disposed(by: disposeBag)

위 코드에서는 Observable.create를 사용하여 직접 애니메이션을 구현합니다. CATransaction을 사용하여 애니메이션의 시작과 끝을 처리하고, CABasicAnimation을 사용하여 실제 애니메이션을 구성합니다. RxSwift의 bind(to:)를 통해 애니메이션의 값을 Layer의 opacity 속성에 바인딩합니다.

결론

RxSwift를 활용하면 UIView와 CALayer의 애니메이션을 리액티브하게 처리할 수 있습니다. UIView의 애니메이션은 UIView.animate을 사용하고, CALayer의 애니메이션은 Observable.create를 사용하여 직접 구현할 수 있습니다. 애니메이션을 리액티브형식으로 처리하면 비동기적인 작업을 더욱 효율적으로 관리할 수 있습니다.

UIView의 애니메이션 처리

CALayer의 애니메이션 처리

결론

참고 문서