Sử dụng Phương thức Animated.spring() cho Dynamic Animations trong React Native

Thư viện Animated API của React Native có thể giúp bạn tạo hoạt ảnh linh hoạt, linh hoạt mà không tốn nhiều công sức.

Tìm hiểu cách tạo hoạt ảnh với hiệu ứng giống như lò xo, sau đó tìm hiểu cách kiểm soát thời lượng và tốc độ của chúng cũng như áp dụng chúng trong các tình huống trong thế giới thực.

Hoạt ảnh động là gì?

Hoạt ảnh động là hoạt ảnh trong đó chuyển động của các đối tượng hoạt hình không được lập trình sẵn. Bạn có thể bắt đầu chúng để đáp ứng với tương tác của người dùng hoặc những thay đổi đối với môi trường. Kỹ thuật này phổ biến nhất trong hoạt hình trò chơi điện tử, ứng dụng mạng xã hội hoặc các dạng phương tiện tương tác khác.

Hoạt ảnh động có thể mang lại trải nghiệm phong phú và hấp dẫn hơn cho người dùng, vì nó cho phép các chuyển động phản ứng nhanh và không thể đoán trước có thể thay đổi dựa trên một số yếu tố.

Hoạt ảnh trong các ứng dụng dành cho thiết bị di động, qua nhiều năm, ngày càng trở nên phức tạp hơn. Animated API mặc định của React Native đã nâng cao để phù hợp với những phức tạp này. Các Hoạt hình.spring() phương thức mà API cung cấp có thể tạo hiệu ứng động cho các đối tượng React Native, tạo hiệu ứng động.

Kiểm soát hoạt hình

Khi sử dụng Hoạt hình.spring() phương pháp, bạn sẽ cần có quyền kiểm soát hoạt hình để đảm bảo nó hoạt động như bạn mong muốn. Animated cung cấp một tập hợp các phương thức để điều khiển và thao tác hoạt ảnh React Native của bạn theo cách thủ công.

Một trong những phương pháp đó là dừng lại(), khiến hoạt ảnh dừng ở giá trị hiện tại. Phương pháp này hữu ích khi bạn cần hủy hoạt ảnh hoặc đặt lại hoạt ảnh về trạng thái ban đầu.

Ví dụ:

 const stopAnimation = () => {
  position.stop(value => {
    position.setValue(0);
  });
};
 

Lưu ý cách bạn có thể sử dụng đặt giá trị() phương pháp để đặt lại giá trị vị trí về trạng thái ban đầu của nó 0.

Một phương pháp khác có sẵn cho bạn là cài lại(), trả hoạt ảnh về trạng thái ban đầu. Phương pháp này hữu ích khi bạn cần khởi động lại một hoạt ảnh.

Ứng dụng trong thế giới thực

Bạn có thể khám phá cách sử dụng thực tế của Hoạt hình.spring() phương pháp bằng cách xây dựng một hình ảnh động đơn giản. Một quả bóng tròn sẽ rơi xuống một bề mặt khi người dùng tương tác với nó, sau đó nảy trở lại không trung ngay sau đó. Bạn đã có một dự án Reac Native mà bạn có thể làm việc cùng.

Đầu tiên, tạo một biến trạng thái để theo dõi vị trí của quả bóng:

 import React, { useState } from 'react';
import { Animated } from 'react-native';
const App = () => {
  const [position, setPosition] = useState(new Animated.Value(0));
  
  return (
    <Animated.View style={{ transform: [{ translateY: position }] }}>
      {}
    </Animated.View>
  );
};
 

Sử dụng Animated.Value để tạo một biến trạng thái gọi là chức vụ sẽ theo dõi vị trí thẳng đứng của quả bóng. bọc Xem thành phần trong Animated.Xem để bạn có thể áp dụng hình ảnh động cho nó.

Tiếp theo, tạo chức năng hoạt hình sẽ làm cho quả bóng rơi xuống và nảy lên:

 const startAnimation = () => {
  Animated.spring(position, {
    toValue: 300,
    friction: 1,
    tension: 10,
    useNativeDriver: true,
  }).start(() => {
    Animated.spring(position, {
      toValue: 0,
      friction: 1,
      tension: 10,
      useNativeDriver: true,
    }).start();
  });
};
 

Sử dụng Hoạt hình.spring() để tạo hoạt ảnh sẽ di chuyển quả bóng từ vị trí ban đầu là 0 đến vị trí cuối cùng là 300. Chỉ định ma sát Và căng thẳng các giá trị để kiểm soát hiệu ứng nảy của bóng trong khi thiết lập sử dụngNativeDriver ĐẾN ĐÚNG VẬY để cải thiện hiệu suất.

Sau đó, bạn có thể triển khai mã để kích hoạt hoạt ảnh khi người dùng tương tác với quả bóng:

 return (
  <TouchableWithoutFeedback onPress={startAnimation}>
    <Animated.View style={{ transform: [{ translateY: position }] }}>
      {}
    </Animated.View>
  </TouchableWithoutFeedback>
);
 

Mã này bao bọc Animated.Xem thành phần trong Có thể chạm mà không có phản hồi để hoạt ảnh kích hoạt khi người dùng nhấn quả bóng. Bạn cũng có thể kích hoạt hoạt ảnh khi thành phần được gắn kết bằng cách gọi hàm startAnimation() chức năng bên trong React’s sử dụngEffect() cái móc.

Với đoạn mã này, bạn sẽ có một hoạt hình bóng rơi được tạo bằng cách sử dụng Hoạt hình.spring().

Hoạt hình động trong React Native

Bạn đã xem cách triển khai hoạt ảnh quả bóng rơi bằng Animated.spring(), nhưng có nhiều cách khác mà bạn có thể sử dụng để tạo hoạt ảnh động.

Ví dụ: bạn có thể sử dụng Animated.spring() để tạo hoạt ảnh mô phỏng các chuyển động dựa trên vật lý khác, chẳng hạn như lắc lư hoặc xoay đối tượng.

Bằng cách kết hợp Animated.spring() với các chức năng hoạt hình khác, chẳng hạn như Animated.timing() hoặc Animated.sequence(), bạn có thể tạo các hoạt ảnh phức tạp và liền mạch giúp nâng cao trải nghiệm người dùng.