Lottie برای پخش انیمیشن‌های ساختارمند در وب و اپ به کار می‌رود. در یک مسیر رایج، طراح انیمیشن را در After Effects آماده می‌کند، بخش‌های پشتیبانی‌شده را با Bodymovin خروجی می‌گیرد و player آن را در محصول نمایش می‌دهد. داده انیمیشن می‌تواند در JSON باشد، اما داشتن این پسوند به معنی کوچک بودن یا اجرای یکسان در همه محیط‌ها نیست. فایل، منابع همراه و player هر سه در هزینه و کیفیت نمایش سهم دارند.
این ابزار برای بعضی شکل‌های متحرک و تصویرسازی‌های رابط مفید است، ولی جای هر نوع انیمیشن را نمی‌گیرد. تغییر ساده رنگ یا حرکت یک کنترل ممکن است با CSS یا Web Animations API روشن‌تر پیاده شود. ویدئوی دارای بافت تصویری و صدا نیز نیاز دیگری دارد. ابتدا بپرسید حرکت چه معنایی به کاربر می‌دهد و بعد ابزار را انتخاب کنید. انیمیشنی که فقط فضای صفحه را اشغال می‌کند، با انتخاب فرمت مناسب به تجربه مفید تبدیل نمی‌شود.
چه چیزی واقعاً تحویل داده می‌شود؟
داده Lottie می‌تواند شامل لایه‌ها، شکل‌ها، keyframeها و تنظیم‌های ترکیب باشد. اگر پروژه منبع به عکس یا قلم وابسته است، منابع دیگری نیز ممکن است لازم باشند. بنابراین تحویل یک فایل JSON بدون بررسی وابستگی‌ها کافی نیست. در راهنمای lottie-web، خروجی دارای تصاویر و پوشه همراه توضیح داده شده است. فایل طراحی اصلی، داده پخش و منابع لازم را به عنوان اجزای جداگانه تحویل بگیرید تا وابستگی پنهان در محصول ظاهر نشود.
عنوان «سبک» در این مقاله یک هدف طراحی است، نه ویژگی تضمین‌شده هر خروجی. مسیری با نقاط زیاد، ترکیب‌های طولانی و تصویر جاسازی‌شده می‌توانند داده را بزرگ کنند. هزینه پخش نیز فقط به حجم دانلود بستگی ندارد؛ تعداد شکل‌های متحرک و شیوه renderer اهمیت دارند. یک فایل کوچک می‌تواند پردازش قابل توجهی بخواهد. معیار پروژه باید هم زمان دریافت و هم رفتار پخش روی دستگاه‌های هدف را در نظر بگیرد، به‌ویژه وقتی چند انیمیشن هم‌زمان در صفحه قرار دارند.
قبل از ساخت، محدودیت مقصد را بدانید
همه قابلیت‌های After Effects در هر player پشتیبانی نمی‌شوند. rendererهای وب نیز لزوماً مجموعه قابلیت یکسانی ندارند. اگر طراح بر یک effect پیچیده، expression یا نوع خاصی از mask تکیه کند، خروجی می‌تواند با مرجع تفاوت پیدا کند. جدول رسمی ویژگی‌های lottie-web نقطه شروع بررسی است؛ نسخه و renderer مصرف‌شده را هم ثبت کنید. پیش‌نمایش در ابزار طراحی به تنهایی اثبات اجرای درست در مقصد نیست.
بهتر است یک نمونه کوتاه از دشوارترین بخش انیمیشن زودتر تهیه شود. اگر همان بخش با player منتخب قابل نمایش نیست، تصمیم طراحی را قبل از تکمیل پروژه تغییر دهید. کار روی جزئیات یک صحنه طولانی و کشف محدودیت در پایان، هزینه زیادی دارد. قرارداد میان طراح و توسعه‌دهنده باید شامل ابعاد ترکیب، مدت، frame rate، نقاط شروع و پایان و وابستگی‌های منابع باشد. این اطلاعات از حدس زدن درباره رفتار فایل جلوگیری می‌کند.
حرکت باید به وضعیت واقعی وصل باشد
یک انیمیشن موفقیت نباید صرفاً بعد از گذشت چند ثانیه پخش شود. موفقیت باید از نتیجه واقعی عملیات بیاید. اگر درخواست شکست خورده ولی علامت تأیید نمایش داده می‌شود، محصول اطلاعات اشتباه می‌دهد. برای loading نیز تفاوت میان فعالیت نامشخص و پیشرفت اندازه‌گیری‌شده را نگه دارید. حرکت دورانی یک شکل به معنای درصد پیشرفت نیست. متن وضعیت می‌تواند نتیجه را روشن کند و انیمیشن در کنار آن نقش تکمیلی داشته باشد.
اگر انیمیشن بخشی از onboarding است، امکان عبور یا توقف را متناسب با محتوا در نظر بگیرید. تکرار بی‌پایان در کنار متنی که باید خوانده شود، ممکن است توجه را مختل کند. حرکت تزئینی نباید مانع استفاده از کنترل‌های اصلی شود. در راهنمای Microinteraction رابطه بازخورد و عمل کاربر توضیح داده شده است. Lottie فقط روش نمایش حرکت است؛ تصمیم درباره زمان و علت نمایش همچنان به طراحی تجربه تعلق دارد.
دسترس‌پذیری و حالت بدون حرکت
معنای ضروری را فقط در فریم‌های متحرک قرار ندهید. اگر انیمیشن فرایندی را توضیح می‌دهد، متن یا نمایش ثابت باید آن رابطه را قابل فهم کند. برای حرکت تزئینی، اعلام همه اجزای داخلی به ابزار کمکی معمولاً لازم نیست. نام کنترل پخش و توقف را روشن بنویسید و حالت آن را در متن منعکس کنید. یک تصویر متحرک با نام «animation» به کاربر نمی‌گوید محتوا چیست یا کنترل چه کاری انجام می‌دهد.
ترجیح reduced motion را بخشی از رفتار محصول کنید. در این حالت می‌توان یک فریم مناسب را نشان داد یا حرکت غیرضروری را حذف کرد. انتخاب فریم صفر همیشه درست نیست؛ ممکن است شروع انیمیشن خالی باشد. برای یک نمایش تکمیلی، تصویر ثابت خوانا از پرش به فریم نامعلوم بهتر است. اگر ترجیح سیستم هنگام باز بودن صفحه تغییر می‌کند، وضعیت جدید را نیز اعمال کنید. کنترل دستی کاربر و ترجیح سیستم باید قرارداد روشنی داشته باشند.
نمونه مستقل برای کنترل پخش
نمونه زیر یک دایره تزئینی را با داده داخلی پخش می‌کند و به فایل تصویری یا خروجی آماده ناشناس وابسته نیست. فایل را با نام index.html در یک پوشه خالی ذخیره کنید. برای تهیه player در همان پوشه، npm init -y و سپس npm install lottie-web@5.13.0 را اجرا کنید. فایل HTML، player نصب‌شده در node_modules را می‌خواند. برای سرویس محلی می‌توانید python -m http.server 8000 را اجرا و نشانی http://localhost:8000 را باز کنید. نصب Node.js و Python پیش‌نیاز این روش است.
<!doctype html>
<html lang="fa" dir="rtl">
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>کنترل حرکت تزئینی</title>
<style>body{font-family:system-ui;margin:2rem;line-height:1.8;color:#17324d}#motion{width:200px;height:200px}button{font:inherit;padding:.5rem 1rem}button:focus-visible{outline:3px solid #084c8d;outline-offset:3px}</style>
<h1>کنترل حرکت تزئینی</h1><p>این حرکت فقط تزئینی است و پیشرفت یا موفقیت یک عملیات را نشان نمی‌دهد.</p>
<div id="motion" aria-hidden="true"></div>
<button id="toggle" disabled>در حال آماده‌سازی</button><p id="status" role="status">Player در حال بارگذاری است.</p>
<script src="./node_modules/lottie-web/build/player/lottie.min.js"></script>
<script>
const button=document.querySelector('#toggle');
const status=document.querySelector('#status');
const preference=matchMedia('(prefers-reduced-motion: reduce)');
if(!window.lottie){status.textContent='Player دریافت نشد. نصب وابستگی و مسیر فایل را بررسی کنید.';}
else {
const data={v:'5.13.0',fr:30,ip:0,op:60,w:200,h:200,nm:'Decorative pulse',ddd:0,assets:[],layers:[{
ddd:0,ind:1,ty:4,nm:'Circle',sr:1,ks:{o:{a:1,k:[{t:0,s:[40],e:[100],o:{x:[.33],y:[0]},i:{x:[.67],y:[1]}},{t:30,s:[100],e:[40],o:{x:[.33],y:[0]},i:{x:[.67],y:[1]}},{t:60,s:[40]}]},r:{a:0,k:0},p:{a:0,k:[100,100,0]},a:{a:0,k:[0,0,0]},s:{a:0,k:[100,100,100]}},ao:0,shapes:[{ty:'el',d:1,s:{a:0,k:[100,100]},p:{a:0,k:[0,0]},nm:'Ellipse'},{ty:'fl',c:{a:0,k:[.03,.3,.55,1]},o:{a:0,k:100},r:1,nm:'Fill'}],ip:0,op:60,st:0,bm:0}]};
const animation=lottie.loadAnimation({container:document.querySelector('#motion'),renderer:'svg',loop:true,autoplay:false,animationData:data});
let playing=false;
function update(){button.textContent=playing?'توقف حرکت':'پخش حرکت';button.disabled=preference.matches;status.textContent=preference.matches?'حالت کاهش حرکت: نمایش ثابت.':playing?'حرکت تزئینی در حال پخش است.':'حرکت متوقف است.';}
function stop(){animation.pause();playing=false;update();}
animation.addEventListener('DOMLoaded',()=>{animation.goToAndStop(30,true);update();});
button.addEventListener('click',()=>{if(preference.matches)return;if(playing)animation.pause();else animation.play();playing=!playing;update();});
preference.addEventListener('change',()=>{stop();if(preference.matches)animation.goToAndStop(30,true);});
document.addEventListener('visibilitychange',()=>{if(document.hidden)stop();});
window.addEventListener('pagehide',()=>animation.destroy(),{once:true});
}
</script></html>
داده نمونه یک shape ساده دارد و keyframeهای opacity آن تغییر می‌کنند. حرکت، وضعیت یک عملیات واقعی را نشان نمی‌دهد و همین نکته در متن صفحه آمده است. در حالت reduced motion، دکمه پخش غیرفعال و فریم ثابت نمایش داده می‌شود. هنگام پنهان شدن صفحه، پخش متوقف می‌شود و ادامه آن نیاز به انتخاب کاربر دارد. در محصول دارای چند player، هر instance باید چرخه عمر مشخص داشته باشد؛ کنترل همه انیمیشن‌ها با یک فرمان عمومی می‌تواند بخش‌های نامرتبط را هم تغییر دهد.
بارگذاری و خطا را طراحی کنید
اگر داده از URL جداگانه می‌آید، نبود فایل، پاسخ خطا یا قطع شبکه را در نظر بگیرید. جای انیمیشن باید از ابتدا ابعاد معقول داشته باشد تا دریافت آن چیدمان را جابه‌جا نکند. برای محتوای ضروری، پیام یا نمایش ثابت جایگزین لازم است. پنهان کردن کل توضیح تا رسیدن فایل انیمیشن، وابستگی غیرضروری ایجاد می‌کند. مسیرهای منابع را نیز از محل واقعی استقرار بررسی کنید؛ فایلی که در ابزار طراح پخش می‌شود ممکن است به مسیر محلی وابسته باشد.
در رابط‌های مؤلفه‌ای، ساخت و حذف player باید همراه ورود و خروج مؤلفه باشد. نگه داشتن instance پس از حذف ظرف، مصرف و رویدادهای بی‌استفاده ایجاد می‌کند. پاک‌سازی listenerها و destroy کردن instance بخشی از قرارداد پیاده‌سازی است. اگر یک داده میان چند instance استفاده می‌شود، رفتار تغییر داخلی آن را از مستندات player بررسی کنید. برای راه‌حل‌های ساده‌تر حرکت در وب، راهنمای Web Animations API امکان مقایسه دیگری می‌دهد.
بازبینی و نگهداری نسخه‌ها
تأیید خروجی باید با player و محیط مقصد انجام شود، نه فقط با ویدئوی مرجع. شکل‌ها، زمان‌بندی، منابع، نقطه پایان و رفتار توقف را در قرارداد تحویل بنویسید. اگر فایل تغییر کرد، همان نسخه‌ای که تأیید شده باید به محصول برسد. نام نسخه و منبع طراحی کمک می‌کند تفاوت‌ها قابل پیگیری باشند. اصلاح دستی JSON بدون نگه داشتن ارتباط با پروژه اصلی می‌تواند باعث شود خروجی بعدی تغییر را از بین ببرد.
برای انتخاب نهایی، Lottie را کنار گزینه‌های دیگر قرار دهید. انیمیشن برداری با جزئیات کنترل‌شده ممکن است با آن خوب تحویل شود؛ حرکت ساده رابط می‌تواند با CSS کم‌هزینه‌تر باشد؛ محتوای فیلمی ممکن است به ویدئو نیاز داشته باشد. هیچ‌کدام عنوان «بهترین برای همه» ندارند. خروجی مناسب، معنای روشن، پخش قابل کنترل و وابستگی‌های معلوم دارد. اگر حذف انیمیشن هنوز اجازه فهم و استفاده از محصول را می‌دهد، طراحی پایه معمولاً قرارداد سالم‌تری پیدا کرده است.
هنوز دیدگاهی ثبت نشده
اولین نفری باشید که نظر می‌دهد!