[week15] UIView Animations

UIView Animation

Asset의 사진에 애니메이션 효과주기

animate(withDuration:delay:options:animations:completion:)

• 지정된 기간, 지연, 옵션 및 컴플리션 핸들러를 사용하여 하나 이상의 뷰에 대한 변경 사항을 애니메이션으로 표시합니다.

animateKeyframes(withDuration:delay:options:animations:completion:)

• 현재 뷰에 대한 키프레임 기반 애니메이션을 설정하는 데 사용할 수 있는 애니메이션 블록 객체를 만듭니다.
• addKeyframe(withRelativeStartTime:relativeDuration:animations:) 메서드를 사용하여 키프레임 애니메이션의 단일 프레임에 대한 타이밍 및 애니메이션 값을 지정합니다.

애니메이션 동작

좌우 진동 (에러를 만난 세레나)

@IBAction func touchUpVibrateButton(_ sender: UIButton) {
    UIView.animateKeyframes(withDuration: 0.1, delay: 0, options: [.autoreverse, .repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5) {
            self.myImage.frame.origin.x -= 5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.myImage.frame.origin.x += 10
        }
    }

위 아래 크기 변경 (새 맥북을 산 세레나)

@IBAction func touchUpScaleButton(_ sender: UIButton) {
    UIView.animateKeyframes(withDuration: 0.5, delay: 0, options: [.repeat, .calculationModeCubic], animations: {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/2.0) {
            self.imageView.transform = CGAffineTransform(scaleX: 1, y: 1.5)
        }
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/2.0) {
            self.imageView.transform = CGAffineTransform(scaleX: 1.5, y: 1)
        }
        UIView.addKeyframe(withRelativeStartTime: 1.0/2.0, relativeDuration: 1) {
            self.imageView.transform = CGAffineTransform(scaleX: 1.5, y: 1)
        }
        UIView.addKeyframe(withRelativeStartTime: 1.0/2.0, relativeDuration: 1) {
            self.imageView.transform = CGAffineTransform(scaleX: 1, y: 1.5)
        }
    })
}

회전 (Custom)

@IBAction func touchUpRotationButton(_ sender: UIButton) {
    UIView.animateKeyframes(withDuration: 0.5, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25) {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat(Float.pi / 2))
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat(Float.pi))
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat(Float.pi * 3 / 2))
        }
        UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
            self.imageView.transform = CGAffineTransform(rotationAngle: CGFloat(0))
        }
    }
}

투명도 값 조정

• 투명도 값을 조정하는 것은 UIView의 Animatable한 6가지의 요소중 하나입니다.

@IBAction func touchUpAlphaButton(_ sender: UIButton) {
    UIView.animateKeyframes(withDuration: 0.5, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.25) {
            self.imageView.alpha = 0
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.imageView.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.25) {
            self.imageView.alpha = 0.75
        }
        UIView.addKeyframe(withRelativeStartTime: 0.75, relativeDuration: 0.25) {
            self.imageView.alpha = 1
        }
    }
}

애니메이션 효과 Reset

@IBAction func touchUpResetButton(_ sender: UIButton) {
    imageView.layer.removeAllAnimations()
}

📚 참고 링크

• 🍎Apple Docs: animate(withDuration:delay:options:animations:completion:)
• 🍎Apple Docs: animateKeyframes(withDuration:delay:options:animations:completion:)
• 🍎Apple Docs: addKeyframe(withRelativeStartTime:relativeDuration:animations:)
• 📘blog: Animate Method
• 📘blog: 애니메이션 효과