Tạo hiệu ứng trong react với React Spring

Trong bài viết này chúng ta sẽ tìm hiểu về cách tạo animation với thư viện React Spring cho các element trong React

Cài đặt

Để bắt đầu chúng ta khởi tạo project với create-react-app trong command line tool.

create-react-app react-animations

Sau đó chúng ta di chuyển đến thư mục react-animations và cài đặt react spring library.

cd react-animations
npm i react-spring
npm start

Tạo hiệu ứng đầu tiên với Spring component

Trong App.js ta xoá đi các dòng code mặc định ban đầu và thêm vào đoạn code bên dưới:

import React from "react";
import { Spring } from "react-spring";
import "./styles.css";

function App() {
  return (

   <Spring
     from={{ opacity: 0.6, marginTop: -50 }}
     to={{ opacity: 1, marginTop: 50 }}
   >
     {props => (
        <div style={props} className="App">
          <article className="post">
            <h1>My first posts</h1>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Cupiditate rerum reprehenderit consectetur porro similique
              reiciendis ex consequuntur tempore! Similique, pariatur
              harum.Facilis, accusantium quam labore incidunt soluta
              suscipit ipsa omnis.
            </p>
          </article>
        </div>
      )}
    </Spring>
  );
}

export default App;

Trong đoạn code trên chúng ta import component Spring từ react-spring. Trong component Spring ta sử dụng 1 props là function trả về React Element, và component Spring sẽ render giá trị trả về của hàm đó thay vì trực tiếp render React Element như thông thường.

Sau đó truyền props parameter vào style attribute của thẻ div.

Với Spring component chúng ta sẽ tạo hiệu ứng di chuyển các elements và nó nhận vào 2 props khác là from (initial value) và to (final value):

From: vị trí ban đầu.

To: vị trí khi kết thúc hiệu ứng

Tạo hiệu ứng cho nhiều elements

Để có thể tạo hiệu ứng cho nhiều component spring cung cấp một component là Trail.

Tạo component AllPosts và import Trail từ react-spring theo ví dụ sau đây:

import React from "react";
import { Trail } from "react-spring";
import "./styles.css";
 
const posts = [
  { title: "My first post", id: 1 },
  { title: "My second post", id: 2 },
  { title: "My Third post", id: 3 },
  { title: "My Fourth post", id: 4 }
];
 
function AllPosts() {
  return (
 
   <Trail
     items={posts}
     keys={post => post.id}
     from={{ marginLeft: -20, opacity: 0 }}
     to={{ marginLeft: 20, opacity: 1 }}
   >
     {post => props => (
        <div style={props} className="post">
             {post.title}
        </div>
      )}
    </Trail>
  );
}
 
export default AllPosts

Trail nhận vào 4  props là items, keys, from và to.

Items: là array các element chúng ta cần tạo hiệu ứng

keys: là unique key prop cho mỗi item trong array.

Spring config

Spring cho phép chúng ta  điều chỉnh các thông số delays, tension, friction, resets props là config

Ngoài ra bạn có thể sử dụng các preset có sẵn của spring thay vì chỉnh tay từng thông số

Ví dụ: chúng ta tạo component navbar và sử dụng preset slow của Spring component để tạo hiệu ứng cho thanh navbar như sau:

import React from "react";
import ReactDOM from "react-dom";
import {Spring,config} from "react-spring";
import "./styles.css";
 
function NavBar() {
  return (
 
   <Spring from={{ number: 0 }} to={{ number: 100 }} config={config.slow}>
     {props => (

       <div style={{ width: props.number + "%" }}>
         <nav className="nav-bar">
            <a href="#">Home</a>
            <a href="#"> Posts</a>
            <a href="#">Contact</a>
          </nav>
        </div>
      )}
    </Spring>
  );
}
 
export default NavBar;

Kết luận:

Trên đây là những ví dụ cơ bản về cách sử dụng thư viện React Spring thông qua render props api. Thư viện React spring có thể đáp ứng hầu hết các hiệu ứng liên quan đến UI của bạn. Nó cung cấp cho bạn các công cụ đủ linh hoạt để tự tin đưa ý tưởng của bạn vào các chuyển động trên giao diện.

Tuyển dụng React lương cao mới nhất trong tháng

TopDev via Devnow