Bắt đầu với hoạt ảnh trong React Native

Hoạt ảnh có thể thổi sức sống vào ứng dụng, làm cho ứng dụng trở nên hấp dẫn và trực quan hơn đối với người dùng. Nhưng nếu bạn chưa quen với hoạt hình React Native, thì việc bắt đầu có thể hơi khó khăn.

Khám phá hoạt ảnh React Native và tìm hiểu cách bạn có thể bắt đầu tạo hoạt ảnh mượt mà, đẹp mắt.

Hoạt ảnh gốc phản ứng cơ bản hoạt động như thế nào?

Hoạt ảnh có thể tạo chuyển tiếp mượt mà giữa các màn hình hoặc phần tử khác nhau. Họ có thể làm nổi bật thông tin hoặc cung cấp phản hồi về hành động của người dùng. Hoạt hình có thể đơn giản hoặc phức tạp và có thể sử dụng nhiều kỹ thuật khác nhau, chẳng hạn như đồ họa chuyển động 2D hoặc 3D.

Tính di động của React Native làm cho nó rất đáng để sử dụng nếu bạn đang nhắm mục tiêu vào một số nền tảng. Một trong những tính năng mạnh nhất của nó là khả năng tạo hoạt ảnh đẹp mắt cho các ứng dụng dành cho thiết bị di động.

Bạn có thể tạo hiệu ứng động cho một đối tượng React Native đơn giản bằng cách thay đổi trạng thái vị trí của thành phần mong muốn.

Ví dụ:

 import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from 'react-native';
const App = () => {
  
  const [boxPosition, setBoxPosition] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      
      setBoxPosition(prevPosition => prevPosition + 10);
    }, 1000);
    
   
    return () => clearInterval(interval);
  }, []);
  
  const boxStyle = {
    transform: [{ translateY: boxPosition }]
  };
  return (
    <View style={styles.container}>
      <View style={[styles.box, boxStyle]} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});
export default App;
 

Mã này hiển thị một hộp màu xanh di chuyển xuống dưới mỗi giây. Hoạt hình hoạt động bằng cách sử dụng sử dụnghiệu ứng hook để tạo bộ đếm thời gian cập nhật cái hộpVị trí biến trạng thái cứ sau 1 giây.

Mặc dù điều này có thể hoạt động trong một số trường hợp, nhưng đây không phải là lựa chọn tốt nhất để thực hiện. Cập nhật trạng thái trong React Native hoạt động không đồng bộ, nhưng hoạt ảnh dựa vào cập nhật trạng thái đồng bộ để hoạt động chính xác. Việc triển khai hoạt ảnh của bạn không đồng bộ sẽ khiến các cập nhật trạng thái không được phản ánh ngay lập tức trong đầu ra được kết xuất của thành phần, làm rối loạn thời gian hoạt ảnh của bạn.

Chúng là một số thư viện hoạt hình như hoạt hình thư viện, phản ứng tự nhiên-reanimatedVà phản ứng gốc-hoạt hình để xây dựng hoạt ảnh hiệu quả trong React Native. Mỗi thư viện hoạt hình này giải quyết vấn đề cập nhật trạng thái không đồng bộ và hoàn toàn lý tưởng.

React Native Animated API

Animated là một API mà React Native cung cấp. Bạn có thể sử dụng nó để tạo hoạt ảnh mượt mà đáp ứng các tương tác của người dùng hoặc thay đổi trạng thái.

API Hoạt ảnh cho phép bạn tạo các giá trị hoạt ảnh mà bạn có thể nội suy và ánh xạ tới các thuộc tính kiểu khác nhau của các thành phần của mình. Sau đó, bạn có thể cập nhật các giá trị này theo thời gian bằng các phương pháp hoạt hình khác nhau. Các kiểu thành phần của bạn sau đó sẽ cập nhật khi các giá trị hoạt ảnh thay đổi, dẫn đến hoạt ảnh mượt mà.

Animated hoạt động rất tốt với hệ thống bố cục của React Native. Do đó, hoạt ảnh của bạn sẽ được tích hợp phù hợp với phần còn lại của giao diện người dùng để có giao diện đẹp hơn.

Để bắt đầu sử dụng Animated trong dự án React Native của bạn, bạn cần nhập tệp hoạt hình mô-đun từ ‘phản ứng tự nhiên’ vào mã của bạn:

 import { Animated } from 'react-native';
 

Với Hoạt ảnh được nhập, bạn có thể bắt đầu tạo hoạt ảnh. Để làm điều này, trước tiên, hãy tạo một giá trị hoạt ảnh mà bạn sẽ thao tác trong suốt hoạt ảnh:

 const animatedValue = new Animated.Value(0);
 

Các Animated.Value là một lớp trong React Native Animated API đại diện cho một giá trị có thể thay đổi. Bạn có thể khởi tạo nó với một giá trị ban đầu, sau đó cập nhật nó theo thời gian bằng cách sử dụng các phương thức hoạt hình khác nhau do API hoạt hình cung cấp, chẳng hạn như .thời gian().mùa xuân()Và .phân rã()bằng cách chỉ định thời lượng của hoạt ảnh, chức năng nới lỏng và các tham số khác.

Giá trị hoạt hình tương tự như giá trị trạng thái trong thành phần React.

Bạn có thể khởi tạo một Animated.Value với giá trị trạng thái ban đầu của một thành phần, sau đó cập nhật nó theo thời gian bằng cách sử dụng setState phương pháp.

Ví dụ: bạn có một thành phần có giá trị trạng thái đếmđại diện cho số lần người dùng đã nhấp vào nút đó.

Bạn có thể tạo một Animated.Value và khởi tạo nó với giá trị trạng thái ban đầu là đếm:

 const App = () => {
  const [count, setCount] = useState(0);
  const animatedValue = new Animated.Value(count);
};
 

Sau đó, bất cứ khi nào đếm cập nhật giá trị trạng thái, bạn có thể cập nhật giá trị hoạt hình cũng vậy:

 const handlebuttonClick = () => {
  setCounter(count + 1);
  Animated.timing(animatedValue, {
    toValue: count + 1,
    duration: 500,
    useNativeDriver: true
  }).start();
};
 

Ví dụ này cập nhật giá trị hoạt hình sử dụng Animated.timing() phương thức bất cứ khi nào người dùng nhấp vào nút. Các giá trị hoạt hình điều khiển hoạt ảnh và nó thay đổi giá trị trong hơn 500 mili giây.

Bằng cách liên quan Animated.Value với giá trị trạng thái theo cách này, bạn có thể tạo hoạt ảnh phản hồi những thay đổi về trạng thái thành phần của mình.

Bây giờ bạn đã hiểu cách thao tác với một giá trị động, sau đó bạn có thể tiếp tục Nội suy giá trị động và ánh xạ nó tới một thuộc tính kiểu của thành phần của bạn bằng cách sử dụng Animated.interpolate() phương pháp.

Ví dụ:

 const opacity = animatedValue.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 1]
});
return (
  <View style={{ opacity }}>
    {}
  </View>
);
 

Điều này sẽ tạo ra một hình ảnh động mờ dần trong Xem thành phần khi giá trị hoạt ảnh thay đổi từ 0 thành 1.

Hiểu các loại hoạt hình

Hiểu các loại hoạt ảnh và cách chúng hoạt động là rất quan trọng để tạo hoạt ảnh tốt.

Sử dụng sử dụngNativeDriver tùy chọn với Animated cải thiện hiệu suất. Tùy chọn này cho phép bạn giảm tải hoạt ảnh cho chuỗi giao diện người dùng gốc. Nó có thể cải thiện đáng kể hiệu suất bằng cách giảm số lượng xử lý JavaScript cần thiết.

Tuy nhiên, không phải tất cả các loại hoạt hình đều hỗ trợ trình điều khiển riêng. Việc cố gắng sử dụng trình điều khiển gốc với hoạt ảnh liên quan đến thay đổi màu sắc hoặc bố cục có thể gây ra hành vi không mong muốn.

Ngoài ra, hoạt ảnh liên quan đến các chuỗi phức tạp có thể gây ra các vấn đề đáng kể về hiệu suất trên các thiết bị có bộ nhớ hoặc sức mạnh xử lý hạn chế. Những thiếu sót về hiệu suất này cũng có thể đáng chú ý nếu dự án React Native của bạn đang chạy phiên bản thấp hơn không hỗ trợ công cụ Hermes.

Hiểu được điểm mạnh và hạn chế của các loại hoạt ảnh khác nhau có thể giúp bạn chọn phương pháp phù hợp cho trường hợp sử dụng của mình.

Cảm thấy thoải mái với React Native Animations

Hoạt ảnh là một công cụ mạnh mẽ để tạo giao diện người dùng hấp dẫn và năng động trong ứng dụng React Native. Animated API cung cấp một cách linh hoạt và hiệu quả để tạo cả hoạt ảnh trình tự đơn giản và phức tạp.

Tuy nhiên, điều quan trọng là phải xem xét tác động hiệu suất của hoạt ảnh và chọn phương pháp cũng như thư viện phù hợp để sử dụng cho tình huống của bạn.