از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
روش ایجاد یک انیمیشن بارگیری در React از ابتدا هنگام ایجاد برنامه های React که محتوا را از منابع خارجی واکشی می کنند و بارگذاری آن مدتی طول می کشد، همیشه ایده خوبی است که با درگیر کردن کاربران و حفظ توجه آنها با لودر، تجربه ای دلپذیر برای کاربر فراهم کنید. این به کاربران کمک می کند تا بفهمند چه اتفاقی می افتد روی به جای رفتن…
سرفصلهای مطلب
معرفی
هنگام ایجاد برنامه‌های React که محتوا را از منابع خارجی واکشی می‌کنند و بارگیری آن مدتی طول می‌کشد، همیشه ایده خوبی است که با درگیر کردن کاربران و حفظ توجه آنها با لودر، تجربه کاربری دلپذیری را ارائه دهید، زیرا این به کاربران کمک می‌کند بفهمند چه اتفاقی می‌افتد. روی به جای اینکه آنها را به حدس و گمان رها کنیم.
در این راهنما، روش نمایش انیمیشن لودر هنگام بارگذاری برنامه و بازیابی محتوا از منابع خارجی را یاد خواهیم گرفت. ما هم از یک اسپینر GIF استفاده می کنیم و هم یک اسپینر از ابتدا با استفاده از CSS ایجاد می کنیم.
برای این منظور – ما یک برنامه کوچک می‌سازیم که مظنه‌ها را واکشی می‌کند، با صفحه بارگیری در حین واکشی یک مظنه:
اگر می خواهید در مورد آن بیشتر بدانید
react-spinners– کتابخانه ای با اسپینرهای از پیش ساخته شده، ما را بخوانید “چگونه یک انیمیشن بارگذاری در React با react-spinners ایجاد کنیم”!
ایجاد یک Sample React App
بیایید با نگاهی به نشانه گذاری React خود شروع کنیم. اصولاً ما دو تا داریم <div> عناصر در والدین <div> (به خاطر سادگی) – یکی است loader-container و دومی است main-content:
import React from 'react';
const App = () => {
return (
<div className="container">
<div className="loader-container">
<div className="spinner"></div>
</div>
<div className="main-content">
<h1>Hello World!</h1>
<p>
This is a demo Project to show how to add animated loading with React.
</p>
<div className="buttons">
<button className="btn">
<a href="#">Read Article</a>
</button>
<button className="btn get-quote">
Generate Quote
</button>
</div>
<div className="quote-section">
<blockquote className="quote">
If you do not express your own original ideas, if you do not listen
to your own being, you will have betrayed yourself.
</blockquote>
- <span className="author">Rollo May</span>
</div>
</div>
</div>
);
};
export default App;
تا کنون، ما فقط ایجاد کرده ایم <div> برای لودر ما اکنون می‌توانیم روش‌های مختلف برای به دست آوردن لودر و همچنین روش ظاهر کردن آن را بررسی کنیم روی یک جزء، یا حتی آن را در کل صفحه نمایش دهید.
توجه داشته باشید: می توانید بررسی کنید این مخزن و در صورت نیاز هنگام خواندن این راهنما، کد را بررسی کنید.
با React – GIF و CSS یک انیمیشن لودر ایجاد کنید
اولین کاری که باید قبل از پیاده سازی یک انیمیشن لودر در React انجام دهیم این است که خود انیمیشن را بسازیم. راه های مختلفی وجود دارد که می توانیم این کار را انجام دهیم، اما، در این مقاله، به دو مورد از آنها نگاهی خواهیم انداخت – GIF انیمیشن ها و انیمیشن های CSS.
ایجاد یک انیمیشن لودر با استفاده از GIF
آ GIF یک تصویر متحرک است که (می تواند) بی نهایت خود را بدون مکث تکرار کند. با هر کدوم درست میشه GIF سازنده یا از ابتدا با ابزار طراحی. در این راهنما، ما از این GIF استفاده خواهد کرد و آن را به عنوان پس زمینه از loader-container:
.loader-container {
width: 100%;
height: 100vh;
position: fixed;
background: rgba(0, 0, 0, 0.834)
url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center
no-repeat;
z-index: 1;
}
توجه داشته باشید: شما می توانید همین GIF را روی عناصر دیگر نیز اعمال کنید تا محدوده انیمیشن را بومی سازی کنید.
کد بالا به ما در ایجاد یک پس‌زمینه سیاه کمک می‌کند که قبل از قرار دادن نماد لودر در مرکز، کل صفحه را پوشش دهد. هنگامی که ما برنامه خود را اجرا می کنیم، loader-container اکنون در بالا خواهد بود زیرا ما آن را تنظیم کردیم z-index به 1:
عالی! ما یک صفحه بارگیری با استفاده از a ایجاد کرده ایم GIF تصویر به عنوان لودر راه‌های بی‌شماری دیگر وجود دارد که می‌توانیم به خودمان استایل بدهیم loader-container برای افکت های مختلف حال بیایید ببینیم که چگونه می‌توانیم این لودر را با CSS ایجاد کنیم، و از استفاده از تصاویر خارجی اجتناب کنیم، که می‌تواند بار زیادی را از نظر زمان بارگذاری ایجاد کند.
ایجاد یک انیمیشن لودر با استفاده از CSS
CSS یک زبان رسا است که به ما امکان می دهد سبک های مختلفی مانند ترسیم اشکال، توصیف ترتیب نسبی عناصر و ویژگی های آنها، اضافه کردن تصاویر و حتی متحرک سازی آنها را انجام دهیم. روی نیازهای ما بیایید یک خیلی ساده بسازیم اسپینر لودر.
به یاد داشته باشید که ما یک اسپینر داشتیم <div> درون container در ما load-container نشانه گذاری؟ اگرچه قبلاً از آن استفاده نمی کردیم، اکنون از آن برای استایل دادن به نماد و سپس استفاده از آن استفاده می کنیم load-container برای وسط نماد لودر:
.loader-container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
background: rgba(0, 0, 0, 0.834);
z-index: 1;
}
.spinner {
width: 64px;
height: 64px;
border: 8px solid;
border-color: #3d5af1 transparent #3d5af1 transparent;
border-radius: 50%;
animation: spin-anim 1.2s linear infinite;
}
@keyframes spin-anim {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
با CSS – ما می توانیم روش انجام انیمیشن را به صورت دقیق تنظیم کنیم. در اینجا، ما GIF را از قبل بازسازی کرده ایم! تا کنون، دو رویکرد اصلی برای ایجاد انیمیشن لودر را مورد بحث قرار داده ایم. حال، بیایید نگاهی بیندازیم که چگونه می توانیم آنها را عملی کنیم.
روش ایجاد یک انیمیشن در حال بارگذاری در React
انیمیشن بارگیری در React با روش انجام آن در جاوا اسکریپت متفاوت است زیرا ما اکنون از حالت و اپراتورهای سه تایی برای کنترل زمان ظاهر شدن و ناپدید شدن لودر. ما نیز استفاده خواهیم کرد useEffect() hook برای اطمینان از اینکه یک لودر برای مدت زمان از پیش تعیین شده در حین بارگیری برنامه ما ظاهر می شود. اولین قدم این است که import هر دو قلاب مربوطه، به دنبال ایجاد حالت بارگیری ما:
import React, { useState, useEffect } from 'react';
const App = () => {
const (loading, setLoading) = useState(false);
return (
<!-- ... -->
);
};
export default App;
توجه داشته باشید: دولت تنظیم شده است false به طور پیش فرض در کد بالا، و ما می توانیم آن را به true هر زمان که ما بخواهیم loader-container ظاهر شدن.
برای شروع، از setTimeout() روشی که به لودر اجازه می دهد به مدت 2 ثانیه ظاهر شود در حالی که page در حال ارائه است. این وقفه یک تماس API گران قیمت را شبیه سازی می کند که برای بازگشت نتایج به زمان نیاز دارد:
import React, { useState, useEffect } from 'react';
const App = () => {
const (loading, setLoading) = useState(false);
useEffect(() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 2000);
}, ());
return (
<div className="container">
<!-- ... -->
</div>
);
};
export default App;
این بدان معنی است که هر زمان که برنامه ما رندر می شود، ما loader-container باید به مدت 2 ثانیه نمایش داده شود. ما می توانیم از یک عملگر سه تایی برای کنترل خود استفاده کنیم loader-container و انیمیشن را در این بازه زمانی نمایش دهید:
import React, { useState, useEffect } from 'react';
const App = () => {
const (loading, setLoading) = useState(false);
useEffect(() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 2000);
}, ());
return (
<div className="container">
{loading ? (
<div className="loader-container">
<div className="spinner"></div>
</div>
) : (
<div className="main-content">
<h1>Hello World!</h1>
<p>
This is a demo Project to show how to add animated loading with
React.
</p>
<div className="buttons">
<button className="btn">
<a href="#">Read Article</a>
</button>
<button className="btn get-quote">
Generate Quote
</button>
</div>
<div className="quote-section">
<blockquote className="quote">{quote.content}</blockquote>-{' '}
<span className="author">{quote.author}</span>
</div>
</div>
)}
</div>
);
};
export default App;
چه زمانی loading تنظیم شده است true، اپراتور سه تایی در کد قبلی نشان می دهد loader-container. در غیر این صورت، آن را نمایش می دهد main-content.
اگر می خواهید در مورد عملگرهای سه تایی بیشتر بخوانید – ما را بخوانید “راهنمای اپراتور سه تایی در جاوا اسکریپت”!
پیاده سازی یک انیمیشن در حال بارگذاری هنگام درخواست محتوا از یک API
سناریوی دیگری که در آن افراد از یک انیمیشن بارگذاری در React استفاده می‌کنند، زمانی است که محتوا را از یک منبع خارجی بارگذاری می‌کنند، زیرا این داده‌ها خارجی هستند و تحویل آنها علاوه بر زمان‌های پردازش پیش‌بینی‌شده، تحت تأثیر رویدادهای خارجی مختلفی است.
بیایید یک نقل قول تصادفی از Random Quotes API درخواست کنیم و آنها را در حالت ذخیره کنیم و پس از آن آنها را نمایش خواهیم داد. روی صفحه نمایش هر زمان که ما درخواستی ارسال کنیم، loading حالت تنظیم خواهد شد true. هنگامی که محتوا واکشی شد، آن را به حالت اولیه تنظیم می کنیم false، توقف انیمیشن:
import React, { useState, useEffect } from 'react';
const App = () => {
const (loading, setLoading) = useState(false);
const (quote, setQuote) = useState({});
const getRandomQuote = () => {
setLoading(true);
fetch('https://api.quotable.io/random')
.then((res) => res.json())
.then((data) => {
setLoading(false);
setQuote(data);
});
};
return (
<div className="container">
{loading ? (
<div className="loader-container">
<div className="spinner"></div>
</div>
) : (
<div className="main-content">
<h1>Hello World!</h1>
<p>
This is a demo Project to show how to add animated loading with
React.
</p>
<div className="buttons">
<button className="btn">
<a href="#">Read Article</a>
</button>
<button className="btn get-quote" onClick={getRandomQuote}>
Generate Quote
</button>
</div>
<div className="quote-section">
<blockquote className="quote">{quote.content}</blockquote>-{' '}
<span className="author">{quote.author}</span>
</div>
</div>
)}
</div>
);
};
export default App;
ما یک اسپینر پاسخگو از ابتدا ایجاد کرده ایم! به طور متناوب، می توانید از react-spinner کتابخانه ای که دارای طیف گسترده ای از انیمیشن های لودر است.
اگر می خواهید در مورد آن بیشتر بدانید
react-spinners– کتابخانه ای با اسپینرهای از پیش ساخته شده، ما را بخوانید “چگونه یک انیمیشن بارگذاری در React با react-spinners ایجاد کنیم”!
نتیجه
در این راهنما، ما یاد گرفتیم که چگونه با استفاده از دو رویکرد مختلف، یک انیمیشن بارگذاری را به برنامه React خود اضافه کنیم. ما یک GIF ساده وارد کرده ایم و یک اسپینر از ابتدا با CSS ایجاد کرده ایم. در نهایت، نگاهی به روش ادغام انیمیشن در یک محیط واقعی‌تر انداخته‌ایم – واکشی داده‌ها از یک API و نمایش افکت در حین انتظار برای نتیجه.
منتشر شده در 1403-01-08 12:15:03
