Khám Phá React Native 2024: Hướng Dẫn Sử Dụng React Native Reanimated Để Tạo Animation

Xin chào các bạn! Khi bắt đầu tìm hiểu về React Native, chắc chắn rằng nhiều bạn sẽ tự hỏi làm thế nào để thực hiện một animation trong React Native?

Bài viết này sẽ hướng dẫn các bạn cách tạo ra một animation cơ bản và sử dụng nó trong ứng dụng của mình. Trước khi bắt đầu, bạn nên tham khảo tài liệu của những lập trình viên đã dành tâm huyết để phát triển thư viện này nhằm hiểu rõ hơn về cách hoạt động của animation. Bài viết này sẽ giúp bạn nắm vững bố cục của một animation trong React Native.

Dưới đây là các tài liệu chính thức mà bạn cần tham khảo:

• Animated
• Thread Model

Giới Thiệu Về React Native Reanimated

Trong bối cảnh không ngừng phát triển của React Native, các lập trình viên luôn tìm kiếm những biện pháp để nâng cao hiệu suất và trải nghiệm người dùng cho ứng dụng di động của họ. React Native Reanimated là một thư viện mạnh mẽ được thiết kế nhằm cải thiện hiệu suất cho các ứng dụng React Native. Trong bài viết này, chúng ta sẽ tìm hiểu cách tạo animation cơ bản với React Native Reanimated.

Bước 1: Khởi Tạo Giá Trị Cho Animation

Sử Dụng useSharedValue()

useSharedValue là hook cho phép bạn tạo ra một giá trị chia sẻ, mà có thể xem như là state trong React, được đồng bộ hóa giữa phần "JavaScript" và phần "native" của ứng dụng một cách tự động. Bạn có thể khởi tạo giá trị chia sẻ bằng đoạn mã sau:

import { useSharedValue } from 'react-native-reanimated';  
const mySharedValue = useSharedValue(initialValue);  

Bước 2: Tùy Chỉnh Animation

Các Hàm Animation

React Native Reanimated cung cấp một số hàm để tùy chỉnh animation như sau:

• withDecay: Điều chỉnh tốc độ, vận tốc và điểm dừng của animation tùy theo hành động của người dùng, ví dụ như khi bạn lướt nhanh hay chậm.
• withTiming: Đây là animation phổ biến nhất, cho phép bạn điều chỉnh thời gian (duration) và cách chuyển động (easing) của animation. Easing mặc định là easeInOut.
• withSpring: Tương tự như Animated.timing, nhưng cung cấp hiệu ứng nảy (bounce effect). Bạn có thể điều chỉnh độ nảy thông qua:
  • stiffness: Hệ số độ cứng của lò xo. Mặc định là 100.
  • damping: Định nghĩa cách mà chuyển động của lò xo bị giảm đi do lực ma sát. Mặc định là 10.
  • mass: Khối lượng của vật gắn với đầu lò xo. Mặc định là 1.

Biến Đổi Giá Trị (Interpolation)

Biến đổi giá trị cho phép bạn tạo ra giá trị mới dựa trên một giá trị animation đầu vào và khoảng đầu ra. Ví dụ, bạn có thể tạo giá trị rotate từ giá trị đầu vào là số:

const size = interpolate(animation.value, [0, 1], [100, 250]);  

Bước 3: Sử Dụng useAnimatedStyle

useAnimatedStyle cho phép bạn tạo một đối tượng styles để áp dụng cho các thành phầnAnimated. Các styles được định nghĩa qua useAnimatedStyle sẽ tự động cập nhật khi giá trị chia sẻ hoặc trạng thái React liên quan thay đổi.
Dưới đây là ví dụ về cách sử dụng useAnimatedStyle:

 const animatedCard = useAnimatedStyle(() => {  
   const size = interpolate(animation.value, [0, 1], [100, 250]);  
   return {  
     transform: [  
       { scale: size },  
       { translateY: card.value },  
     ],  
     opacity: selectedIndex === index ? 1 : 0.5,  
   };  
 });  

Bước 4: Thêm Animation Vào Các Thành Phần

Vậy làm thế nào để thêm animation vào các thành phần? React Native cung cấp hai giải pháp:

Default Animated Components

• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View
• Animated.FlatList
• Animated.SectionList

Custom Animated Components

Sử dụng createAnimatedComponent() để tạo một thành phần animation từ bất kỳ component nào.

Ví Dụ

import { Image, ImageProps, TouchableWithoutFeedback } from 'react-native';  
import { styles } from './Card.styles';  
import Animated, { interpolate, useAnimatedStyle, useSharedValue, withDelay, withSpring } from 'react-native-reanimated';  
import { useEffect } from 'react';  

type Props = {  
  cardImage: ImageProps;  
  index: number;  
  selectedIndex: number;  
  cardLength: number;  
  onPress: () => void;  
};  

export default function Card({  
  cardImage,  
  index,  
  selectedIndex,  
  cardLength,  
  onPress,  
}: Props) {  
  const delay = index * 200;  
  const initValue = index * 10;  
  const maxValue = (cardLength - 1) * 10;  
  const card = useSharedValue(selectedIndex === 0 ? 0 : selectedIndex * 10);  

  const animatedCard = useAnimatedStyle(() => {  
    const size = interpolate(card.value, [0, maxValue], [1, 0.8]);  
    return {  
      transform: [  
        { scale: size },  
        { translateY: card.value },  
      ],  
      opacity: selectedIndex === index ? 1 : 0.5,  
    };  
  });  

  useEffect(() => {  
    card.value = withDelay(delay, withSpring(initValue));  
  }, []);  

  return (  
    <TouchableWithoutFeedback onPress={onPress} style={[styles.imageWrapper, styles.container]}>  
      <Animated.View style={[animatedCard, styles.container]}>  
        <Image source={cardImage} style={styles.image} />  
      </Animated.View>  
    </TouchableWithoutFeedback>  
  );  
}  

Hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn về cách tạo animation trong React Native bằng React Native Reanimated. Chúc bạn thành công trong việc áp dụng kỹ thuật này vào dự án của mình!

source: viblo