Animated API: định nghĩa, tính năng thư viện và nguyên lý hoạt động

Animated API trong React Native là gì

Animated API là thư viện hoạt ảnh khai báo được tích hợp vào lõi React Native, được thiết kế để tạo các hoạt ảnh mượt mà, hiệu suất cao trong ứng dụng di động. Không giống như hoạt ảnh CSS trong phát triển web, Animated API hoạt động trực tiếp với luồng UI gốc thông qua cầu nối JavaScript hoặc trình điều khiển gốc. Thư viện được xây dựng xoay quanh khái niệm Animated.Value — một bộ chứa lưu trữ giá trị số và tự động đăng ký tất cả các thành phần phụ thuộc vào thay đổi. Khi giá trị thay đổi qua Animated.timing hoặc Animated.spring, thư viện tính toán các trạng thái trung gian mà không cần kết xuất lại các thành phần React, điều này rất quan trọng để duy trì 60 FPS. Animated API hỗ trợ tất cả các thuộc tính kiểu dáng, bao gồm transform, opacity, width, height, top, left và backgroundColor. Tài liệu React Native khuyến nghị Animated API cho tất cả các kịch bản hoạt ảnh yêu cầu hiệu suất cao và hành vi có thể dự đoán trên cả hai nền tảng.

Cách Animated API hoạt động: Value, timing và spring

Nền tảng của Animated API là Animated.Value, một bộ chứa giá trị số được khởi tạo qua hàm tạo new Animated.Value(0). Mỗi Animated.Value lưu trữ số ban đầu và cung cấp các phương thức hoạt ảnh: timing, spring và decay. Phương thức timing tạo hoạt ảnh tuyến tính hoặc easing với các tham số thời gian, độ trễ và easing. Phương thức spring thực hiện hoạt ảnh lò xo vật lý với các tham số ma sát, lực căng và vận tốc. Phương thức decay tạo hoạt ảnh với quán tính và suy giảm — hữu ích cho vuốt và cuộn. Tất cả các phương thức trả về một đối tượng Animated.Composite có thể được bắt đầu qua start() và dừng qua stop(). Hoạt ảnh được thực thi trong một luồng riêng: khi useNativeDriver = true, các tính toán diễn ra trong luồng UI gốc, luồng JavaScript vẫn rảnh để xử lý sự kiện và logic.

Animated.timing: cấu hình thời gian và easing

Animated.timing là phương thức hoạt ảnh cơ bản với thời gian được kiểm soát. Nó chấp nhận cấu hình: toValue, duration (mặc định 500ms), easing (mặc định Easing.linear) và delay. Các hàm easing từ mô-đun Easing cho phép tăng tốc phi tuyến tính: Easing.bezier, Easing.elastic, Easing.bounce. Để hoạt ảnh tốc độ đồng đều, sử dụng Easing.linear; để tăng tốc tự nhiên, sử dụng Easing.inOut. Quan trọng: Animated.timing đảm bảo hoạt ảnh sẽ kết thúc chính xác tại toValue trong thời gian chị định, bất kể tải của thiết bị.

Animated.spring: hoạt ảnh dựa trên vật lý

Animated.spring thực hiện mô hình hoạt ảnh lò xo dựa trên định luật Hooke. Tham số friction (ma sát) kiểm soát số lượng dao động: ma sát càng cao, dừng càng nhanh. Tham số tension (lực căng) xác định độ cứng của lò xo: lực căng cao tăng tốc chuyển động. Tham số velocity (vận tốc) đặt tốc độ ban đầu cho hoạt ảnh có quán tính — rất quan trọng cho các hoạt ảnh theo sau cử chỉ người dùng. Animated.spring không có thời gian cố định — hoạt ảnh hoàn thành khi tốc độ và biên độ đạt giá trị ngưỡng.

Animated.View, Animated.Text và các thành phần khác

Animated API cung cấp bốn thành phần hoạt ảnh tích hợp sẵn: Animated.View, Animated.Text, Animated.ScrollView và Animated.Image. Mỗi thành phần là một lớp bọc trên thành phần gốc tương ứng hỗ trợ truyền Animated.Value vào các thuộc tính kiểu dáng. Animated.View là thành phần được sử dụng nhiều nhất, chấp nhận các props giống như View thông thường, nhưng hỗ trợ các giá trị được hoạt ảnh trong style. Animated.Text hữu ích để hoạt ảnh màu văn bản hoặc khoảng cách giữa các chữ cái. Animated.ScrollView cho phép hoạt ảnh scrollTo và contentOffset. Animated.Image hỗ trợ độ mờ và tỷ lệ được hoạt ảnh trong khi tải hình ảnh. Nếu bạn cần hoạt ảnh một thành phần khác, hãy sử dụng Animated.createAnimatedComponent(MyComponent).

import React from 'react';
import { Animated, View, Button } from 'react-native';

const FadeInView = () => {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    View
      Animated.View { style: [{ opacity }] }
      Button title="Fade In" onPress={fadeIn}
  );
};

Hệ thống nội suy: từ số đến màu sắc và biến đổi

Nội suy là cơ chế chuyển đổi phạm vi số đầu vào của Animated.Value thành các giá trị đầu ra của một loại khác. Phương thức interpolate chấp nhận cấu hình với inputRange (mảng giá trị đầu vào) và outputRange (mảng giá trị đầu ra). Các loại outputRange: số (tọa độ, độ mờ), chuỗi (góc xoay với 'deg'), màu hex ('#ff0000'), đối tượng biến đổi. Nội suy hỗ trợ easing và extrapolate — hành vi bên ngoài phạm vi chị định (clamp, extend, identity). Ví dụ, trong cử chỉ kéo, bạn có thể chuyển đổi vị trí ngón tay từ 0 đến 200 thành độ mờ từ 1 đến 0, tạo hiệu ứng mờ dần khi vuốt. Hệ thống nội suy cho phép tạo các hoạt ảnh nhiều bước phức tạp: giá trị 0-0.5-1.0 có thể chuyển thành vàng-cam-đỏ.

const spinValue = new Animated.Value(0);

Animated.timing(spinValue, {
  toValue: 1,
  duration: 3000,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

Tổ hợp hoạt ảnh: tuần tự và song song

Animated API hỗ trợ ba chế độ tổ hợp hoạt ảnh: Animated.sequence, Animated.parallel và Animated.stagger. Animated.sequence chạy các hoạt ảnh lần lượt: mỗi hoạt ảnh tiếp theo bắt đầu sau khi hoạt ảnh trước kết thúc. Animated.parallel chạy tất cả hoạt ảnh đồng thời với một callback hoàn thành chung. Animated.stagger chạy các hoạt ảnh với độ trễ giữa mỗi lần bắt đầu — hữu ích để tạo hiệu ứng sóng. Các tổ hợp có thể được lồng nhau: chuỗi của các nhóm song song hoặc song song của các chuỗi. Điều này cho phép tạo các chuỗi phức tạp: hoạt ảnh xuất hiện phần tử có độ trễ, slide-in song song với fade-in, sau đó là chuỗi bounce và shake.

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.parallel([
    Animated.timing(scaleAnim, {
      toValue: 1.1,
      duration: 200,
      useNativeDriver: true,
    }),
    Animated.spring(colorAnim, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }),
  ]),
]).start();

useNativeDriver và hiệu suất hoạt ảnh

useNativeDriver là một tùy chọn cấu hình hoạt ảnh chuyển tất cả logic hoạt ảnh từ luồng JavaScript sang luồng UI gốc. Nếu không có useNativeDriver, các hoạt ảnh được thực thi qua cầu nối JavaScript: mỗi lần thay đổi giá trị được gửi đến luồng gốc, gây ra độ trễ khi luồng JS bận với các thao tác bất đồng bộ. Với useNativeDriver = true, Animated.Value cập nhật trực tiếp ở phía gốc, luồng JavaScript vẫn rảnh để xử lý sự kiện, yêu cầu API và tái hòa giải React. Hạn chế: useNativeDriver chỉ hỗ trợ các thuộc tính không phải bố cục — opacity, transform, backgroundColor (qua PlatformColor). Đối với các thuộc tính bố cục (width, height, top, left), cần NativeAnimatedModule hoặc LayoutAnimation. Theo React Native 0.76, tất cả các thuộc tính được hoạt ảnh đều được hỗ trợ qua trình điều khiển gốc, ngoại trừ các thuộc tính dựa trên bố cục. Chế độ useNativeDriver được khuyến nghị cho tất cả hoạt ảnh khi có thể — nó tăng FPS từ 30-40 lên 60 ổn định.

Hoạt ảnh điều khiển bằng cử chỉ: PanResponder và Gesture Handler

PanResponder là hệ thống xử lý cử chỉ React Native tích hợp sẵn hoạt động tốt với Animated API. PanResponder cung cấp các callback onPanResponderMove và onPanResponderRelease nơi Animated.Value có thể được cập nhật dựa trên vị trí ngón tay. Đối với các cử chỉ phức tạp hơn — vuốt, chụm, xoay — hãy sử dụng thư viện react-native-gesture-handler, hoạt động đồng bộ với các hoạt ảnh và cung cấp 60 FPS ngay cả với cử chỉ nhiều ngón tay. Gesture Handler cung cấp Animated.event — một phương thức liên kết trực tiếp cử chỉ với Animated.Value mà không cần xử lý callback thủ công. Sự kết hợp Gesture Handler + Animated API là tiêu chuẩn công nghiệp cho các hoạt ảnh tương tác trong ứng dụng React Native.

Animated.event: liên kết cử chỉ với giá trị

Animated.event là phương thức liên kết một sự kiện gốc (ví dụ, gestureEvent) trực tiếp với Animated.Value. Không giống như xử lý thủ công trong callback, Animated.event hoạt động đồng bộ trong luồng gốc và không yêu cầu cầu nối JavaScript cho mỗi khung hình. Điều này mang lại hoạt ảnh mượt mà ngay cả khi vuốt nhanh. Animated.event chấp nhận một mảng ánh xạ, trong đó mỗi phần tử liên kết một trường sự kiện với Animated.Value. Truy cập lồng nhau được hỗ trợ: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Ví dụ mã với Animated API

Hãy xem ba ví dụ thực tế về sử dụng Animated API trong các dự án React Native. Ví dụ thứ nhất là hoạt ảnh xuất hiện thẻ với chuỗi opacity + translateY. Ví dụ thứ hai là hoạt ảnh nhấp nháy nút sử dụng spring. Ví dụ thứ ba là phần tử kéo tương tác với PanResponder. Tất cả các ví dụ đều sử dụng useNativeDriver = true và tuân theo các thực hành tốt nhất của React Native 0.76.

const CardWithAnimation = () => {
  const anim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.spring(anim, {
      toValue: 1,
      friction: 6,
      tension: 40,
      useNativeDriver: true,
    }).start();
  }, []);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  return (
    Animated.View {
      style: [{ opacity: anim, transform: [{ translateY }] }]
    }
  );
};

Hoạt ảnh nhấp nháy qua spring

Hoạt ảnh Spring tạo hiệu ứng nhấp nháy tự nhiên nhờ mô hình lò xo vật lý. Cài đặt ma sát thấp (2-4) và lực căng cao (100-150) tạo ra các dao động nhẹ nhàng tắt dần tự nhiên. Sử dụng Animated.loop để nhấp nháy vô hạn với chu kỳ chuỗi: scale → 1.2, scale → 1.0. Nhấp nháy được sử dụng cho các chỉ báo tải, thông báo và nút nhấn nhấn mạnh.