[swift] Swift에서 애니메이션 블러 효과 구현하기

07 Dec 2023

swift

애니메이션 블러 효과는 iOS 앱에서 매우 인기 있는 시각적 효과 중 하나입니다. 이 효과는 뷰의 배경을 흐릿하게 만들어 사용자의 초점을 더욱 강조할 수 있습니다. Swift에서는 Core Image 프레임워크를 사용하여 애니메이션 블러 효과를 적용할 수 있습니다.

1. Core Image 프레임워크 가져오기

우선, 프로젝트에 Core Image 프레임워크를 가져와야 합니다. Xcode 프로젝트 내비게이션 창에서 “프로젝트 네비게이터”를 클릭한 다음, 프로젝트 파일을 선택합니다. “Build Phases” 탭에서 “Link Binary With Libraries”를 찾고 “+” 버튼을 클릭하여 Core Image 프레임워크를 선택합니다.

2. UIVisualEffectView 추가하기

블러 효과를 적용하기 위해 UIVisualEffectView를 사용합니다. 이 뷰는 앱의 다른 컨텐츠를 뒤에 가리고 블러 효과를 적용할 수 있습니다. UIView를 추가한 다음, 해당 뷰의 클래스를 UIVisualEffectView로 변경합니다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var blurView: UIVisualEffectView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 블러 효과 설정
        let blurEffect = UIBlurEffect(style: .dark)
        blurView.effect = blurEffect
    }
}

3. 블러 효과 애니메이션 적용하기

애니메이션 효과를 적용하기 위해 UIView.animate 메서드를 사용합니다. 이 메서드를 호출할 때 animations 클로저 내부에서 원하는 애니메이션 효과를 구현하면 됩니다. 애니메이션의 지속 시간은 duration 매개변수로 지정할 수 있습니다.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var blurView: UIVisualEffectView!
    var isBlurOn = false // 블러 효과 상태 변수

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 블러 효과 설정
        let blurEffect = UIBlurEffect(style: .dark)
        blurView.effect = blurEffect
        
        // 탭 제스처 추가
        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
        view.addGestureRecognizer(tapGesture)
    }
    
    // 탭 제스처 핸들러
    @objc func handleTap(_ sender: UITapGestureRecognizer) {
        if isBlurOn {
            // 블러 효과 제거
            UIView.animate(withDuration: 0.5) {
                self.blurView.effect = nil
            }
        } else {
            // 블러 효과 적용
            UIView.animate(withDuration: 0.5) {
                let blurEffect = UIBlurEffect(style: .dark)
                self.blurView.effect = blurEffect
            }
        }
        
        // 블러 상태 변경
        isBlurOn.toggle()
    }
}

위의 예제 코드에서는 뷰에 탭 제스처를 추가하여 블러 효과를 토글할 수 있도록 설정했습니다. 탭을 하면 블러 효과가 적용되고, 다시 탭하면 블러 효과가 제거됩니다.

간단한 예제이지만, Core Image 프레임워크를 사용하여 Swift에서 애니메이션 블러 효과를 구현하는 방법을 알 수 있습니다. 추가적인 애니메이션 효과나 사용자 정의 효과를 구현하려면 Core Image 프레임워크의 다른 기능도 함께 살펴보시기 바랍니다.

1. Core Image 프레임워크 가져오기

2. UIVisualEffectView 추가하기

3. 블러 효과 애니메이션 적용하기

참고 자료