Tạo project React
Chúng ta sẽ sử dụng create-react-app để tạo ứng dụng của mình. Nếu bạn chưa cài đặt, hãy chạy lệnh sau:
npm install --g create-react-app
Bây giờ hãy để cùng nhau tạo ứng dụng với tên lottie-demo:
create-react-app lottie-demoĐiều này sẽ tạo ra boilerplate cho ứng dụng và cấu hình môi trường phát triển React của chúng ta. Mở thư mục lottie-demo và có thể code ngay lập tức. Chúng ta sử dụng Yarn với câu lệnh sau
yarn add react-lottieTải sample Lotties
Chúng ta sẽ nhận được hình ảnh động Sample từ LottieFiles, vì vậy hãy đến trang chủ và tạo tài khoản miễn phí.
LottieFiles cho phép bạn truy cập vào một thư viện animations được tuyển chọn từ các designer trên toàn cầu. Nó cũng cung cấp một nền tảng để test, upload và chia sẻ animation của riêng bạn.
Lướt qua các animations, điều chỉnh các cài đặt nếu cần và khi bạn thích animation thì bạn click vào Download JSON để có được animation. Bên cạnh thư mục src của ứng dụng, tạo thêm hai thư mục,components và lotties. Chúng sẽ tạo các component React và dữ liệu animation Lottie tương ứng. Đặt các tệp JSON đã tải xuống bên trong thư mục lotties.
Bây giờ chúng ta đã sẵn sàng để tạo các component hiển thị các animations.
Tạo Uncontrolled Lotties
Animations có thể được phép chạy tự do hoặc bị thao túng bởi dữ liệu ở trạng thái. Đầu tiên, tạo ra animation và renders lottie.
Tạo một file có tên UncontrolledLottie.jsx bên trong thư mục components và thêm đoạn code sau
import React, { Component } from 'react'
import Lottie from 'react-lottie'
import animationData from '../lotties/4203-take-a-selfie.json'
class UncontrolledLottie extends Component {
render(){
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
return(
<div>
<h1>Lottie</h1>
<p>Base animation free from external manipulation</p>
<Lottie options={defaultOptions}
height={400}
width={400}
/>
</div>
)
}
}
export default UncontrolledLottieTrong trường hợp này, 4204-Take-a-selfie.json là tệp JSON của lottie được tải xuống. Thay thế bằng bất cứ thứ gì bạn đã tải xuống.
Bây giờ hãy để lướt qua các thông tin được cung cấp trong cấu hình. Bạn sẽ nhận thấy chúng ta chuyển options prop cho component Lottie; cái này chứa dữ liệu cấu hình cho animation được hiển thị. Điều này bao gồm:
animationData– Object có dữ liệu animation, trong trường hợp này, file jsonautoplay– một boolean sẵn sàng bắt đầu bất cứ lúc nàoloop– boolean hoặc number xác định xem animation sẽ lặp lại bao nhiêu lầnrendererSettings– dữ liệu config cho render
Đây chỉ là một số tùy chọn
Chúng ta cũng cung cấp kích thước (chiều dài và chiều rộng) của animation
Animation này hiện đã sẵn sàng để sử dụng bằng cách import nó vào App.js. Điều này sẽ trông giống như sau:
Tạo Controlled Lotties
Lotties có thể được thao tác trong React để thay đổi số thuộc tính của chúng bằng cách sử dụng dữ liệu ở state. Trong trường hợp này, chúng ta sẽ xem cách chúng ta có thể play, stop và pause các animation trong lottie react.
Tạo file trong các components và đặt tên là ControledLottie.jsx. Thêm đoạn code sau
import React, { Component } from 'react'
import Lottie from 'react-lottie'
import animationData from '../lotties/77-im-thirsty.json'
class ControlledLottie extends Component {
state = {isStopped: false, isPaused: false}
render(){
const buttonStyle = {
display: 'inline-block',
margin: '10px auto',
marginRight: '10px',
border: 'none',
color: 'white',
backgroundColor: '#647DFF',
borderRadius: '2px',
fontSize: '15px'
};
const defaultOptions = {
loop: true,
autoplay: true,
animationData: animationData,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice'
}
};
return(
<div className="controlled">
<h1>Controlled Lottie</h1>
<p>Uses state manipulation to start, stop and pause animations</p>
<Lottie options={defaultOptions}
height={400}
width={400}
isStopped={this.state.isStopped}
isPaused={this.state.isPaused}
/>
<button style={buttonStyle} onClick={() => this.setState({isStopped: true})}>Stop</button>
<button style={buttonStyle} onClick={() => this.setState({isStopped: false, isPaused: false })}>Play</button>
<button style={buttonStyle} onClick={() => this.setState({isPaused: !this.state.isPaused})}>Pause</button>
</div>
)
}
}
export default ControlledLottieChúng ta cùng nhau phân tích đoạn code. Có một vài điểm khác biệt giữa điều này và ControledLottie.jsx. Chúng ta đã thêm ba button ở phía dưới cùng với style của chúng. Các button này được sử dụng để chuyển các giá trị của dữ liệu ở state.
Component Lottie cũng có thêm hai props:
isStopped– a boolean: cho biết animation có hoạt động hay khôngisPaused– a boolean: cho biết animation có bị tạm dừng hay không
Đây là một component lottie được kiểm soát của chúng ta sẽ như thế nào:
Cả haianimations đều đã sẵn sàng để sử dụng ngay bây giờ, vì vậy hãy import chúng vào App.js và hiển thị chúng trong ứng dụng của chúng ta.
Chỉnh sửa codetrong App.js, import các component và thêm chúng vào bên trong function render:
import React, { Component } from 'react';
import './App.css';
import UncontrolledLottie from './components/UncontrolledLottie';
import ControlledLottie from './components/ControlledLottie';
class App extends Component {
render() {
return (
<div className="App">
<h1>REACT LOTTIES</h1>
<div className="lotties">
<UncontrolledLottie />
<ControlledLottie />
</div>
</div>
);
}
}
export default App;Thêm đoạn style để phù hợp responsive cho mobile. Chúng ta có thể làm điều này bằng cách sử dụng grid CSS. Thêm code sau vào tệp App.css của bạn.
.lotties{
display: grid;
grid-template-columns: auto auto;
}
@media only screen and (min-device-width : 320px) and (max-device-width: 480px){
.lotties{
display: grid;
grid-template-columns: auto;
}
}Điều này đặt các lotties trong hai cột sẽ được giảm xuống một cột duy nhất trên các thiết bị có chiều rộng nhỏ hơn.
Bây giờ chạy app React ngay nào
yarn start
Trình duyệt của bạn sẽ mở ra và bạn sẽ có thể thấy hai hình ảnh động đang hoạt động. Nhấp vào Pause sẽ đóng băng animation được kiểm soát trong khung hiện tại của nó. Nhấp vào nó một lần nữa sẽ tiếp tục nó cũng như nhấp Play. Nhấp vào Stop trả lại animation về vị trí mặc định của nó và giữ nó ở đó.
Kết luận
Lottie có thể được sử dụng để thêm animation vào ứng dụng web của bạn. Nó có thể được sử dụng để làm cho các app tương tác hơn và cung cấp phản hồi hấp dẫn trực quan, như animation cho biết trạng thái của các quy trình nhất định.
Tham khảo thêm React : Tự học React JS thời đại dịch Corona nCoV – Phần 1
Bài viết này được sưu tầm và tổng hợp từ nhiều nguồn trên Internet.
Nếu có gì không hiểu thì inbox messenger bên dưới mình hỗ trợ thêm nhé.
