LottieFiles създаде бърз, мащабируем, редактируем след изобразяване тип файл и е лесно за вас да се включите и да създадете анимации в този формат. Използвайки Adobe After Effects и някои плъгини, можете да бъдете част от най-новия рекламен тип файл: Lottie.
Какво е Лоти?
Lottie или dotLottie е тип файл, който грабва уеб разработчиците. Може да сте направили анимации, които да включите във вашите дизайни, независимо дали са за социални медии, уеб дизайн или UX и UI дизайн. И вероятно запазвате вашите анимации като GIF, SVG или PNG файлове. Файлът Lottie е всички добри части от тези типове файлове, но по-малък, по-бърз и по-лесен за редактиране след изобразяване.
LottieFiles е огромна база данни от предварително направени анимации, запазени във формати Lottie или JSON. Тези анимации се изобразяват в реално време, което позволява по-бързо изпращане във вашите дизайни. Няма чакане за изтегляне на тези файлове; те ще се появят веднага щом страницата се отвори.
За да научите повече за LottieFiles, вижте нашия въведение в Lottie.
Приготвяме се да започнем
Ще създадем Lottie с помощта на Adobe After Effects, но има и друг софтуер, който можете да използвате, за да създадете своята анимация на Lottie. Можете да използвате Adobe Animate с плъгина LottieFiles, за да създадете Lottie. Можете също да конвертирате анимация във формат SVG в Lottie, ако вече сте направили анимация в този формат.
After Effects е нашият най-добър избор, като се има предвид, че LottieFiles е създаден първоначално за използване в After Effects. Да започваме.
1. Създайте своята анимация
Анимационният аспект на вашата Lottie е същият като при всеки друг формат. Създадохме илюстрацията на нашата анимация с помощта на Adobe Illustrator. Това поддържа слоевете отделни и готови за импортиране в After Effects. След като вашата илюстрация бъде импортирана, можете да адаптирате слоевете на вашата композиция за крайната анимация.
Лоти анимациите се изпълняват в непрекъснат цикъл, така че помислете за това за крайните и началните точки на вашия дизайн. Анимацията трябва да е проста и дълга около три секунди.
2. Изтеглете плъгините
Има два плъгина, които можете да използвате, за да създадете файл на Lottie: плъгинът LottieFiles или плъгинът Bodymovin. И двете са налични за After Effects, но плъгинът LottieFiles може да се намери и в друг софтуер. Всеки от тях прави малко различни неща, но в момента ще се съсредоточим върху приставката LottieFiles.
За да изтеглите приставката LottieFiles, отидете на Страница с плъгин LottieFiles After Effects. Ще намерите две опции за изтегляне.
Опцията вдясно изисква Мениджър на разширения от Анастасий който работи както с Mac, така и с Windows. След като изтеглите Extension Manager, изтеглете приставката ZXP от страницата LottieFiles.
След като приставката ZXP бъде изтеглена, отворете Anastasiy Extension Manager, щракнете After Effects, изберете приставката LottieFiles от списъка и натиснете Инсталирай.
Обратно на страницата на приставката LottieFiles, изтеглете и приставката Adobe Exchange; отворете настолното си приложение Creative Cloud и инсталирайте приставката. Върнете се към завършеното анимация в After Effects.
Някои хора имат грешка в разрешението, когато използват тези плъгини. За да избегнете този проблем, отидете на After Effects > Предпочитания > Скриптове и изрази > Скриптове на приложения и поставете отметка в квадратчето за Разрешаване на скриптове за запис на файлове и достъп до мрежата.
След като това стане, изскачащият прозорец за LottieFiles ще ви помоли да влезете. Ако все още нямате акаунт в LottieFiles, сега е моментът да създадете такъв.
3. Експортирайте вашата Lotti
С инсталираните плъгини LottieFiles можете да изобразите вашата анимация на Lottie. Докато сте върху готовата анимационна композиция, щракнете Прозорец > Разширения > LottieFiles. Това ще изведе изскачащ прозорец с имената на вашите композиции. Щракнете върху зелена стрела до името на вашата композиция, това ще изведе прозореца за изобразяване на Lottie.
След няколко секунди вашата анимация ще се появи в изскачащия прозорец. Анимацията ще се възпроизвежда в реално време в цикъл. Тук можете да изберете да запазите вашата анимация или да качите анимацията си в библиотеката на LottieFiles.
Щракване Запази като ще ви даде две опции за експортиране: Lottie JSON (*.json) или dotLottie (*.lottie). Файлът dotLottie е компресиран файл, който включва метаданни, които всъщност не са ни необходими за експортиране. Отидохме с Lottie JSON.
Експортираният ви файл ще бъде текстов файл, а не файл с визуална анимация; така работят JSON файловете. Но какво ще стане, ако искате анимацията да е готова? Нека видим как можете да получите достъп до него.
Как можете да използвате вашата Lottie Animation
За да качите вашата Lottie в библиотеката на LottieFiles, щракнете Качване. Това ще се изобрази за няколко секунди. След това щракнете върху бутона с глобус върху него. Това отваря уебсайта на LottieFiles, където можете да изпратите вашата анимация на Lottie в библиотеката на LottieFiles. Дайте име на вашия файл и натиснете Не пипай.
След като вашата анимация бъде одобрена в библиотеката LottieFiles, можете да използвате приставката LottieFiles в софтуер като Adobe XD, Figma или Sketch, за да изпратите вашата анимация към вашия дизайн.
Има и други начини да използвате вашата анимация на LottieFiles освен директно в библиотеката на плъгини. Можете допълнително да редактирате вашата Lottie анимация от прозореца на браузъра. Той предлага панел с основни слоеве; можете да промените цвета на фона, скоростта на възпроизвеждане, честотата на кадрите и още няколко неща.
От прозореца Handoff можете да изтеглите вашата анимация като a JSON файл за внедряване в уеб разработката и дизайн, или можете да го конвертирате в GIF за по-конвенционална употреба. Можете също да вградите своята анимация с HTML код за вграждане, а има и опции за iOS и Android, така че можете да изпратите анимацията във вашия уеб дизайн.
Вграждането на Lottie HTML ви позволява да редактирате кода, за да редактирате вашата анимация. Можете да промените цветовете и размерите направо в кода, когато го добавите към вашия уебсайт.
Изтеглянето на приложението LottieFiles на вашия телефон ви позволява да сканирате QR кода на анимацията, за да визуализирате анимацията в приложението. Можете също да използвате клавиатурата на LottieFiles и да пуснете вашата точка Lottie като коментар в определени публикации.
Създайте лоти в After Effects
Въпреки че все още може да изглежда като нетрадиционен тип файл, тъй като не можете просто да качите анимацията си направо в социалните медии като можете с GIF или PNG, Lottie идва с много предимства за уеб разработчиците и дизайнерите, които използват плъгини или вграждат кодове в своите дизайни.
Файловете Lottie и JSON спестяват място и време за зареждане и запазват качеството в сравнение с традиционните типове файлове. LottieFiles постоянно създава нови начини за изпълнение на дизайна, възможностите са безкрайни.
Създаването на анимация на движение в Procreate е лесно и тази статия ще ви покаже как да го направите.
Прочетете Следващото
- Творчески
- Компютърна анимация
- Adobe
- Преобразуване на файлове
Ruby е писател в категорията Creative на MUO, като се фокусира върху писането за софтуер за дизайн. След като работи като дизайнер, илюстратор и фотограф, Руби също има бакалавърска степен по графична комуникация и магистърска степен по английски език с творческо писане.
Абонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, ревюта, безплатни електронни книги и ексклузивни оферти!
Щракнете тук, за да се абонирате