Cách tạo ứng dụng gốc phản ứng hấp dẫn với hoạt ảnh do người dùng thực hiện
Hình ảnh động nên cảm thấy sống động. Bạn có thể tạo trải nghiệm người dùng hấp dẫn cho hoạt ảnh React Native bằng cách để chúng phản hồi tương tác của người dùng. Những tương tác này có thể trực tiếp từ người dùng hoặc được thiết lập gián tiếp bởi những thay đổi nhất định.
Mục Lục
Hiểu các sự kiện và cử chỉ chạm trong React Native
Các phần tử React Native có khả năng phản hồi các thao tác chạm và cử chỉ từ người dùng. Phản hồi cử chỉ gốc của React có thể phát hiện các sự kiện và cử chỉ chạm này.
Gesture Replyer trang bị cho rất nhiều thành phần trong thư viện React Native với tính năng này, chẳng hạn như Cái nút Và TouchableOpacity các thành phần đáp ứng với các lần nhấn hoặc vòi.
Tuy nhiên, Trình phản hồi cử chỉ chỉ trang bị cho các thành phần đơn giản bằng các cử chỉ đơn giản. Để xử lý và phát hiện các sự kiện chạm phức tạp hơn, React Native sử dụng API PanResponder. Nó cho phép bạn tạo các trình nhận dạng cử chỉ tùy chỉnh đáp ứng các tương tác chạm phức tạp hơn, chẳng hạn như chụm, xoay hoặc kéo.
API PanResponder có thể xác định cách ứng dụng của bạn sẽ phản hồi những cử chỉ này khi nhận được chúng bằng cách thiết lập lệnh gọi lại cho bất kỳ sự kiện chạm cụ thể nào.
Kích hoạt hoạt ảnh với sự kiện chạm
Sự kiện chạm là hình thức tương tác phổ biến nhất mà người dùng có thể có với ứng dụng dành cho thiết bị di động. Bạn có thể chọn kích hoạt một số hoạt ảnh nhất định để phản hồi lại các sự kiện chạm cụ thể của người dùng.
Với Animated API của React Native để tạo hoạt ảnh cho các thành phần khác nhau, bạn có thể phát hiện và làm việc với các sự kiện chạm để kích hoạt hoạt ảnh dựa trên tương tác của người dùng.
Ví dụ: bạn có thể sử dụng Animated API để tạo hiệu ứng động cho độ mờ của TouchableOpacity nút khi được nhấn để tạo hiệu ứng mờ dần:
import React, { useState, useRef } from 'react';
import { View, TouchableOpacity, Animated } from 'react-native';const AnimatedButton = () => {
const opacityValue = useRef(new Animated.Value(1)).current;
const handlePress = () => {
Animated.timing(opacityValue, {
toValue: 0.5,
duration: 500,
useNativeDriver: true,
}).start();
}
return (
<View>
<Animated.View style={{ opacity: opacityValue }}>
<TouchableOpacity onPress={handlePress}>
{}
</TouchableOpacity>
</Animated.View>
</View>
);
}
export default AnimatedButton;
Trong ví dụ này, các độ mờ Giá trị là một ví dụ của Animated.Value đại diện cho độ mờ của nút. Khi bạn nhấn nút, xử lý báo chí chức năng chạy, kích hoạt hoạt ảnh bằng cách sử dụng Animated.timing() để làm sinh động độ mờ của nút.
Kích hoạt hoạt ảnh với các thay đổi trạng thái
Một cách tiếp cận khác mà bạn có thể thực hiện là kích hoạt hoạt ảnh dựa trên những thay đổi trạng thái nhất định trong ứng dụng của bạn. Bạn có thể sử dụng Animated API để kích hoạt hoạt ảnh theo nhiều thay đổi trạng thái, chẳng hạn như thay đổi về vị trí, kích thước hoặc nội dung của một thành phần.
Ví dụ, bạn có thể sử dụng sử dụngState Và sử dụnghiệu ứng móc để kích hoạt một hình ảnh động như thế này:
import React, { useState, useEffect } from 'react';
import { View, Animated, Button, Text } from 'react-native';const MyComponent = () => {
const [fadeAnim, setFadeAnim] = useState(new Animated.Value(0));
const [text, setText] = useState('Hello World');
useEffect(() => {
startAnimation();
}, [text]);
const startAnimation = () => {
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 1000,
useNativeDriver: true,
}
).start();
};
return (
<View>
<Animated.View style={{ opacity: fadeAnim }}>
<Text>{text}</Text>
</Animated.View>
<Button title="Change Text" onPress={() => setText('New Text')} />
</View>
);
};
export default MyComponent;
Trong ví dụ này, các sử dụnghiệu ứng hook sẽ kích hoạt hoạt ảnh bất cứ khi nào giá trị trạng thái của chữ thay đổi. Các sử dụnghiệu ứng hook lấy một hàm gọi lại làm đối số đầu tiên của nó, nó sẽ chạy bất cứ khi nào các phụ thuộc được chỉ định trong đối số thứ hai (trong trường hợp này, [text]) thay đổi. Bên trong sử dụnghiệu ứng cái móc, startAnimation() chạy và kích hoạt hoạt ảnh mờ dần.
Hoạt hình động sẽ làm sống động ứng dụng của bạn
Việc kết hợp hoạt ảnh động trong ứng dụng React Native của bạn sẽ nâng cao đáng kể trải nghiệm người dùng và sẽ làm cho ứng dụng của bạn có tính tương tác cao hơn. Với sức mạnh của các sự kiện chạm, cử chỉ và hệ thống phản hồi cử chỉ, bạn có thể tạo hoạt ảnh linh hoạt và nhạy bén.
Ngoài ra, bằng cách tận dụng Animated API và quản lý trạng thái hoạt ảnh bằng các hook như useState và useEffect, bạn có thể dễ dàng kích hoạt hoạt ảnh dựa trên những thay đổi trong trạng thái ứng dụng của mình.