Реактивті анадағы анимациялар. Тамаша өнімділік пен кеңестерге қалай қол жеткізуге болады - 1x04

Бұл оқиға мен өзімнің тәжірибеммен React Native-мен бөлісетін сериялардың бір бөлігі: мен RN компоненттерімен, API интерфейстерімен, сыртқы пакеттермен және барлық мәселелермен қалай жұмыс істегенім және жұмыс істегенім. Бұл жазбалар React Native қауымдастығына пайдалы әрі пайдалы болады деп сенемін.

Неліктен анимациялар маңызды?

Анимациялар, әсіресе мобильді әлемде, ең жақсы пайдаланушы тәжірибесіне қол жеткізу үшін маңызды. Қолданбаны пайдаланушылар олардың көпшілігімен танысып, олардың жарамдылығы мен сұлулығымен танысты. Олармен тәжірибелік тәжірибе болғандықтан, олар жүктелген барлық қосымшаларда олар міндетті түрде болады деп күтеді. React Native анимациялық құжаттамасына сәйкес:

Қимылдағы заттар импульске ие.
Пайдаланушы интерфейсінде физикалық сенімді қозғалыстарды жеткізу үшін анимацияларды қолдануға болады.
1-сурет: анимациялар керемет!

React Native анимациялық жүйелер

React Native екі қосымша анимациялық жүйені ұсынады: Animated және LayoutAnimation. Бұл әр түрлі қолдану мен мақсаттары бар екі әртүрлі API.

Менің жеке сезімім, анимацияны әзірлеушілер жиі қолданады, өйткені ол көбірек бақылауды, сонымен қатар құжаттаманы жақсартады.

Бұл мақалада сіз Animated API-мен таныссыз деп ойлаймын және блогты блогермен бірге ең жақсы өнімділікке қалай жетуге болады.

Анимацияланған API кеңестері: өнімділік және басқалары

Анимация жасау үшін сіз React Native анимациялары үшін бастауға болатын өте жақсы құжаттар мен мысалдарды таба аласыз.

Осылайша сіз керемет өнімділікке қол жеткізесіз

Жақсы өнімділікке жету үшін әрдайым useNativeDriver қолдауын пайдалану керек (шын мәні бар). Мысалы, суреттің бұрылуын жандандыру үшін біздің уақыт функциясы келесідей болады:

Анимацияланған.timing (this.state.spinValue, {мән: 1, ұзақтығы: 3000, релаксация: Lockerung.linear, useNativeDriver: true}). Бастаушы ();

Бұл конфигурацияның тірегі өте маңызды, өйткені RN анимацияны ең жақсы нәтижеге қол жеткізу үшін тікелей жергілікті әлемдегі көпірден бір-ақ рет жүргізеді. Егер сіз JavaScript / Native аймақтарымен және олардың көпірімен таныс болмасаңыз, осы мақалада @TalKol туралы қосымша ақпарат ала аласыз.

RN құжаттамасына сәйкес useNativeDriver барлық анимация түрлері үшін қолданыла алмайды:

Қазіргі уақытта Native Animated бағдарламасында қол жетімді емес. Негізгі шектеу - сіз тек орналаспайтын қасиеттерді анимациялай аласыз. Трансформация және мөлдірлік сияқты заттар жұмыс істейді, бірақ флексбокс және позиция қасиеттері жоқ.

Алайда, анимация жасау кезінде мұны жеңудің жолы бар. Мысалы, Math Warriors Android қосымшасынан мысал алайық, онда пайдаланушы ойынды бастау үшін басқан кезде логотипіміздің суретін өзгертеміз.

Сурет 2: Math Warriors ойынды бастау үшін батырманы басқан кезде логотиптің анимациясы үлкейеді

Біз мұнда не істеп жатырмыз, біз логотиптің ені мен биіктігін бір уақытта өзгертеміз, ал бұл қасиеттер драйвердің анимациялық сипаттамасын қолдануды қолдамайды. Олардың параллель орындалуы мынаны қолдайды:

Анимацияланған.параллель ([Animated.timing (this.state.rankImageWidth, {toValue: 110}), Animated.timing (this.state.rankImageHeight, {toValue: 110})], {useNativeDriver: шын}). Басталуы () ;

Анимацияны қалай ілуге ​​болады

RN цикл анимациясын қолдамайды, сондықтан бізге жол табу керек болды. Math Warriors ойынының екінші мысалы, бұл біздің алдыңғы мысалдың кеңейтімі, келесідей: пайдаланушы ойынды бастау үшін түймені басқан кезде, логотип үлкейіп, цикл бойымен жоғары-төмен және жоғары қарай қозғалады. Қосымша ойыншыны қарсыласпен салыстырады.

Сурет 3: Math Warriors ойынын басқан кезде циклдегі логотиптің қозғалысын анимациялау

Біз JavaScript интервалының идентификаторын жасадық. Бағдарламаның бұзылуы мен күту уақытын болдырмау үшін нақты анимацияны екі рет іске қосу керек: бірінші және барлық циклде (JavaScript интервалы).

// уақыт аралығында элементті у осі бойымен қозғалатын анимация функциясыAndDown = (yPositionPropName, ұзақтығы, yHighPosition, yLowPosition) => {Анимацияланған.Сәтсіздік ([Animated.timing (yPositionPropName, {ұзақтығы: ұзақтығы || 1000, toValue: yHighPosition}), Animated.timing (yPositionPropName, {ұзақтығы: ұзақтығы || 1000, мәні: yLowPosition})]).) Бастаушы (); };
// Жоғарыдағы функцияға қоңырау шалыңыз және оны қолданыңыз. // Жоғары және төмен анимацияны бірінші рет цикл жоғары және төмен түсірмес бұрын бастаңыз (this.state.rankImageTopPosition, this.rankImageMoveDuration, this.rankImageHighposition, this.rankImageLowposition) ;
// цикл деңгейінің кескіні жоғары және төмен жылжу. Жалпы интервал уақыты // бұл (анимацияның ұзақтығы x 2) уақыттың жоғары және төмен уақыттары. ;}, this.rankImageMoveDuration * 2);
// ойыншымызды қарсыласпен салыстырғаннан кейін аралық идентификаторды тазалаңыз clearInterval (this.rankAnimationIntervalId);

Құрастырылған компоненттері бар анимациялық компоненттерді пайдалану

Құрастырылған компоненттерді пайдаланушылар үшін сіз 4 анимациялық компоненттердің бірін (көрініс, мәтін, сурет, ScrollView) келесідей жасалған құрамдас бөлікке айналдыра аласыз:

const AnimatedImage = сәнді (Animated.Image) `. . . `;

Анимацияның нақты жұмысын тексеріңіз

Анимацияның қалай әрекет ететінін түсіну үшін оны нақты құрылғыда сынап көру керек. Эмуляторлар кері байланыстың бұл түрін бере алмайды. Керісінше, сіздің анимацияңыз эмулятор ортасында мінсіз жұмыс істеп, нақты құрылғыға жабысып қалуы мүмкін. Анимацияның жылдамдығы 60 FPS немесе одан кем жылдамдығын тек нақты құрылғы сынауы көрсете алады. Бұл баяу анимациялар пайда болған кезде.

Сіз қалай ойлайсыз?

Бұл анимация туралы кеңестер туралы не ойлайсыз? Анимациялар сіз үшін қалай жұмыс істейді? Пікірлер бөлімінде өз көзқарастарыңыз бен идеяларыңызды ұсыныңыз.

Сізде нақты тақырып бар ма? Мен онымен жұмыс жасаған кезде, өз көзқарасыммен бөліскенді ұнатамын.

Егер сізге осы мақала ұнайтын болса, оны батырманы басу арқылы таба аласыз.

Мен туралы

Сәлеметсіз бе, мен Тасоспын. Интернетті жақсы көретін және қазіргі уақытта React Native және React бағдарламаларымен көп жұмыс жасайтын бағдарламалық жасақтама жасаушысы. Мен Coded Lines бағдарламалық жасақтама агенттігінің бірлескен құрылтайшысымын, онда біз кеңейтілген мобильді және веб-жобаларды жүзеге асырамыз, ол маркетингке бағытталған. Егер бұл сіз іздегендей болып көрінсе, маған мына мекен-жайға хабарласыңыз: [email protected] Тоқтатқаныңыз үшін рахмет :)