Почетак рада са анимацијама у Реацт Нативе-у

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

Истражите Реацт Нативе анимације и сазнајте како можете почети да креирате прелепе, глатке анимације.

Како функционишу основне изворне анимације?

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

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

Можете анимирати Реацт Нативе објекат једноставним променом положаја жељене компоненте.

На пример:

увоз Реагујте, { усеСтате, усеЕффецт } 

instagram viewer

из'реаговати';
увоз { Виев, СтилеСхеет } из'реацт-нативе';
конст Апп = () => {
// Иницијализација стања за праћење позиције кутије
конст [бокПоситион, сетБокПоситион] = усеСтате(0);
// Користите усеЕффецт куку да ажурирате позицију кутије сваке 1 секунде
 усеЕффецт(() => {
конст интервал = сетИнтервал(() => {
// Ажурирајте позицију кутије додавањем 10 тренутној позицији
 сетБокПоситион(превПоситион => превПоситион + 10);
 }, 1000);
// Враћа функцију чишћења за брисање интервала када компонента
// унмоунтс
повратак() => цлеарИнтервал (интервал);
 }, []);
// Подесите позицију оквира користећи променљиву стања у инлине стилу
конст бокСтиле = {
 преобразити: [{ транслатеИ: бокПоситион }]
 };
повратак (


 </View>
 );
};
конст стилес = СтилеСхеет.цреате({
 контејнер: {
 флек: 1,
 алигнИтемс: 'центар',
 јустифиЦонтент: 'центар',
 },
 кутија: {
 ширина: 100,
 висина: 100,
 боја позадине: 'Плави',
 },
});
извозУобичајено Апликација;

Овај код приказује плави оквир који се сваке секунде помера надоле. Анимација функционише коришћењем усеЕффецт кука за креирање тајмера који ажурира бокПоситион променљива стања сваке 1 секунде.

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

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

Реацт Нативе Аниматед АПИ

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

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

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

Да бисте почели да користите Аниматед у свом Реацт Нативе пројекту, морате да увезете Анимирани модул из 'реаговати-нативе' у ваш код:

увоз { Анимирани } из'реацт-нативе';

Са увезеним Аниматед, можете почети да креирате анимације. Да бисте то урадили, прво креирајте анимирану вредност којом ћете манипулисати током анимације:

конст аниматедВалуе = Нова Анимирани. вредност(0);

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

Анимирана вредност је слична вредности стања у Реацт компоненти.

Можете иницијализовати ан Анимирани. Валуе са почетном вредношћу стања компоненте, а затим је ажурирати током времена користећи сетСтате методом.

На пример, имате компоненту која има вредност стања цоунт, што представља колико је пута корисник кликнуо на то дугме.

Можете креирати Анимирани. Валуе и иницијализујте га почетном вредношћу стања рачунати:

конст Апп = () => {
конст [цоунт, сетЦоунт] = усеСтате(0);
конст аниматедВалуе = Нова Анимирани. Вредност (број);
};

Затим, кад год се цоунт стање ажурирања вредности, можете ажурирати аниматедВалуе такође:

конст хандлебуттонЦлицк = () => {
 сетЦоунтер (број + 1);
 Аниматед.тиминг (аниматедВалуе, {
 тоВалуе: цоунт + 1,
 трајање: 500,
 усеНативеДривер: истина
 }).почетак();
};

Овај пример се ажурира аниматедВалуе помоћу Аниматед.тиминг() метод кад год корисник кликне на дугме. Тхе аниматедВалуе покреће анимацију и мења вредност за 500 милисекунди.

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

Сада разумете како да манипулишете анимираном вредношћу, онда можете да наставите да интерполирате анимирану вредност и мапирате је у својство стила ваше компоненте користећи Аниматед.интерполате() методом.

На пример:

конст непрозирност = аниматедВалуе.интерполате({
 инпутРанге: [0, 1],
 оутпутРанге: [0, 1]
});
повратак (

 {/* садржај ваше компоненте */}
 </View>
);

Ово ће створити анимацију која постепено бледи у Поглед компоненту како се анимирана вредност мења са 0 на 1.

Разумевање типова анимација

Разумевање типова анимација и начина на који они функционишу је важно за креирање добрих анимација.

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

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

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

Разумевање предности и ограничења различитих типова анимације може вам помоћи да одаберете прави приступ за ваш случај употребе.

Опустите се уз Реацт изворне анимације

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

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