간단하게 알아보는 iOS 애니메이션

안녕하세요...

 

이번 포스팅은 중간에 한번 날아가서... 기운이 없네요...

 

중간중간 저장을 생활화합시다...

 

그래도 힘을 내서 포스팅해야겠죠?? 하하하하하하핳 

 

이번 포스팅에서는 제 뇌피셜로 iOS의 꽃이라 할 수 있는 애니메이션을 다뤄볼 거예요~~~~~

 

우선 애플 공식 문서를 참고해 볼까 영????

 

developer.apple.com/documentation/uikit/uiview

Apple Developer Documentation

Animations

Changes to several view properties can be animated—that is, changing the property creates an animation starting at the current value and ending at the new value that you specify. The following properties of the UIView class are animatable:

• frame

• bounds

• center

• transform

• alpha

• backgroundColor

To animate your changes, create a UIViewPropertyAnimator object and use its handler block to change the values of your view's properties. The UIViewPropertyAnimator class lets you specify the duration and timing of your animations, but it performs the actual animations. You can pause a property-based animator that is currently running to interrupt the animation and drive it interactively. For more information, see UIViewPropertyAnimator.

 

간단하게 설명을 해보자면!!!

 

UIView의 몇 가지 속성들을 시작점에서의 현재 값과 종료 지점을 정해서 새로운 값으로 변경해주는 거래요~~

 

여기서 속성이 정해져 있는데 frame, bounds, center, transfrom, alpha, backgroundColor 총 6가지라고 알려주고 있어요

 

한 번씩 다루어 볼 거예요~~

 

우선 animate를 어떻게 주는지 알아봐야겠죠?????

 

class func animate(withDuration duration: TimeInterval,
                   delay: TimeInterval, 
                   usingSpringWithDamping dampingRatio: CGFloat, 
                   initialSpringVelocity velocity: CGFloat, 
                   options: UIView.AnimationOptions = [], 
                   animations: @escaping () -> Void, 
                   completion: ((Bool) -> Void)? = nil)

제가 주로 사용하는 메소드입니다!!!

 

아래의 코드처럼 사용하고 있구요!!

        // 우리 animate는...
        
        UIView.animate(withDuration: 1,             
                       // ~시간동안 애니메이션이 진행되구요... 
                       delay: 1,                    
                       // ~시간이후에 애니메이션이 진행되요...
                       usingSpringWithDamping: 0.6,
                       // 그리구 0~1.0사이에 값을 지정할 수 있어요...
                       // 요만큼 튕긴다?? 튕겨요...
                       initialSpringVelocity: 1,    
                       // 이건 속도를 지정해주구요...
                       options: [.curveEaseIn],     
                       // 이건 해당 애니메이션이 어떤 유형으로 움직이는지 보여줘요...
                       // 아래에서 어떤게 있는지 한 번 알아볼게요...
                       animations: {                
                       // 우리 animate는 이렇게 사용해요... 
                       // 우리 animate 잘 사용해주세요...
                       // 마지막으로 self.를 지정해줘야해요...
                       self.animateView.alpha = 1
        })

 

간단하게 이렇게 사용해주고 있어요!!

 

이렇게 보면 어떻게 실행되는지 잘 모르실 거 같아서 한 번 코드로 준비해볼게요...

 

 

간단하게 구성은 이렇게 해봤어요

 

그리고 아래의 코드는 다음과 같이 해봤어요

 

extension ViewController {
    @objc private func frameAnimate(){
        UIView.animate(withDuration: 2,
                       delay: 0,
                       usingSpringWithDamping: 0.6,
                       initialSpringVelocity: 1,
                       options: [.curveEaseIn],
                       animations: {
                    
                        self.animateView.frame = .init(x: 0, y: 0, width: 100, height: 100)
        })

    }
    
    @objc private func boundsAnimate(){
        UIView.animate(withDuration: 2,
                       delay: 0,
                       usingSpringWithDamping: 0.6,
                       initialSpringVelocity: 1,
                       options: [.curveEaseIn],
                       animations: {
                        self.animateView.bounds = .init(x: -100, y: -100, width: 100, height: 100)
        })

    }
    
    @objc private func centerAnimate(){
        UIView.animate(withDuration: 2,
                       delay: 0,
                       usingSpringWithDamping: 0.6,
                       initialSpringVelocity: 1,
                       options: [.curveEaseIn],
                       animations: {
                        self.animateView.center = .init(x: 100, y: 100)
        })

    }
    
    @objc private func transformAnimate(){
        UIView.animate(withDuration: 2,
                       delay: 0,
                       usingSpringWithDamping: 0.6,
                       initialSpringVelocity: 1,
                       options: [.curveEaseIn],
                       animations: {
                        self.animateView.transform = .init(translationX: -10, y: -10)
        })

    }
    
    @objc private func alphaAnimate(){
        UIView.animate(withDuration: 2,
                       delay: 0,
                       usingSpringWithDamping: 0.6,
                       initialSpringVelocity: 1,
                       options: [.curveEaseIn],
                       animations: {
                        self.animateView.alpha = 0
        })

    }
    
    @objc private func backgroundColorAnimate(){
        UIView.animate(withDuration: 2,
                       delay: 0,
                       usingSpringWithDamping: 0.6,
                       initialSpringVelocity: 1,
                       options: [.curveEaseIn],
                       animations: {
                        self.animateView.backgroundColor = .orange
        })
    }
}

각자 frame, bounds, center, transform의 차이는 알 수 있을 거라 생각해요 ㅎㅎㅎㅎㅎ

 

이건 영상을 첨부해야 어떻게 표현이 되는지 알거라 생각을 하기 때문에~! 첨부할게요ㅎㅎㅎ

화면 기록 2020-07-02 오전 2.18.59.mov

1.03MB

 

+ option에 대해서 알아보자면 stackoverflow.com/questions/5161465/how-to-create-custom-easing-function-with-core-animation

How to create custom easing function with Core Animation?

에서 확인할 수 있듯이 애니메이션이 언제 빨라지고 느려지고 등속인지 판단해주는 옵션이랍니다. 잘 알아보고 쓰면 되겠죠??

이 옵션으로 어플의 분위기를 결정할 수 있기 때문에 디자이너와 잘 상의를 해보고 결정해주시면 될 거 같아요!!

 

+ UIView를 건드리기 때문에 background 스레드에서는 건드릴 수없어요.