React Native Reanimated 3: Kỹ thuật tạo animation mượt 60fps trên luồng UI Thread

Nếu bạn sử dụng Animated API mặc định của React Native để làm các hiệu ứng vuốt kéo phức tạp, ứng dụng rất dễ bị giật lag nếu luồng JS Thread đang bận xử lý dữ liệu ngầm. React Native Reanimated 3 giải quyết triệt để vấn đề này bằng cách **chạy 100% hiệu ứng Animation trên luồng Native UI Thread**!

1. Khái niệm Worklets trong Reanimated 3

Worklet là các đoạn hàm JavaScript nhỏ được Reanimated biên dịch riêng để **chạy trực tiếp trên luồng Native UI Thread**. Ngay cả khi luồng JS Thread của ứng dụng bị đơ cứng 100%, hiệu ứng vuốt kéo Animation của bạn vẫn chạy mượt mà 60fps/120fps!

2. Ví dụ tạo hiệu ứng phóng to nút bấm mượt 60fps

import React from 'react';
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';

export default function ScaleButton() {
  const scale = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));

  return (
    <Animated.View style={[styles.box, animatedStyle]}>
      <Button
        title="Nhấn phóng to"
        onPress={() => {
          scale.value = withSpring(scale.value === 1 ? 1.5 : 1);
        }}
      />
    </Animated.View>
  );
}

3. 3 Kỹ thuật Animation đỉnh cao với Reanimated 3

• Layout Animations: Tự động tạo hiệu ứng thêm/xóa/sắp xếp lại danh sách mượt mà chỉ bằng prop entering={FadeIn} và exiting={FadeOut}.
• Shared Element Transitions: Hiệu ứng phóng to hình ảnh sản phẩm mượt mà khi chuyển giữa 2 màn hình (chuẩn iOS App Store).
• Kết hợp với react-native-gesture-handler: Xử lý các thao tác vuốt, xoay, pinch-to-zoom theo ngón tay người dùng tức thì.

Kết luận

Reanimated 3 là thư viện bắt buộc phải có cho mọi ứng dụng React Native muốn đạt tiêu chuẩn thẩm mỹ cao cấp. Uwmee Software tạo nên các hiệu ứng mượt 60fps mượt mà cho mọi ứng dụng di động. Đọc thêm bài viết hiệu ứng GSAP Animation.