Како направити боље реаговане изворне анимације

Мобилне апликације често користе анимацију да оживе корисничко искуство. Али стварање висококвалитетних анимација може бити изазов.

На срећу, постоје концепти и технике које можете користити да побољшате своје вештине анимације. Затим их можете применити да бисте креирали боље, глаткије анимације за своју следећу Реацт Нативе мобилну апликацију.

Реацт Нативе Аниматионс

Тхе Реацт Нативе Аниматед библиотека је најпопуларнији начин за креирање анимација у апликацији Реацт Нативе.

Баш као Реацт-ова уграђена библиотека анимација, Анимирани АПИ је део Анимиране библиотеке засноване на ЈаваСцрипт-у. Аниматед пружа скуп класа и метода које вам омогућавају да креирате глатке и флуидне анимације. Постоји неколико других одличних опција за креирање Реацт Нативе анимација, као што је Реаниматед.

Међутим, стварање добрих анимација у Реацт Нативе-у није само коришћење праве библиотеке или постављање правих својстава. Такође се ради о разумевању принципа анимације и како их применити у контексту развоја мобилних апликација. Дакле, ево неколико кључних принципа које треба разумети и забележити када правите своје анимације.

Подешавање трајања анимације

Анимације треба да буду глатке и природне за корисника. Постизање овога може зависити од тога како се носите са трајањем за одређене анимације које креирате.

Трајање се односи на количину времена потребног да се анимација у потпуности покрене. Подразумевано, анимације у Реацт Нативе-у трају 500 милисекунди, али можете их подесити да иду брже или спорије.

Требало би да подесите трајање анимације према њеној сложености. Једноставној анимацији, као што је бледење, може бити потребно само кратко трајање, док сложенија анимација, као што је клизање са ефектом одбијања, можда треба да траје дуже, да би се осећала природно и глатко.

Са Аниматион.тиминг() методом, можете креирати прилагођену темпирану анимацију која одговара вашим потребама.

Ево примера како додати прилагођено трајање једноставној анимацији која се смањује:

увоз Реагујте, { усеРеф } из'реаговати';
увоз { Анимирани, Погледај } из'реацт-нативе';
конст ФадеИнВиев = (реквизити) => {
конст фадеАним = усеРеф(Нова Анимирани. вредност(0)).Тренутни; 
 Реацт.усеЕффецт(() => {
 Аниматед.тиминг(
 фадеАним,
 {
 на вредност: 1,
 трајање: 2000, // подесите прилагођено трајање
 усеНативеДривер: истина,
 }
 ).почетак();
 }, [фадеАним]);
повратак (
 стиле={{
 ...пропс.стиле,
 непрозирност: фадеАним,
 }}
 >
 {пропс.цхилдрен}
 </Animated.View>
 );
}
извозУобичајенофункцијаАпликација() {
повратак (
флек: 1, алигнИтемс: 'центар', јустифиЦонтент: 'центар'}}>
ширина: 250, висина: 50, боја позадине: 'Плави пудер'}}>
фонтСизе: 28, Поравнање текста: 'центар', маргина: 10}}>Фадинг ин</Text>
 </FadeInView>
 </View>
 );
}

Када бирате трајање своје анимације, важно је да постигнете праву равнотежу између брзине и глаткоће.

Покушајте да почнете са дужим трајањем када први пут експериментишете. Дуже трајање ће вам дати више времена да прилагодите функцију ублажавања и прецизирате своју анимацију. Увек можете скратити трајање касније када будете задовољни укупним ефектом.

Користите функције ублажавања

Једноставне анимације могу имати константну брзину, али варирање брзине може створити природније ефекте. Функције ублажавања контролишу брзину промене анимације током времена. Они могу учинити да ваше анимације почну полако, а затим да се убрзају. Подешавање различитих брзина како анимација напредује може створити глатку и привлачну анимацију.

Узмите овај пример коришћења функције ублажавања:

увоз Реагујте, { усеРеф } из'реаговати';
увоз { Анимирани, Погледај } из'реацт-нативе';
конст ФадеИнВиев = (реквизити) => {
конст фадеАним = усеРеф(Нова Анимирани. вредност(0)).Тренутни; 
 Реацт.усеЕффецт(() => {
 Аниматед.тиминг(
 фадеАним,
 {
 на вредност: 1,
 трајање: 2000,
 ублажавање: Аниматед.еасеОут, // овде користи функцију ублажавања
 усеНативеДривер: истина,
 }
 ).почетак();
 }, [фадеАним]);
повратак (
 стиле={{
 ...пропс.стиле,
 непрозирност: фадеАним,
 }}
 >
 {пропс.цхилдрен}
 </Animated.View>
 );
}
извозУобичајенофункцијаАпликација() {
повратак (
флек: 1, алигнИтемс: 'центар', јустифиЦонтент: 'центар'}}>
ширина: 250, висина: 50, боја позадине: 'Плави пудер'}}>
фонтСизе: 28, Поравнање текста: 'центар', маргина: 10}}>Фаде Ин</Text>
 </FadeInView>
 </View>
 );
}

Овај код користи Аниматед.еасеОут функција за контролу брзине промене непрозирности анимираног Поглед. Тхе Аниматед.тиминг() метода ће користити функцију еасе-оут да постепено мења непрозирност од 0 до 1 у трајању од две секунде, како би изгледало да се анимација успорава када дође до краја.

Можете да користите различите типове функција за ублажавање да би ваше анимације изгледале глаткије, укључујући укључивање, ублажавање и укидање.

Одабир праве функције ублажавања може направити велику разлику у перципираном квалитету анимација ваше апликације. Вреди одвојити мало времена да се поиграте са њима и видите шта најбоље функционише за ваше специфичне случајеве употребе.

Кључни кадрови помажу са сложеним анимацијама

Кључни кадрови су маркери који вам омогућавају да прецизно одредите тренутке у анимацији у којима желите да промените својства као што су позиција, размера или ротација. То је као означавање тачака у времену за вођење анимације.

Можете користити сет од кључне кадрове за постављање специфичних вредности за било које својство желите да анимирате. Ово вам помаже да контролишете тајминг и понашање, посебно за сложене анимације попут оних које укључују кретање ликова.

Да бисте креирали основну анимацију кључног кадра, мораћете да наведете кључне кадрове између којих желите да анимирате и укупно трајање.

На пример, рецимо да желите да анимирате квадрат са почетне позиције (0, 0) до крајње позиције (100, 100) у периоду од једне секунде.

Можете креирати низ кључних кадрова овако:

конст кључни кадрови = [
 { Икс: 0, и: 0 },
 { Икс: 50, и: 50 },
 { Икс: 100, и: 100 },
];

У овом случају, постоје три кључна кадра: један на почетку анимације, један у средини и један на крају. Затим можете проследити овај низ кључних кадрова у своју библиотеку анимација, заједно са трајањем од 1000 милисекунди, да бисте креирали глатку анимацију између кључних кадрова.

У неким библиотекама, такође ћете морати да наведете функцију ублажавања да бисте контролисали како анимација напредује. Међутим, основну идеју специфицирања кључних кадрова и трајања можете применити на већину библиотека анимација.

Искористите предности уређаја са хардверским убрзањем

Хардверско убрзање може бити моћан алат за оптимизацију перформанси ваших Реацт Нативе анимација. Коришћењем графичког хардвера уређаја, можете да скинете део посла обраде са ЦПУ-а и, заузврат, постигнете глаткије анимације са бољим одзивом.

ГПУ уређаја ће тада изворно обрадити анимиране вредности и стилове, уместо да то мора да уради ЈаваСцрипт нит.

Хардверско убрзање можда није доступно на свим уређајима, па је важно да тестирате своје анимације на различитим стварним уређајима како бисте осигурали најбоље перформансе.