Коришћење методе Аниматед.спринг() за динамичке анимације у Реацт Нативе-у

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

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

Шта су динамичке анимације?

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

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

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

Аниматед.спринг() метода коју АПИ пружа може анимирати Реацт Нативе објекте, стварајући динамички ефекат.

Контролисање анимације

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

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

На пример:

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

Обратите пажњу на то како можете да користите подешена вредност() метод за ресетовање вредности позиције у почетно стање 0.

Још један метод који вам је доступан је ресетовати(), који враћа анимацију у почетно стање. Овај метод је користан када је потребно да поново покренете анимацију.

Реал-Ворлд Апплицатионс

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

Прво, креирајте променљиву стања да бисте пратили позицију лопте:

увоз Реагујте, { усеСтате } из'реаговати';
увоз { Анимирани } из'реацт-нативе';
конст Апп = () => {
конст [позиција, сетПоситион] = усеСтате(Нова Анимирани. вредност(0));

повратак (
преобразити: [{ транслатеИ: позиција }] }}>
 {/* Компонента лопте овде */}
 </Animated.View>
 );
};

Користите Анимирани. Валуе за креирање променљиве стања под називом положај који ће пратити вертикални положај лопте. Замотајте Поглед компонента у Анимирани. Поглед тако да можете применити анимације на њега.

Затим креирајте функцију анимације која ће учинити да лопта падне и одскочи:

конст стартАниматион = () => {
 Аниматед.спринг (позиција, {
 на вредност: 300,
 трење: 1,
 напетост: 10,
 усеНативеДривер: истина,
 }).почетак(() => {
 Аниматед.спринг (позиција, {
 на вредност: 0,
 трење: 1,
 напетост: 10,
 усеНативеДривер: истина,
 }).почетак();
 });
};

Користите Аниматед.спринг() да направите анимацију која ће померити лопту са почетне позиције од 0 до коначне позиције од 300. Спецификовати трење и напетост вредности за контролу ефекта одбијања лопте током подешавања усеНативеДривер до истина за побољшање перформанси.

Затим можете да примените код да бисте покренули анимацију када корисник ступи у интеракцију са лоптом:

повратак (

преобразити: [{ транслатеИ: позиција }] }}>
 {/* Компонента лопте овде */}
 </Animated.View>
 </TouchableWithoutFeedback>
);

Овај код обавија Анимирани. Поглед компонента у ТоуцхаблеВитхоутФеедбацк тако да се анимација покреће када корисник притисне лопту. Такође можете покренути анимацију када се компонента монтира тако што ћете позвати стартАниматион() функција унутар Реацт-а усеЕффецт() кука.

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

Динамичке анимације у Реацт Нативе-у

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

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

Комбиновањем Аниматед.спринг() са другим функцијама анимације, као што су Аниматед.тиминг() или Аниматед.секуенце(), можете креирати сложене и беспрекорне анимације које побољшавају корисничко искуство.