Sử dụng React-Lottie thêm animation cho web React

Đối với hướng dẫn này, chúng ta sẽ xây dựng app React bao gồm hai loại Lotties, loại thông thường và loại khác( được kiểm soát tùy thuộc vào các giá trị nhất định ở state).


1053

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-lottie

Tả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í.

Lottie Files landing page

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.

Lottie Files menu

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 UncontrolledLottie

Trong 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 json
  • autoplay – một boolean sẵn sàng bắt đầu bất cứ lúc nào
  • loop – boolean hoặc number xác định xem animation sẽ lặp lại bao nhiêu lần
  • rendererSettings – 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:

Image of Uncontrolled Lottie

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 ControlledLottie

Chú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ông
  • isPaused – 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:

Image of Controlled lottie

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


Like it? Share with your friends!

1053