UIView.animate: nó là gì, hoạt ảnh thuộc tính UIView trong iOS

UIView.animate là gì?

UIView.animate là một phương thức tĩnh của lớp UIView, được giới thiệu trong iOS 4 (2010). Nó cung cấp một API khai báo để tạo hoạt ảnh cho các thuộc tính có thể tạo hoạt ảnh của UIView: frame, bounds, center, alpha, transform, backgroundColor. Phương thức này chấp nhận một khối (bao đóng) với các thay đổi thuộc tính — hệ thống tự động tạo CABasicAnimation cho mỗi thuộc tính được thay đổi.

Cú pháp khối đã thay thế beginAnimations/commitAnimations cũ (iOS 2-3) và trở thành tiêu chuẩn hoạt ảnh trong UIKit. Các hoạt ảnh UIView.animate chạy trên luồng chính và không chặn giao diện người dùng. Theo mặc định, thời lượng hoạt ảnh là 0.25 giây với đường cong easeInOut.

Theo Apple WWDC 2023, cách tiếp cận hoạt ảnh được khuyến nghị trong các dự án mới là SwiftUI với các bộ điều chỉnh .animation() và .transition(), nhưng UIView.animate vẫn là công cụ chính để hỗ trợ iOS 16 trở xuống, cũng như cho các chuyển tiếp tùy chỉnh phức tạp.

Tham số và tùy chọn hoạt ảnh

UIView.animate cung cấp ba tham số chính: duration (thời lượng tính bằng giây), delay (độ trễ trước khi bắt đầu) và options (tập hợp các mặt nạ bit UIView.AnimationOptions). Options bao gồm curve (easeInOut, easeIn, easeOut, linear), repeat, autoreverse, allowUserInteraction, beginFromCurrentState và overrideInheritedDuration.

Tham số options được kết hợp qua một mảng: [.curveEaseOut, .repeat, .autoreverse]. Hoạt ảnh với repeat và autoreverse đưa View trở về trạng thái ban đầu một cách mượt mà và lặp lại vô thời hạn. Để có số lần lặp hữu hạn, hãy sử dụng animateKeyframes.

Hoạt ảnh Spring qua UIView.animate

Hoạt ảnh Spring thêm hiệu ứng lò xo vật lý: vật thể không chỉ di chuyển từ điểm A đến B, mà còn vượt quá mục tiêu với dao động tắt dần. Tham số: usingSpringWithDamping (độ giảm chấn 0-1, trong đó 0 là dao động tối đa) và initialSpringVelocity (vận tốc lò xo ban đầu).

Apple khuyến nghị usingSpringWithDamping trong khoảng 0.4-0.8 cho các hoạt ảnh UI tự nhiên. Giá trị 0.5 tạo ra độ nảy đáng chú ý mà không có cảm giác "cao su". initialSpringVelocity = 1.0 tương ứng với tốc độ 1 pt/giây. Ở 0, hoạt ảnh bắt đầu từ trạng thái nghỉ.

// Ví dụ hoạt ảnh spring và keyframe
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // Hoạt ảnh spring với giảm chấn
        UIView.animate(
            withDuration: 0.8,
            delay: 0,
            usingSpringWithDamping: 0.5,
            initialSpringVelocity: 1.0,
            options: [.allowUserInteraction],
            animations: {
                self.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
                self.alpha = 0.7
            },
            completion: { _ in
                UIView.animate(withDuration: 0.3) {
                    self.transform = .identity
                    self.alpha = 1.0
                }
            }
        )
    }

    func slideIn(from offset: CGFloat) {
        self.transform = CGAffineTransform(translationX: offset, y: 0)
        self.alpha = 0.0

        UIView.animate(
            withDuration: 0.6,
            delay: 0.1,
            options: [.curveEaseOut]
        ) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

Hoạt ảnh Keyframe

UIView.animateKeyframes cho phép bạn chia một hoạt ảnh thành nhiều bước (keyframe), mỗi bước có thời gian và thời lượng tương đối riêng. Phương thức addKeyframe(withRelativeStartTime:relativeDuration:) chấp nhận các giá trị thời gian từ 0 đến 1 so với tổng thời lượng hoạt ảnh.

Hoạt ảnh keyframe hữu ích cho các hiệu ứng nhiều giai đoạn: xung nút (tăng → tạm dừng → trở lại), xuất hiện tuần tự phần tử, biến dạng phức tạp với trạng thái trung gian. Mỗi keyframe có thể có đường cong hoạt ảnh riêng qua options.

// Hoạt ảnh keyframe với chuỗi phức tạp
func complexPulse() {
    UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            self.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            self.alpha = 0.8
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

// Hoạt ảnh với bao đóng lồng nhau
func animateCardTransition() {
    UIView.animate(withDuration: 0.4, delay: 0, options: [.curveEaseOut]) {
        self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    } completion: { _ in
        UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseIn]) {
            self.transform = .identity
        }
    }
}

Cấu trúc bên trong: Core Animation bên dưới

Bên dưới, UIView.animate ủy quyền hoạt ảnh cho CALayer của mỗi UIView thông qua Core Animation (CAAnimation). Khi bạn thay đổi frame bên trong khối hoạt ảnh, hệ thống tạo CABasicAnimation cho các thuộc tính position và bounds của lớp tương ứng. Nếu alpha được thay đổi — CABasicAnimation cho thuộc tính opacity của lớp.

Core Animation sử dụng một tiến trình máy chủ kết xuất riêng biệt (backboardd trên iOS) để xử lý hoạt ảnh ở tần số 120 Hz (ProMotion). UIView.animate không chặn luồng chính — các thay đổi thuộc tính được gửi đến máy chủ kết xuất, máy chủ này nội suy các khung hình mà không cần sự tham gia của ứng dụng.

Theo Apple, hoạt ảnh qua UIView.animate có chi phí CPU khoảng 2-3% cho mỗi lớp được thay đổi ở 60 FPS. Đối với hoạt ảnh hàng loạt (20+ đối tượng cùng lúc), nên sử dụng CATransaction và quản lý lớp thủ công.

Để gỡ lỗi và trực quan hóa hoạt ảnh UIKit, hãy sử dụng Xcode Debug View Hierarchy — nó hiển thị các CAAnimation đang hoạt động trên mỗi lớp, thời lượng, đường cong và trạng thái hiện tại. Hiểu cấu trúc bên trong của Core Animation giúp tránh các vấn đề hiệu suất với hoạt ảnh phức tạp và chọn phương pháp tối ưu giữa UIView.animate và sử dụng trực tiếp CABasicAnimation.