Project 11 - Animation☝🏻

Animate

options

• .allowUserInteraction : 애니메이션 실행 중 user interface 활성화
• .repeat : 애니메이션 무한 반복
• .autoreverse : 애니메이션 앞뒤로 실행 (반복 옵션과 결합 필수)
• .curveEaseInOut : 빨라졌다가 다시 느려지는 효과
• .curveEaseIn : 점점 빨라짐
• .curveEaseOut : 점점 느려짐
• .transitionFlipFromLeft : 왼쪽에서부터 뒤집히는 효과

색상 바꾸기

private func changeColor(_ color: UIColor) {
    UIView.animate(withDuration: self.duration, animations: {
        self.animateView.backgroundColor = color
    }, completion: nil)
}

회전하기

private func rotateView(_ angel: Double) {
    UIView.animate(withDuration: duration, delay: delay, options: [.repeat], animations: {
        self.animateView.transform = CGAffineTransform(rotationAngle: CGFloat(angel))
    }, completion: nil)
}

CGAffineTransform
뷰의 프레임을 계산하지 않고 2D 그래픽을 그려준다.
객체를 회전, 크기 조정, 변환 또는 기울이는 데 사용 가능하다.

다중 색상 바꾸기

private func multiColor(_ firstColor: UIColor, _ secondColor: UIColor) {
    UIView.animate(withDuration: duration, animations: {
        self.animateView.backgroundColor = firstColor
        }, completion: { finished in
            self.changeColor(secondColor)
    })
}

위치 바꾸기

private func multiPosition(_ firstPosition: CGPoint, _ secondPosition: CGPoint) {
    func simplePosition(_ position: CGPoint) {
        UIView.animate(withDuration: self.duration, animations: {
            self.animateView.frame.origin = position
        }, completion: nil)
    }
        
    UIView.animate(withDuration: self.duration, animations: {
        self.animateView.frame.origin = firstPosition
    }, completion: { finished in
        simplePosition(secondPosition)
    })
}

커브

private func curvePath(_ endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint) {
    let path = UIBezierPath()
        
    path.move(to: self.animateView.center)
    path.addCurve(to: endPoint, controlPoint1: controlPoint1, controlPoint2: controlPoint2)
        
    let anim = CAKeyframeAnimation(keyPath: "position")
    anim.path = path.cgPath
    anim.duration = self.duration
        
    self.animateView.layer.add(anim, forKey: "animate position along path")
    self.animateView.center = endPoint
}

UIBezierPath
직선 및 곡선으로 된 path 커스텀

CAKeyframeAnimation
특정 시간(키 프레임)에 객체가 가져야 할 값을 지정하고, 그 사이의 값을 보간(interpolation)하는 방법으로 구현
예를 들어, 공이 튀어올랐을 때를 가정하면, 공 위치 초기값, 튀어 오른 최댓값, 다시 바닥에 떨어졌을 때의 값만 지정하고 나머지 값은 자동으로 계산되도록 해준다.

색과 크기 바꾸기

private func colorFrameChange(_ firstFrame: CGRect, _ secondFrame: CGRect, _ thirdFrame: CGRect, _ firstColor: UIColor, _ secondColor: UIColor, _ thirdColor: UIColor) {
    UIView.animate(withDuration: self.duration, animations: {
        self.animateView.backgroundColor = firstColor
        self.animateView.frame = firstFrame
    }, completion: { finished in
        UIView.animate(withDuration: self.duration, animations: {
            self.animateView.backgroundColor = secondColor
            self.animateView.frame = secondFrame
        }, completion: { finished in
            UIView.animate(withDuration: self.duration, animations: {
                self.animateView.backgroundColor = thirdColor
                self.animateView.frame = thirdFrame
            }, completion: nil)
        })
    })
}

흐려지기

private func viewFadeIn() {
    let secondView = UIImageView(image: UIImage(named: "2"))
        
    secondView.frame = self.animateView.frame
    secondView.alpha = 0.0
        
    view.insertSubview(secondView, aboveSubview: self.animateView)
        
    UIView.animate(withDuration: duration, delay: delay, options: .curveEaseOut, animations: {
        secondView.alpha = 1.0
        self.animateView.alpha = 0.0
    }, completion: nil)
}

터지기

private func Pop() {
    UIView.animate(withDuration: duration / 4, animations: {
        self.animateView.transform = CGAffineTransform(scaleX: CGFloat(self.scale), y: CGFloat(self.scale))
    }, completion: { finished in
        UIView.animate(withDuration: self.duration / 4, animations: {
            self.animateView.transform = CGAffineTransform.identity
        })
    })
}

CGAffineTransform.identity
원래 상태로 되돌리기

다중 액션 - .concatenating

private func animation(_ view: UIView) {
    let scaleAnimation = CGAffineTransform(scaleX: 2.0, y: 2.0)
    let rotateAnimation = CGAffineTransform(rotationAngle: .pi)
    let moveAnimation = CGAffineTransform(translationX: 0, y: -200)
        
    let concat = scaleAnimation.concatenating(rotateAnimation).concatenating(moveAnimation)
        
    UIView.animate(withDuration: 1, delay: 1, options: [], animations: {
        view.transform = concat
    }, completion: nil)
}