Giới Thiệu Chung

Trong quá trình phát triển ứng dụng với React Native, việc áp dụng các hiệu ứng và hoạt ảnh chuyển động là điều không thể thiếu. Những hiệu ứng này không chỉ giúp tăng cường trải nghiệm người dùng mà còn làm cho ứng dụng của bạn trở nên sinh động và hấp dẫn hơn. Trong bài viết dưới đây, chúng tôi sẽ hướng dẫn bạn cách sử dụng thư viện Animated có sẵn trong React Native để tạo ra các hiệu ứng chuyển động cơ bản mà không cần cài đặt thêm bất kỳ thư viện nào.

Cách Sử Dụng Thư Viện Animated

1. Khởi Tạo Một Dự Án Mới

Bắt đầu bằng việc tạo ra một dự án React Native mới. Ở đây, chúng tôi sẽ sử dụng phiên bản 0.74.1. Xóa bỏ các phần không cần thiết trong file App.js để bắt đầu.

2. Nhập Thư Viện Cần Thiết

Đầu tiên, bạn cần nhập các thành phần cần thiết từ React Native:

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

3. Khởi Tạo Biến Animated

Tạo một biến để lưu trữ giá trị của animation, chúng ta sẽ sử dụng biến y như sau:

const y = new Animated.Value(0);

Lưu ý: Để tránh tình trạng re-render component gây ảnh hưởng đến hoạt động của animation, hãy định nghĩa biến y bên ngoài component.

4. Tạo Chuyển Động Căn Bản

Để thực hiện animation, chúng ta sử dụng useEffect với đoạn mã sau:

useEffect(() => {
    Animated.timing(y, {
      toValue: 500,
      duration: 1500,
      easing: Easing.quad,
      useNativeDriver: true,
    }).start();
}, []);

Trong mã trên:

• Animated.timing: hàm để tạo ra chuyển động.
• toValue: giá trị kết thúc của animation.
• duration: thời gian thực hiện animation.
• easing: kiểu hiệu ứng chuyển động, bạn có thể sử dụng công cụ như cubic-bezier để tạo hiệu ứng đặc biệt.
• useNativeDriver: nên sử dụng true để cải thiện hiệu suất.

5. Gắn Giá Trị Animation Vào Style

Gắn giá trị animation vào style của một component View đã được bọc bằng thẻ <Animated.View> như dưới đây:

<Animated.View
    style={{
        width: 150,
        height: 150,
        backgroundColor: 'blue',
        transform: [{ translateY: y }],
    }}
/>

Như vậy, bạn đã tạo ra một hiệu ứng chuyển động từ trên xuống cho view.

Nếu bạn muốn dừng animation, bạn có thể sử dụng hàm sau:

Animated.timing(y).stop();

Lưu ý rằng một số thuộc tính style như width, height hay margin không thể sử dụng với animation.

6. Sử Dụng Sequence Để Tạo Trình Tự Animated

Nếu bạn muốn tạo ra nhiều bước chuyển động, sử dụng Animated.sequence như sau:

useEffect(() => {
    Animated.sequence([
      Animated.timing(y, {
        toValue: 500,
        duration: 1000,
        useNativeDriver: true,
      }),
      Animated.timing(y, {
        toValue: 100,
        duration: 1000,
        useNativeDriver: true,
      }),
      Animated.timing(y, {
        toValue: 200,
        duration: 1000,
        useNativeDriver: true,
      }),
    ]).start();
}, []);

7. Lặp Lại Animation Với Loop

Nếu bạn muốn animation chạy lặp lại, sử dụng Animated.loop như sau:

Animated.loop(
    Animated.timing(y, {
    toValue: 500,
    duration: 1000,
    useNativeDriver: true,
    }),
).start();

8. Chạy Nhiều Animation Đồng Thời Với Parallel

Khi bạn có nhiều biến animated khác nhau mà bạn muốn chạy đồng thời, hãy sử dụng Animated.parallel. Ví dụ:

const x = new Animated.Value(0);
const y = new Animated.Value(0);

useEffect(() => {
  const xAnimation = Animated.loop(Animated.sequence([...]))
  const yAnimation = Animated.loop(Animated.sequence([...]))

  Animated.parallel([xAnimation, yAnimation]).start();
}, []);

9. Kết Luận

Bài viết này đã hướng dẫn bạn cách sử dụng Animated để tạo ra các hiệu ứng chuyển động cơ bản trong ứng dụng React Native. Hy vọng rằng các thông tin trên sẽ hữu ích cho bạn trong quá trình phát triển ứng dụng. Nếu bạn có câu hỏi hoặc góp ý, hãy để lại ý kiến bên dưới để tôi có thể cải thiện nội dung hơn nữa. Cảm ơn bạn đã theo dõi!
source: viblo