Làm cho ứng dụng React của bạn trở nên sống động với các hình ảnh động
Hoạt ảnh có thể là một cách tuyệt vời để cải thiện trải nghiệm người dùng đối với ứng dụng React của bạn. Chúng có thể giúp tương tác mượt mà hơn và cũng có thể cung cấp phản hồi trực quan hoặc thu hút sự chú ý vào một yếu tố cụ thể.
Có nhiều cách bạn có thể làm việc với hoạt ảnh CSS bằng React, từ một giải pháp gốc cho đến các thư viện của bên thứ ba.
Mục Lục
Tại sao lại sử dụng Animations trong React?
Có nhiều lý do tại sao bạn có thể muốn sử dụng hình ảnh động trong ứng dụng React của mình. Một số lý do phổ biến nhất bao gồm:
- Làm cho các tương tác cảm thấy tự nhiên hơn. Hoạt ảnh có thể giúp tương tác của người dùng cảm thấy tự nhiên và mượt mà hơn. Ví dụ: nếu bạn đang sử dụng một thành phần chuyển đổi, bạn có thể muốn tạo hiệu ứng cho nút chuyển đổi giữa trạng thái “bật” và “tắt”. Một ví dụ khác là thanh tiến trình, bạn có thể tạo thanh tiến trình động cho các trang trong ứng dụng phản ứng của mình.
- Cung cấp phản hồi trực quan. Ảnh động có thể cung cấp phản hồi trực quan cho người dùng. Ví dụ: nếu người dùng nhấp vào một nút, bạn có thể muốn tạo hoạt ảnh cho nút đó để cho biết rằng ứng dụng đã đăng ký hành động đó.
- Hướng dẫn sự chú ý của người dùng. Ảnh động có thể hướng sự chú ý của người dùng đến một yếu tố cụ thể. Ví dụ: nếu bạn có hộp thoại phương thức xuất hiện trên màn hình, bạn có thể muốn sử dụng hoạt ảnh để thu hút sự chú ý của người dùng vào nó.
- Tạo cảm giác cấp bách. Ảnh động có thể tạo ra cảm giác cấp bách hoặc quan trọng. Ví dụ: nếu bạn có thành phần bộ đếm thời gian đang đếm ngược, bạn có thể muốn sử dụng hoạt ảnh để phản ánh tính cấp bách khi thời hạn đến gần.
Có một số cách để thêm hoạt ảnh vào các thành phần React. Ba thứ bạn sẽ học về cách sử dụng ở đây là hoạt ảnh theo phong cách nội tuyến, thư viện hoạt ảnh phản ứng và thư viện hoạt ảnh phản ứng đơn giản.
Bắt đầu bằng cách tạo một ứng dụng phản ứng cơ bản, sau đó làm theo phương pháp bạn chọn.
Phương pháp 1: Sử dụng hoạt ảnh kiểu nội tuyến
Ví dụ: giả sử bạn muốn tạo hoạt ảnh cho một thành phần để nó mờ dần khi bạn nhấp vào một nút. Bạn có thể thực hiện việc này bằng mã sau:
import React, { Component } from 'react';class FadeInOut extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: false
};
}
render() {
const styles = {
opacity: this.state.isVisible ? 1 : 0,
transition: 'opacity 2s'
};
return (
<div>
<div style={styles}>
Hello, world!
</div>
<button onClick={this.toggleVisibility}>
Toggle
</button>
</div>
);
}
toggleVisibility = () => {
this.setState(prevState => ({
isVisible: !prevState.isVisible
}));
}
}
export default FadeInOut;
Trong ví dụ này, một đối tượng kiểu có độ mờ và thuộc tính chuyển tiếp. Độ mờ là 0 khi không nhìn thấy thành phần và bằng 1 khi có. Thuộc tính chuyển tiếp là “opacity 2s”, sẽ làm cho độ mờ chuyển tiếp trong hai giây khi nó thay đổi.
Nút chuyển đổi khả năng hiển thị của thành phần. Khi ai đó nhấp vào nút, biến trạng thái có thể thay đổi được sẽ cập nhật và thành phần sẽ mờ dần đi tùy thuộc vào trạng thái hiện tại của nó.
Phương pháp 2: Sử dụng Thư viện hoạt ảnh phản ứng
Một cách khác để thêm hoạt ảnh vào các thành phần React là sử dụng một thư viện chẳng hạn như hoạt ảnh phản ứng. Thư viện này cung cấp một tập hợp các hoạt ảnh được xác định trước mà bạn có thể sử dụng trong các thành phần React của mình.
Để sử dụng hoạt ảnh phản ứng, trước tiên bạn cần cài đặt thư viện:
npm install react-animations Bạn cũng cần cài đặt aphrodite, đây là một phần phụ thuộc của các hoạt ảnh phản ứng:
npm install aphrodite Khi bạn đã cài đặt các thư viện, bạn có thể nhập các hoạt ảnh mà bạn muốn sử dụng:
import { fadeIn, fadeOut } from 'react-animations';Sau đó, bạn có thể sử dụng các hoạt ảnh trong các thành phần của mình:
import React, { Component } from 'react';
import { StyleSheet, css } from 'aphrodite';
import { fadeIn, fadeOut } from 'react-animations';const styles = StyleSheet.create({
fadeIn: {
animationName: fadeIn,
animationDuration: '2s'
},
fadeOut: {
animationName: fadeOut,
animationDuration: '2s'
}
});
class FadeInOut extends Component {
constructor(props) {
super(props);
this.state = {
isVisible: false
};
}
render() {
const className = this.state.isVisible ? css(styles.fadeIn) : css(styles.fadeOut);
return (
<div>
<div className={className}>
Hello, world!
</div>
<button onClick={this.toggleVisibility}>
Toggle
</button>
</div>
);
}
toggleVisibility = () => {
this.setState(prevState => ({
isVisible: !prevState.isVisible
}));
}
}
export default FadeInOut;
Ví dụ này bắt đầu bằng cách nhập các hoạt ảnh fadeIn và fadeOut từ thư viện react-animations. Sau đó, nó xác định một đối tượng kiểu với các hoạt ảnh fadeIn và fadeOut, và animationDuration được đặt thành hai giây.
Nút sẽ chuyển đổi chế độ hiển thị của thành phần. Khi ai đó nhấp vào nó, biến trạng thái có thể chia sẻ sẽ cập nhật và thành phần sẽ mờ dần đi tùy thuộc vào trạng thái hiện tại của nó.
Phương pháp 3: Sử dụng Thư viện react-simple-animate
Thư viện react-simple-animate cung cấp một cách đơn giản để thêm hoạt ảnh vào các thành phần React. Nó cung cấp một API khai báo giúp dễ dàng xác định các hoạt ảnh phức tạp.
Để sử dụng thư viện, trước tiên bạn cần cài đặt nó:
npm install react-simple-animate Sau đó, bạn có thể sử dụng nó trong các thành phần của mình:
import React, { Component } from 'react';
import { Animate, AnimateKeyframes} from "react-simple-animate";class App extends Component {
render() {
return (
<div>
<Animate
play
start={{
opacity: 0
}}
end={{
opacity: 1
}}
>
<div>
Hello, world!
</div>
</Animate>
<AnimateKeyframes
play
duration={2}
keyframes={[
{ opacity: 0, transform: 'translateX(-100px)' },
{ opacity: 1, transform: 'translateX(0px)' }
]}
>
<div>
Hello, world!
</div>
</AnimateKeyframes>
</div>
);
}
}
export default App;
Các Hoạt hình thành phần mờ dần trong một phần tử div. Nó bắt đầu với độ mờ bằng 0 và kết thúc với độ mờ là 1. Bộ phận hỗ trợ phát được đặt thành true, điều này sẽ khiến hoạt ảnh tự động phát khi thành phần gắn kết.
Các AnimateKeyframes thành phần tạo hoạt ảnh cho một phần tử div trong hơn hai giây. Mảng khung hình chính chỉ định trạng thái bắt đầu và kết thúc của hoạt ảnh. Khung hình chính đầu tiên có độ mờ là 0 và giá trị translateX là -100px. Khung hình chính thứ hai có độ mờ là 1 và giá trị translateX là 0px.
Tăng mức độ tương tác của người dùng với hoạt ảnh
Bây giờ bạn đã biết một số cách sử dụng hoạt ảnh trong ứng dụng React của mình. Bạn có thể sử dụng hình ảnh động để tăng mức độ tương tác của người dùng với ứng dụng của mình.
Ví dụ: bạn có thể muốn sử dụng hoạt ảnh để thưởng cho người dùng hoàn thành một nhiệm vụ. Đây có thể là một cái gì đó đơn giản như một hoạt ảnh ngắn “spinner” hoặc một hoạt ảnh phức tạp hơn phát khi người dùng hoàn thành một cấp độ trong trò chơi.
Bạn cũng có thể triển khai ứng dụng React của mình trên web miễn phí với các dịch vụ như trang Github hoặc Heroku.