Cách tạo hoạt ảnh gốc phản ứng tốt hơn
Các ứng dụng dành cho thiết bị di động thường sử dụng hoạt ảnh để làm sống động trải nghiệm người dùng. Nhưng tạo hoạt ảnh chất lượng cao có thể là một thách thức.
May mắn thay, có những khái niệm và kỹ thuật bạn có thể sử dụng để cải thiện kỹ năng hoạt hình của mình. Sau đó, bạn có thể áp dụng chúng để tạo hoạt ảnh tốt hơn, mượt mà hơn cho ứng dụng di động React Native tiếp theo của mình.
Mục Lục
React Native Animations
Thư viện React Native Animated là cách phổ biến nhất để tạo hoạt ảnh trong ứng dụng React Native.
Giống như thư viện hoạt hình tích hợp của React, Animated API là một phần của thư viện Hoạt hình dựa trên JavaScript. Animated cung cấp một tập hợp các lớp và phương thức cho phép bạn tạo hoạt ảnh mượt mà và uyển chuyển. Có một số tùy chọn tuyệt vời khác để tạo hoạt ảnh React Native, chẳng hạn như Reanimated.
Tuy nhiên, để tạo hoạt ảnh tốt trong React Native không chỉ là sử dụng đúng thư viện hoặc đặt đúng thuộc tính. Nó cũng là về việc hiểu các nguyên tắc hoạt hình và cách áp dụng chúng trong bối cảnh phát triển ứng dụng di động. Vì vậy, đây là một số nguyên tắc chính cần hiểu và lưu ý khi xây dựng hoạt ảnh của bạn.
Điều chỉnh thời lượng hoạt ảnh
Ảnh động sẽ tạo cảm giác mượt mà và tự nhiên cho người dùng. Đạt được điều này có thể phụ thuộc vào cách bạn xử lý thời lượng cho các hoạt ảnh cụ thể mà bạn tạo.
Thời lượng đề cập đến lượng thời gian cần thiết để hoạt ảnh chạy hoàn toàn. Theo mặc định, hoạt ảnh trong React Native có thời lượng là 500 mili giây nhưng bạn có thể điều chỉnh chúng để chạy nhanh hơn hoặc chậm hơn.
Bạn nên điều chỉnh thời lượng của hoạt ảnh tùy theo độ phức tạp của nó. Hoạt ảnh đơn giản, chẳng hạn như hiệu ứng mờ dần, có thể chỉ cần thời lượng ngắn, trong khi hoạt ảnh phức tạp hơn, chẳng hạn như trang chiếu có hiệu ứng bật lên, có thể cần thời lượng lâu hơn để tạo cảm giác tự nhiên và mượt mà.
với Animation.timing() phương pháp, bạn có thể tạo hoạt ảnh được định thời gian tùy chỉnh để phù hợp với nhu cầu của mình.
Dưới đây là ví dụ về cách thêm thời lượng tùy chỉnh vào hoạt ảnh tăng dần đơn giản:
import React, { useRef } from 'react';
import { Animated, View } from 'react-native';const FadeInView = (props) => {
const fadeAnim = useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 2000,
useNativeDriver: true,
}
).start();
}, [fadeAnim]);
return (
<Animated.View
style={{
...props.style,
opacity: fadeAnim,
}}
>
{props.children}
</Animated.View>
);
}
export default function App() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
</FadeInView>
</View>
);
}
Khi chọn thời lượng cho hoạt ảnh của bạn, điều quan trọng là phải đạt được sự cân bằng phù hợp giữa tốc độ và độ mượt mà.
Hãy thử bắt đầu với thời lượng dài hơn khi bạn thử nghiệm lần đầu. Thời lượng dài hơn sẽ cho bạn nhiều thời gian hơn để điều chỉnh chức năng nới lỏng và tinh chỉnh hoạt ảnh của mình. Bạn luôn có thể rút ngắn thời lượng sau khi hài lòng với hiệu ứng tổng thể.
Sử dụng chức năng nới lỏng
Các hoạt ảnh đơn giản có thể có tốc độ không đổi, nhưng việc thay đổi tốc độ có thể tạo ra các hiệu ứng tự nhiên hơn. Các chức năng nới lỏng kiểm soát tốc độ thay đổi của hoạt ảnh theo thời gian. Chúng có thể làm cho hoạt ảnh của bạn bắt đầu chậm, sau đó tăng tốc. Đặt các tốc độ khác nhau khi hoạt ảnh diễn ra có thể tạo ra hoạt ảnh mượt mà và hấp dẫn.
Lấy ví dụ này về việc sử dụng chức năng nới lỏng:
import React, { useRef } from 'react';
import { Animated, View } from 'react-native';const FadeInView = (props) => {
const fadeAnim = useRef(new Animated.Value(0)).current;
React.useEffect(() => {
Animated.timing(
fadeAnim,
{
toValue: 1,
duration: 2000,
easing: Animated.easeOut,
useNativeDriver: true,
}
).start();
}, [fadeAnim]);
return (
<Animated.View
style={{
...props.style,
opacity: fadeAnim,
}}
>
{props.children}
</Animated.View>
);
}
export default function App() {
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fade In</Text>
</FadeInView>
</View>
);
}
Mã này sử dụng Animated.easeOut chức năng kiểm soát tốc độ thay đổi độ mờ của hình ảnh động Xem. Các Animated.timing() phương pháp sẽ sử dụng chức năng giảm bớt để thay đổi dần độ mờ từ 0 thành 1 trong khoảng thời gian hai giây, để làm cho hoạt ảnh có vẻ chậm lại khi đến cuối.
Bạn có thể sử dụng các loại chức năng nới lỏng khác nhau để làm cho hoạt ảnh của bạn trông mượt mà hơn, bao gồm dễ dàng vào, dễ dàng ra và dễ dàng ra.
Việc chọn chức năng nới lỏng phù hợp có thể tạo ra sự khác biệt lớn về chất lượng cảm nhận của hoạt ảnh trong ứng dụng của bạn. Bạn nên dành chút thời gian để chơi với chúng và xem những gì hoạt động tốt nhất cho các trường hợp sử dụng cụ thể của bạn.
Trợ giúp khung hình chính với hoạt ảnh phức tạp
Khung hình chính là điểm đánh dấu cho phép bạn xác định các khoảnh khắc trong hoạt ảnh của mình mà bạn muốn thay đổi các thuộc tính như vị trí, tỷ lệ hoặc xoay. Nó giống như đánh dấu thời điểm để hướng dẫn hoạt hình.
Bạn có thể sử dụng một bộ khung hình chính để đặt giá trị cụ thể cho bất kỳ thuộc tính nào bạn muốn tạo hiệu ứng. Điều này giúp bạn kiểm soát thời gian và hành vi, đặc biệt đối với các hoạt ảnh phức tạp như hoạt ảnh liên quan đến chuyển động của nhân vật.
Để tạo hoạt ảnh khung hình chính cơ bản, bạn cần chỉ định các khung hình chính bạn muốn tạo hiệu ứng giữa và tổng thời lượng.
Ví dụ: giả sử bạn muốn tạo hiệu ứng hình vuông từ vị trí bắt đầu là (0, 0) đến vị trí kết thúc là (100, 100) trong khoảng thời gian một giây.
Bạn có thể tạo một loạt các khung hình chính như thế này:
const keyframes = [
{ x: 0, y: 0 },
{ x: 50, y: 50 },
{ x: 100, y: 100 },
];
Trong trường hợp này, có ba khung hình chính: một ở đầu hoạt ảnh, một ở giữa và một ở cuối. Sau đó, bạn có thể chuyển mảng khung hình chính này vào thư viện hoạt ảnh của mình, cùng với thời lượng 1.000 mili giây, để tạo hoạt ảnh mượt mà giữa các khung hình chính.
Trong một số thư viện, bạn cũng cần chỉ định chức năng nới lỏng để kiểm soát tiến trình của hoạt ảnh. Tuy nhiên, bạn có thể áp dụng ý tưởng cơ bản về chỉ định khung hình chính và thời lượng cho hầu hết các thư viện hoạt hình.
Tận dụng lợi thế của thiết bị với khả năng tăng tốc phần cứng
Tăng tốc phần cứng có thể là một công cụ mạnh mẽ để tối ưu hóa hiệu suất hoạt ảnh React Native của bạn. Bằng cách tận dụng phần cứng đồ họa của thiết bị, bạn có thể giảm tải một số công việc xử lý khỏi CPU và do đó, đạt được hoạt ảnh mượt mà hơn, nhạy hơn.
Sau đó, GPU của thiết bị sẽ xử lý nguyên bản các giá trị và kiểu hoạt ảnh, thay vì luồng JavaScript phải làm như vậy.
Khả năng tăng tốc phần cứng có thể không khả dụng trên tất cả các thiết bị, vì vậy, điều quan trọng là phải kiểm tra hoạt ảnh của bạn trên nhiều thiết bị thực để đảm bảo hiệu suất tốt nhất.