CAAnimation — mga pangunahing konsepto, CAAnimationGroup at mga animasyon ng layer

Ano ang CAAnimation?

CAAnimation — abstract na Core Animation class na nagtatakda ng karaniwang interface para sa lahat ng animasyon. Ipinapatupad nito ang CAMediaTiming protocol (oras, pag-uulit, awtomatikong pagbalik) at CAMediaTimingFillMode (pag-uugali bago/pagkatapos ng animasyon). Ang CAAnimation ay hindi maaaring direktang i-instantiate — gamitin ang isa sa mga subclass: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition o CAAnimation (sa pamamagitan ng animationForKeyPath).

Ang bawat CAAnimation ay idinaragdag sa CALayer sa pamamagitan ng pamamaraang add(_:forKey:). Ang parameter na forKey ay isang natatanging identifier ng animasyon sa layer. Ang parehong keyPath ay maaari lamang magkaroon ng isang aktibong animasyon. Upang palitan ang isang animasyon, gamitin ang removeAnimation(forKey:) bago magdagdag ng bago.

Ayon sa Apple, ang CAAnimation ay isang pansamantalang pagbabago sa layer. Pagkatapos ng animasyon, ang presentation layer ay babalik sa mga halaga ng model layer, kung hindi nakatakda ang fillMode at isRemovedOnCompletion.

Hierarchy ng Klase ng CAAnimation

Nagbibigay ang Core Animation ng apat na pangunahing subclass ng CAAnimation, bawat isa para sa sarili nitong senaryo ng animasyon. Ang pag-unawa sa hierarchy ay tumutulong sa pagpili ng tamang uri para sa gawain.

Ang CABasicAnimation ay ang pinakasimple at pinakasikat na subclass. Ginagamit ang CAKeyframeAnimation para sa mga kumplikadong trajectory (hal. paggalaw sa Bezier curve). Ang CAAnimationGroup ay nagpapatakbo ng maraming animasyon nang magkakasabay. Ang CATransition ay isang handa na transition sa pagitan ng mga larawan o estado ng nilalaman.

CAMediaTiming — pamamahala ng oras

Ang CAMediaTiming protocol ay isang pangunahing bahagi ng CAAnimation. Tinutukoy nito ang mga pangunahing katangian ng oras: duration (tagal), repeatCount (bilang ng pag-uulit), repeatDuration (kabuuang tagal ng pag-uulit), autoreverses (pagbalik sa simula), beginTime (oras ng pagsisimula kaugnay ng parent), timeOffset (paglipat sa loob ng isang cycle), speed (bilis ng pag-playback).

Ang property na fillMode (CAMediaTimingFillMode) ay tumutukoy sa pagpapakita ng layer bago (backwards) at pagkatapos (forwards) ng animasyon. Mga halaga: removed (default — pagbalik sa model layer), forwards (nananatili sa huling estado), backwards (nagpapakita ng paunang estado bago magsimula), both (pinagsasama ang parehong pag-uugali). Ang fillMode ay gumagana lamang sa isRemovedOnCompletion = false.

Ang CAAnimation ay nagmamana ng CAMediaTiming at maaaring ilagay sa loob ng parent animation (CAAnimationGroup). Sa kasong ito, ang beginTime ay kinakalkula kaugnay ng simula ng parent, at ang duration ay nililimitahan ng parent. Ang Speed = 2.0 ay nagpapabilis ng animasyon nang dalawang beses.

CAAnimationGroup at CAKeyframeAnimation

Pinagsasama ng CAAnimationGroup ang maraming CAAnimation sa isang grupo. Lahat ng child animation ay tumatakbo nang magkakasabay, kung hindi nakatakda ang beginTime para sa bawat isa. Ang grupo ay may sariling duration na naglilimita sa maximum na tagal ng child animation. Ang timingFunction ng grupo ay inilalapat bilang default na halaga kung ang child animation ay hindi nagtakda ng sarili nito.

Ang CAKeyframeAnimation ay nag-animate ng isang property sa pamamagitan ng maraming keyframe na tinukoy ng values array. Ang parameter na keyTimes (NSNumber array mula 0 hanggang 1) ay tumutukoy sa mga timestamp para sa bawat frame. Ang calculationMode ay tumutukoy sa interpolation: linear, discrete (walang interpolation), paced (uniform speed), cubic (spline), cubicPaced.

import QuartzCore

// CAAnimationGroup — kombinasyon ng mga animasyon
func complexLayerAnimation(_ layer: CALayer) {
    let fade = CABasicAnimation(keyPath: "opacity")
    fade.fromValue = 1.0
    fade.toValue = 0.3

    let scale = CABasicAnimation(keyPath: "transform.scale")
    scale.fromValue = 1.0
    scale.toValue = 1.5

    let rotate = CABasicAnimation(keyPath: "transform.rotation.z")
    rotate.fromValue = 0
    rotate.toValue = Double.pi * 2

    let group = CAAnimationGroup()
    group.animations = [fade, scale, rotate]
    group.duration = 2.0
    group.repeatCount = .infinity
    group.autoreverses = true

    layer.add(group, forKey: "pulse")
}

// CAKeyframeAnimation — paggalaw sa trajectory
func animateAlongPath(_ layer: CALayer) {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addCurve(
        to: CGPoint(x: 200, y: 300),
        controlPoint1: CGPoint(x: 100, y: 0),
        controlPoint2: CGPoint(x: 100, y: 300)
    )

    let anim = CAKeyframeAnimation(keyPath: "position")
    anim.path = path.cgPath
    anim.duration = 1.5
    anim.calculationMode = .cubicPaced
    anim.rotationMode = .auto
    anim.fillMode = .forwards
    anim.isRemovedOnCompletion = false

    layer.add(anim, forKey: "pathAnim")
    layer.position = CGPoint(x: 200, y: 300)
}

// CAKeyframeAnimation na may custom na halaga
func bounceAnimation(_ layer: CALayer) {
    let bounce = CAKeyframeAnimation(keyPath: "position.y")
    bounce.values = [0, -50, 0, -25, 0, -10, 0]
    bounce.keyTimes = [0, 0.15, 0.3, 0.45, 0.6, 0.8, 1.0]
    bounce.duration = 0.8
    bounce.timingFunction = CAMediaTimingFunction(name: .easeOut)
    bounce.isAdditive = true // kaugnay ng kasalukuyang posisyon
    layer.add(bounce, forKey: nil)
}

Ang CAAnimationGroup ay nagpapatupad ng fade, scale at rotate nang magkakasabay na may duration 2.0. Ang CAKeyframeAnimation na may path at calculationMode = .cubicPaced ay nagbibigay ng unipormeng paggalaw sa Bezier curve na may awtomatikong pag-ikot (rotationMode = .auto). Ang bounceAnimation ay gumagamit ng isAdditive para sa relatibong displacement.

Mga Halimbawa ng Code sa Swift

Kumpletong halimbawa ng CAAnimation para sa kumplikadong layer animation gamit ang CATransition para sa pagbabago ng nilalaman at CAAnimationGroup para sa pulsation.

import UIKit
import QuartzCore

class AnimationDemoView: UIView {

    private let demoLayer = CALayer()
    private var currentColor: CGColor = UIColor.systemBlue.cgColor

    override func layoutSubviews() {
        super.layoutSubviews()
        demoLayer.frame = CGRect(x: bounds.midX - 40, y: bounds.midY - 40,
                                 width: 80, height: 80)
        demoLayer.backgroundColor = currentColor
        demoLayer.cornerRadius = 12
        layer.addSublayer(demoLayer)
    }

    func animateTransition() {
        // CATransition — transition sa pagitan ng mga estado
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Pagbabago ng nilalaman sa pamamagitan ng transaksyon
        currentColor = currentColor == UIColor.systemBlue.cgColor
            ? UIColor.systemRed.cgColor
            : UIColor.systemBlue.cgColor
        demoLayer.backgroundColor = currentColor
    }

    func startPulse() {
        let scaleUp = CABasicAnimation(keyPath: "transform.scale")
        scaleUp.fromValue = 1.0
        scaleUp.toValue = 1.3

        let fadeOut = CABasicAnimation(keyPath: "opacity")
        fadeOut.fromValue = 1.0
        fadeOut.toValue = 0.6

        let glow = CABasicAnimation(keyPath: "shadowOpacity")
        glow.fromValue = 0.0
        glow.toValue = 0.8

        let group = CAAnimationGroup()
        group.animations = [scaleUp, fadeOut, glow]
        group.duration = 1.2
        group.autoreverses = true
        group.repeatCount = .infinity
        group.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

        demoLayer.add(group, forKey: "pulse")
    }

    func stopAnimations() {
        demoLayer.removeAllAnimations()
        demoLayer.transform = CATransform3DIdentity
        demoLayer.opacity = 1.0
        demoLayer.shadowOpacity = 0.0
    }
}

Ang CATransition na may type: .fade ay lumilikha ng maayos na transition sa pagitan ng dalawang backgroundColor state. Pinagsasama ng CAAnimationGroup ang scale, opacity at shadowOpacity para sa pulsation effect. Ang removeAllAnimations() ay nagre-reset ng lahat ng animasyon at ibinabalik ang layer sa orihinal na halaga ng model layer.