ساخت انیمیشن وکتور (SVG و JSON) در After effects توسط کتابخانه Lottie

همان طور که در جدول زیر مشاهده می کنید، از سال ۲۰۱۴ میلادی تاکنون، استفاده از فایل های تصویری با فرمت SVG روند رو به رشدی داشته است.فایل های گرافیکی SVG یا Scalable Vector Graphics از نوع وکتور یا بُرداری هستند و کیفیت آنها با کوچک و بزرگ شدن ابعاد تصویر، تغییر نمی کند. فایل های گرافیکی SVG به تصاویر گرافیکی ثابت محدود نمی‌شوند بلکه تصاویر متحرک را نیز در بر می‌گیرند.لاتی (Lottie) یک فریم‌ورک برای انیمیشن‌های وکتور SVG در قالب JSON است و در حال حاضر بیش از هفتاد هزار شرکت از جمله آمازون، airbnb، والت دیزنی، و دولینگو از آن استفاده می‌‌کنند. صفحه اسپلش اپ، انیمیشن کاراکترها، و میکرو انیمیشن‌های UI در دولینگو توسط لاتی تهیه شده‌اند. به بیان ساده، همان‌طور که برای نمایش MP4 از QuickTime استفاده می‌شود، برای اجرای انیمیشن JSON هم از Lottie بهره می‌گیریم.فایل‌های لاتی در مقایسه با فایل‌های انیمیشن GIF و APNG هم‌رده، بسیار کم حجم هستند.ماهیت وکتور انیمیشن‌های لاتی، کیفیت و وضوح بسیار بالا، متناسب با ابعاد صفحه نمایش را فراهم می‌آورد.گردش کار تهیه انیمیشن‌های لاتی به این صورت است که ابتدا انیمیشن در نرم‌افزار After Effects تهیه می‌شود. سپس انیمیشن وکتور حاصله، از طریق Bodymovin که در درون Lottie قرار گرفته است به فایل JSON تبدیل می‌شود. در نهایت، پلتفرم Lottie فایل JSON را در اختیار پلتفرم‌های مختلف (Android و iOS و غیره) قرار می‌دهد.مثالدر اینجا می‌خواهیم که یک میکرو انیمیشن، شامل دو بخش زیر طراحی کنیم:الف. از ثانیه ۰ تا ثانیه ۲، دایره ترسیم شود.ب. از ثانیه ۲ تا ثانیه ۳، یک علامت تیک در وسط دایره ترسیم شود.ابتدا دایره را رسم می‌کنیم.دستور Trim Paths را روی دایره اعمال می‌کنیم. این دستور مشخص می‌کند که در چه زمانی چند درصد از دایره ترسیم شود. دسترسی به این دستور از طریق Add (آیکون مثلث) که در شکل نشان داده شده امکان پذیر است.اکنون باید زمان و درصد ترسیم را تعریف کنیم.شاخص مرورگر زمان (به صورت پیش‌فرض در پنجره پایین-راست صفحه قرار دارد) را روی ثانیه ۰ قرار می‌دهیم.برای تعریف زمان، آیکون ساعت (کرونومتر) کوچک کنار Trim Paths را فعال می‌کنیم.مقدار گزینه‌های Start و End (زیر Trim Paths) را روی ۰٪ قرار می‌دهیم.فریم کلیدی اول ما روی ثانیه ۰ ثبت شد با این محتوا: در ثانیه ۰، مقدار ۰ درصد از دایره رسم شود.حالا می‌خواهیم که طی ۲ ثانیه، دایره به طور ۱۰۰٪ ترسیم شود:آیکون ساعت (کرونومتر) کوچک کنار Trim Paths همچنان روشن است.مرورگر زمان را روی ثانیه ۲ می‌گذاریم.اکنون باید یک فریم کلیدی جدید ثبت کنیم. برای ثبت فریم جدید، بر روی آیکون لوزی کلیک می‌کنیم. این آیکون، در ابتدای همان ردیفی است که گزینه End در آن قرار گرفته است.مقدار End را روی ۱۰۰٪ می‌گذاریم که یعنی ترسیم دایره کامل شود.حالا اگر مرورگر زمان را جابه‌جا کنید می بینید که دایره محو یا تکمیل می‌شود.برای ترسیم تیک داخل دایره، مرورگر زمان را روی ثانیه ۲ بگذارید و مراحل بالا را یکبار دیگر این بار برای ترسیم تیک، در بازه‌ی زمانی ثانیه ۲ تا ثانیه ۳ تکرار کنید.زمانی که انیمیشن کامل شد، می‌توانید با کمک لاتی از آن خروجی JSON بگیرید.ابتدا پلاگین لاتی را بر روی افتر افکتس نصب کنید.سپس از طریق منوی window بخش extensions می‌توانید به Lottie دسترسی پیدا کنید. پلتفرم لاتی، امکان کانورت، بارگذاری و ویرایش فایل را برای شما فراهم می‌کند:https://lottiefiles.com/97641-loading-animation-iconدر نهایت، لاتی فایل زیر را در اختیار شما قرار می‌دهد:https://assets10.lottiefiles.com/packages/lf20_qmo9vzmq.jsonمحتوای فایل JSON که از این طریق به‌دست می‌آید، بر مبنای داده‌های عددی است که محتوایی بُرداری (وکتور) را مشابه فایل‌های SVG و به‌صورت متحرک در اختیار شما قرار می‌دهد. مثلا کل محتوای انیمیشن JSON که در بالا تولید کردید، به‌صورت زیر است:{"v":"5.5.8","fr":29.9700012207031,"ip":0,"op":89.0000036250443,"w":1920,"h":1080,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[852,552,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-20,8],[68,144],[260,-200]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":63,"s":[0]},{"t":90.0000036657751,"s":[0]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.266],"y":[1.016]},"o":{"x":[0.781],"y":[-0.008]},"t":63,"s":[0]},{"t":90.0000036657751,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false},{"ty":"st","c":{"a":0,"k":[0.091349478329,0.862745098039,0.091349478329,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":43,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[89.394,79.592],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[632,632],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.091349478329,0.862745098039,0.091349478329,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":43,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[108,-12],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.28],"y":[0.986]},"o":{"x":[0.68],"y":[0.013]},"t":0,"s":[0]},{"t":63.0000025660426,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":3,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":90.0000036657751,"st":0,"bm":0}],"markers":[{"tm":848.000034539748,"cm":"1","dr":0}]}همان‌طور که مشاهده می‌کنید، حجم فایل حاصل شده بسیار اندک است. این فایل در زمان اجرا، به‌صورت ریسپانسیو و متناسب با ابعاد دیوایس، رندر می‌شود. چون این انیمیشن به‌صورت وکتور است، بر روی نمایشگرهای مختلف از کیفیت و وضوح بسیار بالایی برخوردار است و متناسب با ابعاد و رزولوشن آنها در لحظه رندر می‌شود.قرار دادن فایل انیمیشن لاتی در وب یا اپ، ساده است. مثلا برای افزودن آن به وبسایت، در دو مرحله به‌صورت زیر عمل می‌کنیم:1. فراخوانی پلیر لاتی2. فراخوانی آدرس انیمیشن <script src=&quothttps://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js&quot><lottie-player src=&quothttps://assets9.lottiefiles.com/packages/lf20_qmo9vzmq.json&quot background=&quottransparent&quot speed=&quot1&quot style=&quotwidth: 300px; height: 300px;&quot loop controls autoplay></lottie-player>نکتهدر صورت استفاده از فایل‌های طراحی تهیه شده در نرم‌افزار ایلاستریتور و یا فایل‌های طراحی با فرمت‌های EPS یا SVG یا PDF در افترافکتس، باید ابتدا آنها را به shape layers تبدیل کرد، وگرنه در انیمیشن Lottie کار نمی‌کنند. پس از تبدیل، فایل‌های اولیه را حذف کنید تا وارد فایل JSON نهایی نشوند.مراحل:ایمپورت فایل ایلاستریتور به افتر افکتس> کلیک راست روی فایل ایمپرت شده. سپس:Create> Create shapes from vector layerاستفاده از Lottie برای ساخت استیکرهای Telegramدر محیط Lottie می‌توان انیمیشن‌های لاتی را به‌صورت فایل با فرمت TGS اکسپورت کرد و به عنوان استیکر‌متحرک در تلگرام استفاده نمود. فقط لازم است ابعاد فایل 512 در 512 پیکسل بوده و Frame rate آن دقیقا 30 یا 60 باشد. این پارامترها را می‌توان در زمان رندر تعریف کرد و یا همینجا در محیط لاتی ویرایش نمود.استفاده از فایل‌های Lottie در Figmaانیمیشن‌های Lottie را می‌توان به آسانی در پروژه‌های فیگما نیز استفاده نمود. نکته قابل توجه آنکه فایل‌های لاتی در فیگما، فقط به دو صورت قابل استفاده هستند: انیمیشن GIF و یا تصویر SVG.