CAAnimation — кључни појмови, CAAnimationGroup и анимације слојева

Аутор: IT Sectr Објављено: 2026-03-01 Време читања: 8 мин

CAAnimation — апстрактна базна класа Core Animation која дефинише заједнички интерфејс за све типове анимација: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition. Чланак објашњава хијерархију класа, кључне особине, груписање анимација и практичне примјере у Swift.

Главно

  • CAAnimation — апстрактна базна класа Core Animation од које наслеђују CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition
  • CAAnimationGroup — паралелно извршавање више анимација са заједничким duration и timingFunction
  • CAKeyframeAnimation — анимација по кључним кадровима са низовима вредности и временских ознака
  • CAMediaTiming — протокол управљања временом: duration, repeatCount, autoreverses, timeOffset
  • CATransition — преддефинисани прелази између стања слоја (fade, push, moveIn, reveal)

Шта је CAAnimation?

CAAnimation — апстрактна класа Core Animation која дефинише заједнички интерфејс за све анимације. Имплементира протокол CAMediaTiming (време, понављање, аутоматско враћање) и CAMediaTimingFillMode (понашање пре/после анимације). CAAnimation се не може директно инстанцирати — користите један од подкласа: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition или CAAnimation (путем animationForKeyPath).

Свака CAAnimation се додаје у CALayer путем методе add(_:forKey:). Параметар forKey је јединствени идентификатор анимације на слоју. Исти keyPath може имати само једну активну анимацију. За замену анимације, користите removeAnimation(forKey:) пре додавања нове.

Према Apple, CAAnimation је привремена промена слоја. Након завршетка анимације, presentation layer се враћа на вредности model layer, ако нису постављени fillMode и isRemovedOnCompletion.

Хијерархија класа CAAnimation

Core Animation пружа четири главне подкласе CAAnimation, сваку за сопствени сценариј анимације. Разумевање хијерархије помаже одабрати прави тип за задатак.

КласаНаменаКључне карактеристике
CABasicAnimationАнимација једног својства од A до BfromValue, toValue, byValue, keyPath
CAKeyframeAnimationАнимација по више кључних кадроваvalues, keyTimes, path, calculationMode
CAAnimationGroupГруписање више анимацијаниз animations, јединствени duration
CATransitionПрелаз између стања слојаtype (fade/push/moveIn/reveal), subtype, startProgress

CABasicAnimation — најједноставнија и најпопуларнија подкласа. CAKeyframeAnimation се користи за сложене путање (нпр. кретање по Безијеровој кривој). CAAnimationGroup покреће више анимација паралелно. CATransition — готов прелаз између слика или стања садржаја.

CAMediaTiming — управљање временом

Протокол CAMediaTiming — фундаментални део CAAnimation. Дефинише основне временске особине: duration (трајање), repeatCount (број понављања), repeatDuration (укупно трајање понављања), autoreverses (повратак на почетак), beginTime (време почетка у односу на родитеља), timeOffset (помак у оквиру једног циклуса), speed (брзина репродукције).

Особина fillMode (CAMediaTimingFillMode) одређује приказ слоја пре (backwards) и после (forwards) анимације. Вредности: removed (подразумевано — повратак на model layer), forwards (остаје у коначном стању), backwards (приказује почетно стање пре почетка), both (комбинује оба понашања). fillMode ради само када је isRemovedOnCompletion = false.

CAAnimation наслеђује CAMediaTiming и може бити угнијеждена у родитељску анимацију (CAAnimationGroup). У овом случају, beginTime се рачуна у односу на почетак родитеља, а duration је ограничен родитељским. Speed = 2.0 убрзава анимацију два пута.

CAAnimationGroup и CAKeyframeAnimation

CAAnimationGroup спаја више CAAnimation у једну групу. Све подредне анимације се покрећу паралелно, ако није постављен beginTime за сваку. Група има сопствени duration који ограничава максимално трајање подредних анимација. timingFunction групе се примењује као подразумевана вредност ако подредна анимација није поставила сопствену.

CAKeyframeAnimation анимира својство кроз више кључних кадрова дефинисаних низом values. Параметар keyTimes (низ NSNumber од 0 до 1) одређује временске ознаке за сваки кадар. calculationMode одређује интерполацију: linear, discrete (без интерполације), paced (једнолика брзина), cubic (сплајн), cubicPaced.

swift
import QuartzCore

// CAAnimationGroup — комбинација анимација
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 — кретање по путањи
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 са прилагођеним вредностима
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 // у односу на тренутну позицију
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup извршава fade, scale и rotate паралелно са duration 2.0. CAKeyframeAnimation са path и calculationMode = .cubicPaced осигурава једнолико кретање дуж Безијерове криве са аутоматским окретањем (rotationMode = .auto). bounceAnimation користи isAdditive за релативно померање.

Примјери кода у Swift

Пун примјер CAAnimation за сложену анимацију слоја коришћећем CATransition за промену садржаја и CAAnimationGroup за пулсацију.

swift
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 — прелаз између стања
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Мењамо садржај кроз транзакцију
        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
    }
}

CATransition са type: .fade ствара гладак прелаз између два стања backgroundColor. CAAnimationGroup спаја scale, opacity и shadowOpacity за ефекат пулсације. removeAllAnimations() ресетује све анимације и враћа слој на почетне вредности model layer.

Често постављана питања

Која је разлика између CABasicAnimation и CAKeyframeAnimation?

CABasicAnimation анимира својство од почетне (fromValue) до крањне (toValue) вредности са једноликом интерполацијом. CAKeyframeAnimation омогућава постављање низа посредних вредности (values) и временских ознака (keyTimes) за нелинеарну анимацију по кључним кадровима, укључујући кретање по кривој кроз path.

Када користити CAAnimationGroup?

CAAnimationGroup је потребан када више анимација треба да се извршавају паралелно са гаранцијом синхронизације: duration групе ограничава све подредне анимације. Користите групу за комбиноване ефекте: скалирање + промена прозирности + ротација истовремено.

Шта је fillMode у CAAnimation?

fillMode одређује приказ слоја пре (backwards) и после (forwards) анимације. Вредност .forwards оставља слој у коначном стању након завршетка анимације (захтева isRemovedOnCompletion = false). .both комбинује backwards (почетно стање пре почетка) и forwards.

Како разликовати CAAnimation од CALayer анимације?

CAAnimation је објекат анимације (инструкција) који се додаје у CALayer путем layer.add(animation, forKey:). Анимација постоји као одвојен објекат, може се поново користити (са копирањем) и управља се путем CAMediaTiming. Слој може имати више анимација са различитим кључевима.

Резиме

  • CAAnimation — апстрактна базна класа Core Animation са имплементацијом CAMediaTiming и CAMediaTimingFillMode
  • Хијерархија класа — CABasicAnimation (једно својство), CAKeyframeAnimation (више кадрова), CAAnimationGroup (груписање), CATransition (прелази)
  • CAMediaTiming — протокол са duration, repeatCount, autoreverses, beginTime, timeOffset, speed, fillMode
  • CAAnimationGroup — паралелно извршавање анимација са јединственим duration и timingFunction
  • CAKeyframeAnimation — анимација по values/keyTimes или path (Безијерова крива) са calculationMode
  • CATransition — преддефинисани типови: fade, push, moveIn, reveal са могућношћу конфигурисања subtype
  • Управљање — layer.add(animation, forKey:), removeAnimation(forKey:), removeAllAnimations()

Развићемо мобилну апликацију под кључ

IT Sectr креира iOS и Android апликације за стартапе и предузећа од 2017. године. Саветоваћемо вас и предложити најбоље решење.

Разговарајте о пројекту

Прочитајте такође