CoreAnimation과 함께 즐기기

이 기사에서는 순수한 CAAnimation을 사용하여 이와 같은 애니메이션을 만들 것입니다.



이 애니메이션은 다음 조각을 결합하여 구성됩니다.

로켓 애니메이션: 풍선을 빠른 속도로 밀어 올려 로켓의 이륙을 시뮬레이션합니다

.

스프링 애니메이션: 풍선을 회전하고 크기를 조정하여 강한 압력을 받는 것처럼 보이게 합니다

.

베지어 애니메이션: 자연스럽게 움직이는 것처럼 보이도록 풍선을 베지어 경로를 따라 위로 이동합니다

.

3d 회전 애니메이션: 바람의 영향을 받는 것처럼 보이도록 풍선을 3D로 회전합니다

.

불투명도 애니메이션: 부드럽게 사라짐

우리는 그들 모두를 차례로 살펴볼 것입니다.

로켓 애니메이션

이 애니메이션은 짧은 시간 동안 로켓의 이륙 효과를 모방합니다.
시작점에서 끝점까지 직선을 따라 레이어를 이동하는 것 외에는 아무 작업도 수행하지 않습니다.

스프링 애니메이션

이 애니메이션은 애니메이션 개체를 만들기 위해 위의 로켓 애니메이션과 동시에 발생합니다.
튀는 애니메이션을 추가하여 더 재미있습니다. 따라서 기본적으로 레이어를 이동하지 않을 것입니다.
이 애니메이션에서는 크기를 더 크게 만든 다음 시간을 더 작게 만듭니다.

레이어를 로켓처럼 보이게 하기 위해 레이어를 매우 작은 값으로 수평으로 확장합니다.
시작 부분에 표시한 다음 애니메이션의 끝에서 다시 일반 측면으로 크기를 조정합니다.

이것을 위의 로켓 애니메이션과 결합한 후 애니메이션은 이제 다음과 같습니다.

베지어 애니메이션

로켓 애니메이션의 끝점에 도달한 후 객체를 베지어 경로를 따라 이동합니다.
베지어 경로가 무엇인지 모르는 경우 this link 을 살펴보십시오.

즉, 베지어 경로는 control points 세트로 정의되어 시작과 끝점 사이에 부드러운 연결을 만드는 곡선입니다. 베지어 경로에 대해 자세히 설명하지는 않겠습니다. 설명하기가 상당히 복잡하고 고통스럽기 때문입니다. 관심이 있으시면 위의 링크를 읽어보시기 바랍니다. 그러나 그들이 무엇인지 쉽게 상상할 수 있도록 아래 이미지를 볼 수 있습니다.




이번에는 베지어 경로 애니메이션을 사용하여 보기를 덜 지루하고 더 자연스럽게 만듭니다.

베지어 애니메이션 만들기는 매우 쉽습니다. 우리가 해야 할 일은 베지어 경로를 만드는 것뿐입니다. 그러면 CAAnimation이 나머지를 처리합니다.

베지어 경로를 만듭니다.

let path = UIBezierPath()
path.move(to: startPoint)

let endPoint = CGPoint(x: posX + CGFloat.random(in: ), y: 0)
let controlPoint1 = CGPoint(x: , y: )
let controlPoint2 = CGPoint(x: , y: )
path.addCurve(to: endPoint, controlPoint1: controlPoint1, controlPoint2: controlPoint2)

그런 다음 다음과 같이 CAAnimation을 만듭니다.

let animation = CAKeyframeAnimation(keyPath: #keyPath(CALayer.position))
animation.path = path.cgPath

이 설정을 사용하면 베지어 애니메이션이 다음과 같이 보입니다.

3D 회전 애니메이션

애니메이션 가능한 속성이기도 한 CALayer의 transform 속성에 애니메이션을 적용하여 이 효과를 쉽게 생성할 수 있습니다. CAAnimation은 회전을 지원하므로
모두 3축이지만 피사계 심도 효과가 없으므로 축척 요소를 추가합니다.
어떻게든 그 효과를 시뮬레이트하여 실제 3D 회전처럼 보이게 합니다.

샘플 코드는 다음과 같습니다.

let animation = CABasicAnimation(keyPath: #keyPath(CALayer.transform))

let angle = CGFloat.random(in: ) * CGFloat.pi
let rotation = CATransform3DMakeRotation(angle, 0, 1, 0)
let finalScale = CGFloat.random(in: 2...5)
let transoform = CATransform3DScale(rotation, finalScale, finalScale, 1)
animation.toValue = transoform

이 애니메이션만 있으면 다음과 같이 보입니다.

불투명도 애니메이션

아마도 이것이 가장 쉬운 방법일 것입니다. 레이어의 불투명도 값을 제어하는 ​​기본 애니메이션에 애니메이션을 적용하기만 하면 됩니다.

let animation = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))
animation.toValue = 0

모든 애니메이션을 함께 결합

CAAnimation을 사용하면 여러 애니메이션을 하나로 그룹화하고 동시에 실행할 수 있습니다.
CAAnimationGroup이라는 CAAnimation의 하위 클래스를 사용하여 이를 수행합니다.
CAAnimationGroup 구성은 우리가 구성해야 하는 한 가지를 제외하고는 그리 어렵지 않습니다.
원하는 것을 달성하기 위해 모든 하위 애니메이션의 시작 시간과 종료 시간을 적절하게 조정합니다.

let animationGroup = CAAnimationGroup()
animationGroup.animations = [
  // put your sub animations here
]

그런 다음 평소와 같이 전체 애니메이션의 지속 시간을 제어합니다.

animationGroup.duration = duration

애니메이션이 완료된 후 청소와 같은 작업을 수행하고 싶을 것입니다. 그렇다면 CATransaction을 사용할 수 있습니다.

CATransaction.begin()
CATransaction.setCompletionBlock {
  // perform cleaning here
}
iconView.layer.add(animationGroup, forKey: nil)
CATransaction.commit()

위의 모든 애니메이션을 함께 결합하면 결국 다음과 같은 최종 애니메이션을 얻게 됩니다.



여기에서 소스 코드를 확인하십시오: https://github.com/congnd/FunWithCoreAnimation