Инструменти И Уроци

Как да създадете персонализирани зареждащи анимации, за да намалите скоростта на отпадане

Първоначално известна като пулсиране, анимацията за зареждане се използва, за да покаже напредъка на събирането на данни или изобразяването на интерфейса. Макар че веднъж можете да се възползвате, като използвате тъпа лента за напредък, за да посочите това, тези дни са изчезнали.

Днес добре изработената анимация, използваща CSS, jQuery или прости анимирани GIF файлове, е възможност да оживите вашите интерфейси и да добавите индивидуалност към вашия продукт.

Замислените анимации могат да забавляват вашите потребители, докато чакат съдържанието ви да се зареди. Добрата анимация при зареждане помага за управление на очакванията и подобрява потребителското изживяване, като поддържа интерес.

В този урок ще използваме Скица, за да създадем основни фигури и Принцип за бързо създаване на прости персонализирани анимации за зареждане. (И двете приложения са за Mac.) Ще научите как да създавате цветни анимации за зареждане, използвани от Trello, Flickr, Slack и др.

Нека да стигнем до него.

Слаба зареждаща анимация

На скица проследете четири заоблени квадрата със страни 50px или радиус 100px всеки. Те трябва да изглеждат като перфектни кръгове, но ние използваме квадрати със заоблени ъгли, за да създадем ефект на разтягане на линията в анимацията.

Поставете четирите фигури по такъв начин, че да създадете въображаем квадрат с 150px пространство между всяка страна. Нанесете четири различни цвята (# 35BA90 зелен, # 69CADD син, # EBA900 жълт и # E20661 розов).

Импортирайте фигурите в Принцип, групирайте ги и кликнете върху „Създаване на компонент“, за да вложите групата.

Влезте в вложената група и завъртете монтажната дъска с 15 градуса. След това изберете всеки отделен кръг и го завъртете обратно в първоначалното му положение (назад 15 градуса). Това създава ефект на разтягане в права линия.

Приложете задействане „Автоматично“ към монтажната плоча и след това разтегнете всеки заоблен правоъгълник към противоположната страна на монтажната плоча с дължина 295px. Придайте 75% непрозрачност на всяка фигура и на двете монтажни плоскости.

Приложете друг спусък „Auto“ към втория монтаж. На новия монтаж, намалете всеки ред до първоначалната му ширина 50px, но на противоположната страна от първоначалното му положение.

Свържете последния монтаж с първото с тригер „Auto“. Щракнете върху бутона „Назад към родителя“, за да визуализирате крайния резултат.

Съвет: Когато отидете „Назад към родителя“, можете да завъртите основната група с -30 градуса, за да приличате повече на Slack. Също така, можете да промените темпото на анимация в панела „Animate“ и да приложите ефект „Ease Both“, за да изгладите преходите.

Trello Зареждане на анимация

С помощта на Скица проследете синия квадрат със 100 пиксела. Начертайте бял правоъгълник 60px широк на 140px висок. Подравнете го с горния ляв ъгъл на предишния квадрат с 30px горно и ляво поле. Дублирайте този бял правоъгълник, подравнете го вдясно от квадрата с 30px десен поле и намалете височината му до 70px.

Импортирайте монтажната дъска в Principle и приложете спусъка „Auto“, за да създадете нов ключов кадър. На новата художествена дъска обърнете височината на белите правоъгълници (направете левия правоъгълник висок 70px, а десния правоъгълник 140px). Приложете ефект 'Ease-Both' в панела 'Animate', за да изгладите прехода.

Подвижен кръг

Проследете кръг на скица. Приложете 10px граница със стойности „Dash“ и „Gap“ и без запълване. Използвайте цвят „ъглов градиент“ за контура, който ще подчертае ефекта на въртене, който ще създадете по-късно.

Отворете нов Principle файл и използвайте бутона “Import”, за да прехвърлите кръга от Sketch. Приложете два тригера „Автоматично“ подред.

За да създадете ефект на въртене, изберете кръга в средната художествена дъска и променете стойността му „Ъгъл“ на 360 градуса. След това изберете третия кръг и му дайте различно име (т.е. „копиране“) в левия панел. Това ще фалшифицира безкрайното въртене.

И накрая, свържете обратно третия монтаж с първоначалния с друг спусък „Auto“. Приложете „Линеен“ преход към времевата линия между артбордове 1 и 2. Проверете анимацията, която току-що сте създали, в прозореца за визуализация.

Flickr Зареждане на анимация

Проследете син кръг и розов кръг един до друг. Импортирайте ги в Принцип и приложете спусъка „Auto“, за да създадете нов монтаж.

Обърнете позициите на кръговете и приложете нов спусък „Автоматично“, за да създадете трета табла. На този нов монтаж, обърнете реда на слоя на кръговете в левия панел.

Приложете трети спусък „Автоматично“, за да създадете четвърти монтажни плочи. На този последен монтаж, обърнете позицията на кръговете още веднъж и приложете последния задействащ „Auto“ от последния монтаж към предния.

Тип зареждане

Създайте нов проект на Principle и с помощта на инструмента Text напишете „LOADING“. Подравнете текста вляво и го центрирайте вертикално в монтажната област.

Приложете задействане „Auto“ пет пъти подред. Вземете петия спусък от последния цикъл на монтажната област обратно към първоначалния монтаж.

как да бъдеш добър в кражбата

Започвайки от първоначалния монтаж и надясно, редактирайте текста на всеки монтаж, за да добавите нула, една, две, три, две и една точка, съответно, до оригиналния текст „Зареждане“. Напредъкът на монтажните дъски трябва да изглежда по следния начин:

НАТОВАРВАНЕ НАТОВАРВАНЕ. ТОВАР .. ТОВАР ... ТОВАР ... ТОВАР.

Сега можете да визуализирате току-що създадената анимация.

Пулсиращи точки

Проследете точка 60px. Копирайте и поставете още една точка и я поставете на 60px вдясно. Уверете се, че и двете точки, включително 60px празнина, са идеално центрирани в монтажната ви плоча.

Приложете тригер „Автоматично“ четири пъти подред.

На второто монтажно поле намалете втората точка до 30 пиксела.

На третия артборд намалете втората точка до 0px, а първата - до 30px.

На четвъртия артборд намалете втората точка обратно до 30px и намалете първата точка до 0px.

На петото монтажно поле намалете първата точка до 30px и свържете монтажната дъска обратно към първата дъска с тригер „Auto“.

Подвижни точки

Поставете пет точки в подреждането, което бихте намерили на шестоъгълна матрица. Импортирайте монтажната дъска в Principle и я центрирайте.

Приложете задействане „Auto“ върху монтажната плоча.

На новия артборд завъртете групата точки на 360 градуса.

Свържете второто монтажно поле обратно към първото с тригер „Auto“.

Пулсиращ кръг

Започнете с 50px кръг, подравнен към центъра в рамките на 150px кръг, който има 5px граница, но няма запълване.

Прилагайте тригер „Автоматично“ три пъти подред.

На първото монтажно поле намалете линейния кръг до 50px, а вътрешния кръг - до 10px.

На третия монтаж, мащабирайте кръга на линията до 200px и му придайте 0% непрозрачност. Мащабирайте вътрешния кръг до 150px и му придайте 50% непрозрачност.

На последното монтажно поле увеличете вътрешния кръг до 200px и му придайте 0% непрозрачност. Мащабирайте кръга на линията до 50px и му придайте 25% непрозрачност.

Приложете задействане „Auto“ към последния монтаж. Намалете вътрешния кръг до 10px с 50% непрозрачност.

шест закона на организацията на възприятието

Свържете последния монтаж с първото с тригер „Auto“.

Скачащи точки

Подредете три идеални кръга с височина 50px с разстояние 50px между тях.

Приложете тригер „Auto“. На втория монтаж, преместете първия кръг нагоре с 50 пиксела.

Приложете тригер „Auto“ към втората дъска. На третия монтаж, изберете първите два кръга и ги преместете с 50 пиксела нагоре. Трите кръга трябва да лежат в диагонална линия.

Приложете тригер „Auto“ към третата дъска. На четвъртия артборд преместете първия кръг надолу с 50 пиксела. Изберете последните два кръга и ги преместете нагоре 50px.

Приложете тригер „Auto“ на четвъртата дъска. На петия артборд преместете първите два кръга с 50 пиксела надолу. Изберете последния кръг и го преместете нагоре 50px.

Приложете тригер „Auto“ върху петата дъска. На шестото монтажно поле преместете последните два кръга надолу с 50 пиксела.

И накрая, върнете се към първото монтажно поле, преместете първата точка с 50 пиксела нагоре и свържете последното монтажно поле с първото с тригер „Auto“. Можете да прегледате крайния резултат.

Класически товарач

Проследете кръг в Скица и му дайте 20px сива граница без запълване.

Поставете копие от същия кръг върху него и променете запълването на копие в различен цвят. За този пример ще използваме синьо.

Проследете квадрат, припокриващ една четвърт от синия кръг. Преместете правоъгълния слой под кръговия слой и приложете “Mask” върху правоъгълния слой.

Преминете към Принцип и импортирайте произведението на скицата с бутона „Импортиране“.

Приложете задействане „Auto“ към първия монтаж и завъртете синия кръг на 360 градуса.

Приложете втори тригер „Auto“ към втория монтаж. Преименувайте генерирания слой от трети кръг в „copy“ и го свържете обратно към първия монтаж с „спусъка“ Auto.

Заключение

След като сте се упражнили да създавате няколко от тези изпитани анимации за зареждане, трябва да се чувствате уверени в способностите си да създадете уникална анимация за вашите собствени приложения, използвайки уменията, научени тук.

С малко въображение и удобните инструменти, намерени в Скица и Принцип, можете да създадете уникална анимация за зареждане, която съответства на дизайна на вашето приложение за броени минути. Потребителите ви ще оценят професионалния външен вид и приятелския индикатор, че приложението ви работи усилено.

• • •