Како да направите привлачне Реацт изворне апликације са анимацијама које покреће корисник

Анимације треба да се осећају као живе. Можете да креирате привлачно корисничко искуство за Реацт Нативе анимације тако што ћете их натерати да одговоре на интеракцију корисника. Ове интеракције могу бити директно од корисника или покренути индиректно одређеним променама.

Разумевање додирних догађаја и покрета у Реацт Нативе-у

Реацт Нативе елементи су способни да реагују на додир и покрете корисника. Реацт Нативе Гестуре Респондер може да открије ове додирне догађаје и покрете.

Гестуре Респондер опреми много компоненти унутар Реацт Нативе библиотеке са овом функцијом, као што је Дугме и ТоуцхаблеОпацити компоненте које реагују на притиске или додире.

Међутим, Гестуре Респондер опреми само једноставне компоненте једноставним покретима. За руковање и откривање сложенијих додирних догађаја, Реацт Нативе користи ПанРеспондер АПИ. Омогућава вам да креирате прилагођене препознаваоце покрета који реагују на сложеније интеракције додира, као што су штипање, ротирање или превлачење.

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

Покретање анимација са додирним догађајима

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

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

На пример, можете да користите Анимирани АПИ да анимирате непрозирност а ТоуцхаблеОпацити дугме када се притисне да би се створио ефекат фаде-ин:

увоз Реагујте, { усеСтате, усеРеф } из'реаговати';
увоз { Виев, ТоуцхаблеОпацити, Аниматед } из'реацт-нативе';
конст АниматедБуттон = () => {
// Користите усеРеф за приступ Аниматед. Инстанца вредности
конст опацитиВалуе = усеРеф(Нова Анимирани. вредност(1)).Тренутни;
конст хандлеПресс = () => {
 Аниматед.тиминг (опацитиВалуе, {
 на вредност: 0.5,
 трајање: 500,
 усеНативеДривер: истина,
 }).почетак();
 }
повратак (

непрозирност: опацитиВалуе }}>

 {/* Компонента вашег дугмета */}
 </TouchableOpacity>
 </Animated.View>
 </View>
 );
}
извозУобичајено АниматедБуттон;

У овом примеру, опацитиВалуе је пример Анимирани. Валуе који представља непрозирност дугмета. Када притиснете дугме, хандлеПрес функција се покреће, што покреће анимацију користећи Аниматед.тиминг() да анимирате непрозирност дугмета.

Покретање анимација са променама стања

Други приступ који можете предузети је да покренете анимације на основу одређених промена стања у вашој апликацији. Можете да користите Анимирани АПИ да покренете анимације као одговор на многе промене стања, као што је промена положаја, величине или садржаја компоненте.

На пример, можете користити усеСтате и усеЕффецт куке да покренете анимацију попут ове:

увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз { Приказ, анимирани, дугме, текст} из'реацт-нативе';
конст МиЦомпонент = () => {
конст [фадеАним, сетФадеАним] = усеСтате(Нова Анимирани. вредност(0));
конст [текст, сетТект] = усеСтате('Здраво Свете');
 усеЕффецт(() => {
// Користите усеЕффецт закачицу да покренете анимацију када стање 'тект'
// Промене
 стартАниматион();
 }, [текст]);
конст стартАниматион = () => {
 Аниматед.тиминг(
 фадеАним,
 {
 на вредност: 1,
 трајање: 1000,
 усеНативеДривер: истина,
 }
 ).почетак();
 };
повратак (

непрозирност: фадеАним }}>
{тект}</Text>
 </Animated.View>
"Промени текст" онПресс={() => сетТект('Нови текст')} />
 </View>
 );
};
извозУобичајено МиЦомпонент;

У овом примеру, усеЕффецт кука ће покренути анимацију кад год је вредност стања текст Промене. Тхе усеЕффецт хоок узима функцију повратног позива као свој први аргумент, коју ће покренути кад год се појаве зависности наведене у другом аргументу (у овом случају, [текст]) промена. Унутар усеЕффецт кука, стартАниматион() покреће и покреће анимацију бледења.

Динамичке анимације ће оживети вашу апликацију

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

Такође, коришћењем Аниматед АПИ-ја и управљањем стањима анимације помоћу кукица као што су усеСтате и усеЕффецт, можете лако да покренете анимације на основу промена у стању ваше апликације.