Aug 02, 2021, TIL (Today I Learned) - Basic Animation
학습내용
CAAnimation: Core Animation의 추상 클래스. 실제로 사용되지는 않고해당 클래스를 상속받아서 실제로 사용합니다.
CALayer: animation과 view에 있는 이미지 기반의 컨텐츠를 표현할 때 사용
A Basic Animation
class ViewController: UIViewController {
private var pink: CALayer = CALayer()
override func viewDidLoad() {
super.viewDidLoad()
pink.frame = CGRect(x: 30, y: 50, width: 50, height: 50)
pink.backgroundColor = UIColor.systemPink.cgColor
view.layer.addSublayer(pink)
let action = UIAction { (action) in
let animation = CABasicAnimation()
animation.keyPath = "position.x"
animation.fromValue = 30
animation.toValue = 150
animation.duration = 0.5
self.pink.add(animation, forKey: "basic")
self.pink.position = CGPoint(x: 150, y: 50)
}
let button = UIButton(frame: CGRect(X: 300, y: 50, width: 80, height: 40), primaryAction: action)
button.setTitle("애니메이션", for: .normal)
button.setTitleColor(.black, for: .normal)
view.addSubview(button)
}
}
presentationLayer: 애니메이션이 동작할 때 모습을 뜻함
animation.fromValue = 30
animation.toValue = 150
modelLayer: 애니메이션이 동작한 후 실제로 위치할 곳을 나타냄
self.pink.position = CGPoint(x: 150, y: 50)
이 두 layer는 관념적인 표현입니다. fromValue와 toValue 설정을 통해서 presentationLaye를 설정할 수 있고. position 설정을 통해서 modelLayer설정을 할 수 있습니다.
let action = UIAction { (action) in
let animation = CABasicAnimation()
animation.keyPath = "position.x"
animation.fromValue = 30
animation.toValue = 150
animation.duration = 0.5
animation.fillMode = .forwards
animation.isRemovedOnCompletion = false
self.pink.add(animation, forKey: "basic")
}
fillMode
와 isRemoved
메서드를 활용하여 애니메이션이 진행된 후 물체가 마지막 지점에 머무르게 설정할 수도 있습니다. presentation을 되돌리지않는 것이고 이는 마지막 position을 정하는 것과 다릅니다.
keyframeAnimation
let action = UIAction { (action) in
let animation = CABasicAnimation()
animation.keyPath = "position.x"
animation.values = [0, 10, -10, 10, 0]
animation.toValue = [NSNumber(value: 0),NSNumber(value: 0), NSNumber(value: 1/6.0),NSNumber(value: 3/6.0),NSNumber(value: 5/6.0),NSNumber(value: 1)]
animation.duration = 0.4
self.pink.add(animation, forKey: "shake")
animation.additive = true
// 상대적 위치에서 shake!
}
Orbit
let action = UIAction { (action) in
let boundingRect = CGRect(x: -150, y: 150, width: 300, height: 300)
let orbit = CAKeyframeAnimation()
orbit.keyPath = "position"
orbit.path = CGPath(ellipseIn: boundingRect, transform: nil)
orbit.duration = 4
orbit.isAdditive = true
orbit.repeatCount = 10000
orbit.calculationMode = .paced
orbit.rotationMode = .rotateAuto
self.pink.add(orbit, forKey: "orbit")
}
and more about Core Animation...
Core Animation is not a drawing system itself. It is an infrastructure for compositing and manipulating your app’s content in hardware. At the heart of this infrastructure are layer objects, which you use to manage and manipulate your content. A layer captures your content into a bitmap that can be manipulated easily by the graphics hardware. In most apps, layers are used as a way to manage the content of views but you can also create standalone layers depending on your needs.
Author And Source
이 문제에 관하여(Aug 02, 2021, TIL (Today I Learned) - Basic Animation), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@inwoodev/Aug-02-2021-TIL-Today-I-Learned-Basic-Animation저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)