Как да създадете естествени анимации с по-добра реакция

Мобилните приложения често използват анимация, за да оживят потребителското изживяване. Но създаването на висококачествени анимации може да бъде предизвикателство.

За щастие има концепции и техники, които можете да използвате, за да подобрите уменията си за анимация. След това можете да ги приложите, за да създадете по-добри, по-плавни анимации за следващото си мобилно приложение React Native.

React Native Animations

The React Native Animated библиотеката е най-популярният начин за създаване на анимации в приложение React Native.

Точно като Вградената анимационна библиотека на React, Animated API е част от базираната на JavaScript библиотека Animated. Animated предоставя набор от класове и методи, които ви позволяват да създавате плавни и плавни анимации. Има няколко други страхотни опции за създаване на React Native анимации, като Reanimated.

Създаването на добри анимации в React Native обаче не означава само използване на правилната библиотека или задаване на правилните свойства. Става въпрос и за разбирането на принципите на анимацията и как да ги прилагате в контекста на разработването на мобилни приложения. И така, ето няколко ключови принципа, които трябва да разберете и да имате предвид, когато създавате вашите анимации.

Регулиране на продължителността на анимацията

Анимациите трябва да се чувстват гладки и естествени за потребителя. Постигането на това може да зависи от това как се справяте с продължителността на конкретни анимации, които създавате.

Продължителността се отнася до времето, необходимо за пълното изпълнение на анимацията. По подразбиране анимациите в React Native имат продължителност от 500 милисекунди, но можете да ги коригирате, за да вървят по-бързо или по-бавно.

Трябва да регулирате продължителността на анимацията според нейната сложност. Една проста анимация, като например затихване, може да се нуждае само от кратка продължителност, докато по-сложна анимация, като например плъзгане с ефект на отскачане, може да трябва да продължи по-дълго, за да се почувства естествено и гладко.

С Animation.timing() метод, можете да създадете персонализирана времева анимация, която да отговаря на вашите нужди.

Ето пример за това как да добавите персонализирана продължителност към обикновена постепенно затихваща анимация:

импортиране Реагирайте, {useRef} от"реагира";
импортиране {Анимиран, изглед} от"реагиране на родния";
конст FadeInView = (реквизит) => {
конст fadeAnim = useRef(нов Анимиран. Стойност (0)).текущ; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 toValue: 1,
 продължителност: 2000, // задава персонализирана продължителност
 useNativeDriver: вярно,
 }
 ).старт();
 }, [fadeAnim]);
връщане (
 стил={{
 ...props.style,
 непрозрачност: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
износпо подразбиранефункцияПриложение() {
връщане (
flex: 1, alignItems: "център", justifyContent: "център"}}>
ширина: 250, височина: 50, Цвят на фона: 'прахово синьо'}}>
размер на шрифта: 28, textAlign: "център", марж: 10}}>Избледняване в</Text>
 </FadeInView>
 </View>
 );
}

Когато избирате продължителност за вашата анимация, важно е да постигнете правилния баланс между скорост и гладкост.

Опитайте да започнете с по-голяма продължителност, когато експериментирате за първи път. По-голямата продължителност ще ви даде повече време за регулиране на функцията за облекчаване и прецизиране на вашата анимация. Винаги можете да съкратите продължителността по-късно, след като сте доволни от цялостния ефект.

Използвайте функции за облекчаване

Простите анимации може да имат постоянна скорост, но промяната на скоростта може да създаде по-естествени ефекти. Функциите за облекчаване контролират скоростта на промяна на анимация във времето. Те могат да накарат вашите анимации да започват бавно, след което да се ускоряват. Задаването на различни скорости, докато анимацията напредва, може да създаде гладка и ангажираща анимация.

Вземете този пример за използване на функция за облекчаване:

импортиране Реагирайте, {useRef} от"реагира";
импортиране {Анимиран, изглед} от"реагиране на родния";
конст FadeInView = (реквизит) => {
конст fadeAnim = useRef(нов Анимиран. Стойност (0)).текущ; 
 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 toValue: 1,
 продължителност: 2000,
 облекчаване: Animated.easeOut, // използвайте функцията за облекчаване тук
 useNativeDriver: вярно,
 }
 ).старт();
 }, [fadeAnim]);
връщане (
 стил={{
 ...props.style,
 непрозрачност: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
износпо подразбиранефункцияПриложение() {
връщане (
flex: 1, alignItems: "център", justifyContent: "център"}}>
ширина: 250, височина: 50, Цвят на фона: 'прахово синьо'}}>
размер на шрифта: 28, textAlign: "център", марж: 10}}>Избледняване</Text>
 </FadeInView>
 </View>
 );
}

Този код използва Animated.easeOut функция за контролиране на скоростта на промяна на непрозрачността на анимация Преглед. The Animated.timing() Методът ще използва функцията за облекчаване, за да промени постепенно непрозрачността от 0 на 1 за период от две секунди, за да изглежда, че анимацията се забавя, когато достигне своя край.

Можете да използвате различни типове функции за облекчаване, за да направите вашите анимации да изглеждат по-плавни, включително улесняване на влизане, улесняване на излизане и улесняване на навлизане.

Изборът на правилната функция за облекчаване може да направи голяма разлика във възприеманото качество на анимациите на вашето приложение. Струва си да отделите малко време, за да си поиграете с тях и да видите какво работи най-добре за вашите конкретни случаи на употреба.

Ключовите кадри помагат при сложни анимации

Ключовите кадри са маркери, които ви позволяват да посочите моменти във вашата анимация, където искате да направите промени в свойства като позиция, мащаб или ротация. Това е като маркиране на точки във времето за насочване на анимацията.

Можете да използвате набор от ключови кадри за задаване на конкретни стойности за всяко свойство искате да анимирате. Това ви помага да контролирате времето и поведението, особено за сложни анимации като тези, включващи движение на герои.

За да създадете основна анимация на ключови кадри, ще трябва да посочите ключовите кадри, между които искате да анимирате, и общата продължителност.

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

Можете да създадете масив от ключови кадри като този:

конст ключови кадри = [
 { х: 0, г: 0 },
 { х: 50, г: 50 },
 { х: 100, г: 100 },
];

В този случай има три ключови кадъра: един в началото на анимацията, един в средата и един в края. След това можете да предадете този масив от ключови кадри към вашата анимационна библиотека, заедно с продължителност от 1000 милисекунди, за да създадете гладка анимация между ключовите кадри.

В някои библиотеки ще трябва също да посочите функция за облекчаване, за да контролирате как напредва анимацията. Можете обаче да приложите основната идея за определяне на ключови кадри и продължителност към повечето анимационни библиотеки.

Възползвайте се от устройството с хардуерно ускорение

Хардуерното ускорение може да бъде мощен инструмент за оптимизиране на производителността на вашите React Native анимации. Като използвате графичния хардуер на устройството, можете да разтоварите част от обработващата работа от процесора и на свой ред да постигнете по-плавни и по-отзивчиви анимации.

След това графичният процесор на устройството ще обработва естествено анимираните стойности и стилове, вместо нишката на JavaScript да трябва да прави това.

Хардуерното ускорение може да не е налично на всички устройства, така че е важно да тествате вашите анимации на различни реални устройства, за да осигурите най-добра производителност.