CAAnimation — konsep kunci, CAAnimationGroup dan animasi layer

Apa itu CAAnimation?

CAAnimation — kelas abstrak Core Animation yang mendefinisikan antarmuka umum untuk semua animasi. Ini mengimplementasikan protokol CAMediaTiming (waktu, pengulangan, pembalikan otomatis) dan CAMediaTimingFillMode (perilaku sebelum/sesudah animasi). CAAnimation tidak dapat diinstansiasi langsung — gunakan salah satu subkelas: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition atau CAAnimation (melalui animationForKeyPath).

Setiap CAAnimation ditambahkan ke CALayer melalui metode add(_:forKey:). Parameter forKey adalah pengidentifikasi unik animasi pada layer. keyPath yang sama hanya dapat memiliki satu animasi aktif. Untuk mengganti animasi, gunakan removeAnimation(forKey:) sebelum menambahkan yang baru.

Menurut Apple, CAAnimation adalah perubahan sementara pada layer. Setelah animasi selesai, presentation layer kembali ke nilai model layer, jika fillMode dan isRemovedOnCompletion tidak diatur.

Hierarki Kelas CAAnimation

Core Animation menyediakan empat subkelas utama CAAnimation, masing-masing untuk skenario animasinya sendiri. Memahami hierarki membantu memilih tipe yang tepat untuk tugas.

CABasicAnimation adalah subkelas paling sederhana dan populer. CAKeyframeAnimation digunakan untuk lintasan kompleks (misalnya gerakan sepanjang kurva Bezier). CAAnimationGroup menjalankan beberapa animasi secara paralel. CATransition adalah transisi siap pakai antara gambar atau status konten.

CAMediaTiming — manajemen waktu

Protokol CAMediaTiming adalah bagian fundamental dari CAAnimation. Ini mendefinisikan properti waktu dasar: duration (durasi), repeatCount (jumlah pengulangan), repeatDuration (total durasi pengulangan), autoreverses (kembali ke awal), beginTime (waktu mulai relatif terhadap induk), timeOffset (pergeseran dalam satu siklus), speed (kecepatan pemutaran).

Properti fillMode (CAMediaTimingFillMode) menentukan tampilan layer sebelum (backwards) dan setelah (forwards) animasi. Nilai: removed (default — kembali ke model layer), forwards (tetap di status akhir), backwards (menampilkan status awal sebelum mulai), both (menggabungkan kedua perilaku). fillMode hanya berfungsi dengan isRemovedOnCompletion = false.

CAAnimation mewarisi CAMediaTiming dan dapat ditanamkan dalam animasi induk (CAAnimationGroup). Dalam hal ini, beginTime dihitung relatif terhadap awal induk, dan duration dibatasi oleh induk. Speed = 2.0 mempercepat animasi dua kali lipat.

CAAnimationGroup dan CAKeyframeAnimation

CAAnimationGroup menggabungkan beberapa CAAnimation ke dalam satu grup. Semua animasi anak berjalan paralel, jika beginTime tidak diatur untuk masing-masing. Grup memiliki duration sendiri yang membatasi durasi maksimum animasi anak. timingFunction grup diterapkan sebagai nilai default jika animasi anak tidak mengatur miliknya sendiri.

CAKeyframeAnimation menganimasikan properti melalui beberapa bingkai kunci yang ditentukan oleh array values. Parameter keyTimes (array NSNumber dari 0 hingga 1) menentukan stempel waktu untuk setiap bingkai. calculationMode menentukan interpolasi: linear, discrete (tanpa interpolasi), paced (kecepatan seragam), cubic (spline), cubicPaced.

import QuartzCore

// CAAnimationGroup — kombinasi animasi
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 — gerakan sepanjang lintasan
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 dengan nilai kustom
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 // relatif terhadap posisi saat ini
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup menjalankan fade, scale dan rotate secara paralel dengan duration 2.0. CAKeyframeAnimation dengan path dan calculationMode = .cubicPaced memberikan gerakan seragam sepanjang kurva Bezier dengan rotasi otomatis (rotationMode = .auto). bounceAnimation menggunakan isAdditive untuk perpindahan relatif.

Contoh Kode di Swift

Contoh lengkap CAAnimation untuk animasi layer kompleks menggunakan CATransition untuk perubahan konten dan CAAnimationGroup untuk pulsasi.

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 — transisi antar status
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Mengubah konten melalui transaksi
        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 dengan type: .fade menciptakan transisi halus antara dua status backgroundColor. CAAnimationGroup menggabungkan scale, opacity dan shadowOpacity untuk efek pulsasi. removeAllAnimations() mereset semua animasi dan mengembalikan layer ke nilai awal model layer.