Како направити континуирану анимацију у Реацт Нативе користећи Аниматед.лооп()

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

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

Разумевање методе Аниматед.лооп().

Да бисте користили метод Аниматед.лооп(), прво морате да креирате Анимирани. Валуе објекат. Ова вредност се ажурира на сваком кадру петље анимације и користиће се за анимацију циљне компоненте.

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

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

Петљање ваше анимације

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

Следећи пример који показује како да користите Аниматион.лооп() за креирање анимације ротације у петљи:

увоз Реагујте, { усеСтате, усеЕффецт } из'реаговати';
увоз { СтилеСхеет, Приказ, Анимирани, Слика} из'реацт-нативе';
извозУобичајенофункцијаАпликација() {
конст [спинВалуе] = усеСтате(Нова Анимирани. вредност(0));
 усеЕффецт(() => {
конст спин = спинВалуе.интерполате({
 инпутРанге: [0, 1],
 оутпутРанге: ['0дег', '360 степени'],
 });
 Аниматед.лооп(
 Аниматед.тиминг(
 спинВалуе,
 {
 на вредност: 1,
 трајање: 2000,
 усеНативеДривер: истина,
 }
 )
 ).почетак();
 }, []);
повратак (

 стиле={{ ширина: 200, висина: 200, преобразити: [{ ротирати: спинВалуе }] }}
 извор={{ ури: ' https://reactjs.org/logo-og.png' }}
 />
 </View>
 );
}
конст стилес = СтилеСхеет.цреате({
 контејнер: {
 флек: 1,
 алигнИтемс: 'центар',
 јустифиЦонтент: 'центар',
 },
});

У овом примеру креирамо Анимирани. Позван објекат вредности спинВалуе и поставите његову почетну вредност на 0. Затим зовемо петља() метода на Аниматед.тиминг() објекат, који узима стање спинВалуе као свој аргумент. Објекат Аниматед.тиминг() описује како ће анимација напредовати током времена и у овом случају ротира слику за 360 степени.

Да бисмо подесили трајање петље, прешли смо а трајање својство на Аниматед.тиминг() објекат, који ће одредити колико дуго ће се анимација изводити пре петље. Својство трајања смо поставили на 2000, што значи 2 секунде пре поновног покретања.

Такође можете подесити колико пута анимација треба да се понавља тако што ћете пренети итерације својство методе лооп().

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

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

Рад са сложеном анимацијом

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

Ево два савета која ће вам помоћи када петљате сложене анимације у Реацт Нативе:

1. Разбијте анимацију на мање делове

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

2. Користите метод Аниматед.секуенце().

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

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

Експериментишите са својом анимацијом

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