Cách tạo ứng dụng phản ứng hoạt hình với React Spring
Hoạt ảnh thêm sức sống cho các ứng dụng của bạn và cải thiện trải nghiệm user tổng thể. React Spring là một gói hoạt ảnh sử dụng vật lý giống như mùa xuân trong các hoạt ảnh cốt lõi của nó để dễ dàng cấu hình. Các lò xo có tính tích lũy, nghĩa là chúng sẽ nhớ tất cả các giá trị được chuyển cho chúng.
Với Spring, bạn có thể:
- Thao tác các giá trị từ đơn vị đo lường thành dữ liệu thực tế.
- Thao tác các thuộc tính HTML.
- Thao tác đường dẫn SVG.
- Điều chỉnh CSS.
Trong hướng dẫn này, bạn sẽ tạo hoạt ảnh trượt và mờ dần trong ứng dụng React bằng cách sử dụng thành phần Spring của react-spring .
Bước 1 - Cấu hình dự án
Bạn sẽ cài đặt môi trường React bằng lệnh create-react-app . Điều này cũng sẽ tạo ra một số mã soạn sẵn cho phép bạn bắt đầu. Để cài đặt nó, hãy chạy lệnh sau:
- npm install -g create-react-app
Đến đây bạn có thể sử dụng nó để tạo ứng dụng của bạn :
- create-react-app react-spring-demo
Một folder có tên là react-spring-demo sẽ được tạo. Di chuyển vào folder đó và cài đặt gói react-spring :
- yarn add react-spring
Bạn sẽ nhận thấy rằng ta đang sử dụng sợi làm trình quản lý gói cho dự án này, vì nó là trình quản lý gói mặc định cho create-react-app . Đảm bảo nó được cài đặt bằng lệnh sau:
- npm install -g yarn
Bây giờ mọi thứ đã được cài đặt , bạn đã sẵn sàng để tạo trang động đầu tiên cho mình.
Bước 2 - Kiểu hoạt hình
Spring được dùng để tạo kiểu hoạt hình. Trong ví dụ này, bạn sẽ sử dụng nó để tạo hiệu ứng chuyển đổi sang một trang mới được tải. Để làm điều này bạn sẽ quấn jsx bối cảnh App.js trong một Spring thành phần.
Thành phần Spring sẽ lấy hai đạo cụ, from và to , đại diện cho các giá trị được nội suy bởi hoạt ảnh.
Trong trường hợp của ta , ta muốn tạo hiệu ứng của một trang thả xuống từ trên cao và mờ dần vào trong. Bản mẫu được tạo bởi create-react-app có nền hoàn hảo để hiển thị hiệu ứng này, vì vậy bạn sẽ không cần thay đổi nó ngay bây giờ.
Để đạt được hiệu ứng giảm, lề trên ban đầu của các phần tử trang sẽ được đặt thành giá trị âm và đưa về 0 trong quá trình hoạt ảnh. Để tạo hiệu ứng mờ dần, bạn sẽ đặt giá trị ban đầu của độ mờ là 0 và đưa giá trị đó về 1 ở cuối hoạt ảnh.
Đây là file App.js sẽ trông như thế nào:
// import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { Spring } from 'react-spring'; class App extends Component { render() { return ( <Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}> { props => ( <div className="App" style={ props }> <div > <header className="App-header" > <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> </div> ) } </Spring> ); } } export default App; Kích hoạt ứng dụng của bạn bằng cách chạy lệnh này.
- yarn start
Trình duyệt của bạn sẽ mở ra và bạn sẽ thấy trang tải với độ giảm mong muốn và mờ dần trong các hình ảnh động.
Bạn có thể sử dụng Spring để tạo nhiều hoạt ảnh hơn nữa bằng cách điều chỉnh nhiều kiểu khác nhau. Bạn nên sử dụng độ mờ và bản dịch hoạt hình để giữ cho ứng dụng của bạn sáng sủa.
Bước 3 - Tạo ảnh động cho innerText
Bạn cũng có thể sử dụng Spring để làm sinh động giá trị của nội dung hiển thị trên màn hình. Để hiển thị điều này, bạn sẽ tạo một bộ đếm bắt đầu từ 0 và kết thúc vào 10 bằng Spring. from sẽ giữ giá trị ban đầu và to sẽ giữ giá trị cuối cùng được hiển thị.
Trong folder src , tạo một folder có tên là components . Trong folder đó, tạo một file có tên là Counter.jsx . Thêm mã sau vào Countrt.jsx :
import React from 'react'; import { Spring } from'react-spring'; const counter = () => ( <Spring from={{ number: 0 }} to={{ number: 10 }} {props => <div>{props.number.toFixed()}</div>} </Spring> ) export default counter; Nhập bộ đếm vào App.js và thêm nó dưới phần tử tiêu đề để hiển thị nó trong ứng dụng:
... import Counter from './components/Counter'; class App extends Component { render() { return ( <Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}> { props => ( <div className="App" style={ props }> <div > <header className="App-header" > <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> <Counter /> </header> </div> </div> ) } </Spring> ); } } export default App; Khi bạn mở trình duyệt của bạn , bạn sẽ thấy bộ đếm dưới dòng chữ Learn React :
Hoạt ảnh xảy ra quá sớm nên bạn đã bỏ lỡ nó trong khi trang đầu tiên đang hiển thị hoạt ảnh. Để khắc phục điều này, bạn có thể trì hoãn hoạt ảnh bằng cách thêm một giá trị chống delay dưới dạng một giá trị tính bằng mili giây. Đây là khoảng thời gian hoạt ảnh sẽ đợi trước khi bắt đầu.
Sau khi thêm một giây trễ, chức năng bộ đếm bây giờ sẽ giống như sau:
const counter = () => ( <Spring from={{ number: 0 }} to={{ number: 10 }} delay= '1000'> {props => <div>{props.number.toFixed()}</div>} </Spring> ) Bộ đếm bây giờ bắt đầu sau khi hoạt ảnh trang hoàn tất. Bạn cũng có thể thêm độ trễ này thông qua phần hỗ trợ config , sẽ được đề cập khi thảo luận về các cấu hình Spring.
Bước 4 - Điều chỉnh config Spring
Như đã đề cập trước đây, Lò xo dựa trên vật lý. Điều này nghĩa là bạn không phải xử lý thủ công với thời lượng và đường cong. Điều này rất hữu ích vì nó sẽ loại bỏ một số bài toán nặng mà bạn có thể phải học. Tuy nhiên, bạn vẫn có thể điều chỉnh hành vi của Spring bằng cách điều chỉnh lực căng, ma sát, độ trễ, dung lượng và các hành vi khác của nó thông qua thuộc tính config .
react-spring bao gồm các cài đặt trước mà bạn có thể sử dụng để điều chỉnh Springs của bạn . Để sử dụng chúng, bạn phải nhập config từ gói react-spring và đưa chúng vào thuộc tính config của Spring. Để tránh nhầm lẫn về config nào, hãy xem ví dụ sau:
import React from 'react'; import { Spring, config } from'react-spring'; const counter = () => ( <Spring from={{ number: 0 }} to={{ number: 10 }} delay= '1000' config = { config.molasses }> {props => <div>{props.number.toFixed()}</div>} </Spring> ) export default counter; Trong ví dụ trên, bạn đã sử dụng cài đặt sẵn molasses . Đây là độ căng và ma sát cao được cung cấp bởi react-spring . Các giá trị đặt trước thường xác định tính chất tension và friction của lò xo. Các cài đặt trước này bao gồm molasses , default , slow , stiff và wobbly .
Trong khi các giá trị đặt trước chỉ xác định lực căng và ma sát, bạn có thể cấu hình thủ công các thuộc tính khác của hoạt ảnh Spring. Một số ví dụ bao gồm độ trễ, dung lượng , vận tốc và thời lượng. Để có danh sách đầy đủ các thuộc tính mà bạn có thể cấu hình, cùng với các tùy chọn khác có thể được chuyển làm đạo cụ, hãy xem trang này .
Bước 5 - Khám phá cách sử dụng với Hooks
Group React gần đây đã giới thiệu React Hooks . React Hooks cho phép bạn tạo các thành phần chức năng có thể lưu trữ vĩnh viễn dữ liệu và gây ra các hiệu ứng, bổ sung trạng thái cho các thành phần chức năng. Tại thời điểm viết bài này, hook chỉ có sẵn trong React 16.7 alpha . Để sử dụng hook, bạn cần nâng cấp lên version 16,7 alpha của react và react-dom .
Để thực hiện việc này, hãy chạy các lệnh sau:
- yarn remove react-dom && yarn add react-dom@16.7.0-alpha.0
- yarn remove react && yarn add react@16.7.0-alpha.0
Ta có thể sử dụng hook out of the box với useSpring react-spring , nó xuất ra một hook được gọi là useSpring . Móc này cho phép bạn xác định và cập nhật dữ liệu và thường sẽ bao gồm các giá trị giống như bạn sẽ chuyển làm đạo cụ. useSpring sẽ biến nó thành dữ liệu động. Để giới thiệu điều này, hãy xem cách ta có thể có nhiều văn bản hơn được hiển thị sau khi các hoạt ảnh trước của ta hoàn thành.
Tạo file thành phần mới có tên Hooks.jsx và thêm mã sau:
import React from 'react'; import { useSpring, animated } from 'react-spring'; const HookedComponent = () => { const [props] = useSpring({ opacity: 1, color: 'white', from: { opacity: 0 }, delay: '2000' }) return <animated.div style={props}>This text Faded in Using hooks</animated.div> } export default HookedComponent; Mã này chuyển cài đặt mùa xuân như một đối tượng của các đối số để useSpring . Sau đó, nó sẽ chuyển các giá trị này cho phần tử animated tạo ra mùa xuân động. Độ trễ được đặt thành 2000 mili giây đảm bảo văn bản từ thành phần được nối sẽ mờ dần sau khi bộ đếm kết thúc.
Bây giờ hãy nhập nó vào App.js và sử dụng HookedComponent trong ứng dụng của ta . Sau khi làm sạch một số mã soạn sẵn ban đầu từ create-react-app . Kích hoạt ứng dụng cuối cùng của bạn để xem xét các thay đổi.
Kết luận
Đến đây bạn đã cài đặt một ứng dụng dùng thử với react-spring . Spring cung cấp các phương tiện hiệu quả để tạo hiệu ứng cho các ứng dụng React trong khi lấy đi một lượng lớn dung lượng công việc từ nhà phát triển.
Bạn có thể xây dựng trên Spring bằng cách sử dụng các thành phần khác của react-spring . Nhìn chung, react-spring bao gồm nhiều tùy chọn khác nhau tùy thuộc vào nhu cầu hoạt hình của bạn.
Các tin liên quan
