Reaktiv Doğma Animasiyalar. Mükəmməl performans və məsləhətləri necə əldə etmək olar - 1x04

Bu hekayə Təcrübəmi React Native ilə bölüşdüyüm bir seriyanın bir hissəsidir: RN komponentləri, API, xarici paketlər və hər cür problemlərlə necə məşğul olduğumu. Ümid edirəm ki, bu seriya mesajlar React Native icmasına faydalı və faydalı olacaqdır.

Niyə animasiyalar vacibdir?

Xüsusilə mobil dünyada ən yaxşı istifadəçi təcrübəsi əldə etmək üçün animasiyalar vacibdir. Tətbiq istifadəçiləri bunların bir çoxuna məruz qaldılar və istifadəsi və gözəlliyi ilə tanış oldular. Onlarla praktik təcrübəyə sahib olduqları üçün yüklədikləri hər tətbiqdə əlbətdə bir məsələ olacağını gözləyirlər. React Native animasiya sənədlərinə əsasən:

Hərəkətdə olan cisimlər sürətə malikdir.
İstifadəçi interfeysinizdə fiziki etibarlı hərəkətləri çatdırmaq üçün animasiyalardan istifadə edə bilərsiniz.
Şəkil 1: Animasiyalar əladır!

Reaktiv doğma yerdəki animasiya sistemləri

React Native iki tamamlayıcı animasiya sistemini təklif edir: Animated və LayoutAnimation. Bunlar fərqli istifadə və məqsədləri olan iki fərqli API.

Şəxsi hissim odur ki, Animated-in inkişaf etdiricilər tərəfindən daha çox istifadə olunur, yəqin ki, daha çox idarəetmə təklif etdiyi üçün - və daha yaxşı sənədlər.

Bu yazıda, Animated API ilə tanış olduğunuzu güman edirəm və ən yaxşı performans əldə etmək üçün bir sıra digər praktik tövsiyələr ilə birlikdə blog edəcəyəm.

Animated API göstərişləri: performans və daha çox

Bir animasiya yaratmaq üçün React Native animasiyalarının sənədləşməsində başlamaq üçün çox yaxşı sənədlər və nümunələr tapacaqsınız.

Mükəmməl bir performansa necə nail olmağınız budur

Yaxşı bir performansa nail olmaq üçün həmişə konfiqurasiya dəstəyini istifadə etməlisiniz istifadəNativeDriver (həqiqi dəyəri ilə). Məsələn, bir görüntünün fırlanmasını canlandırmaq üçün zamanlama funksiyamız belə görünür:

Animated.timing (this.state.spinValue, {to Value: 1, müddəti: 3000, istirahət: Lockerung.linear, useNativeDriver: true}). Başlanğıc ();

Bu konfiqurasiya dayağı çox vacibdir, çünki RN yalnız mümkün olan ən yaxşı performansa çatmaq üçün doğma aləmdəki körpü üzərində birbaşa bir dəfə animasiya işlədir. JavaScript / doğma sahələr və onların körpüsü ilə tanış deyilsinizsə, bu yazıda @TalKol-dan əlavə məlumatlar əldə edə bilərsiniz.

RN sənədlərinə görə useNativeDriver bütün animasiya növləri üçün istifadə edilə bilməz:

Animated ilə edə biləcəyiniz hər şey hazırda Native Animated-də dəstəklənmir. Əsas məhdudiyyət yalnız layout olmayan xüsusiyyətləri canlandıra biləcəyinizdir. Dəyişiklik və qeyri-şəffaflıq kimi şeylər işləyir, lakin fleksbox və mövqe xüsusiyyətləri yoxdur.

Ancaq animasiyalar yaradarkən bunun öhdəsindən gəlməyin bir yolu var. Məsələn, Math Warriors Android tətbiqindən bir nümunə götürək, istifadəçi oyuna başlamaq üçün düyməni basdıqda loqotip şəklimizi boyutlandırırıq.

Image 2: Oyun başlamaq üçün düymə Math Warriors-da tıklandığında loqotipin animasiyası böyüdü

Burada etdiyimiz şey, loqotipin eni və hündürlüyünü eyni anda dəyişdirdiyimiz və bu xüsusiyyətlər cizgi sürücüsü xüsusiyyətinin istifadəsini dəstəkləməməsidir. Bunların paralel icrası bunu aşağıdakı kimi dəstəkləyir:

Animated.parallel ([Animated.timing (this.state.rankImageWidth, {toValue: 110}), Animated.timing (this.state.rankImageHeight, {toValue: 110})], {useNativeDriver: true}). Başlanğıc () ;

Animasiyaları necə döndərmək olar

RN loop animasiyasını dəstəkləmir, buna görə bir yol tapmalı olduq. Həqiqətən əvvəlki nümunəmizin davamı olan Math Warriors oyunundan ikinci bir nümunə aşağıdakılardır: istifadəçi oyuna başlamaq üçün düyməni basdıqdan sonra loqo böyüdü və bir döngədə yuxarı və aşağı və yuxarı hərəkət edir. Tətbiq oyunçunu rəqiblə müqayisə edir.

Şəkil 3: Oyun Math Warriors-da tıklandığında bir döngədəki logo hərəkətinin animasiyası

Biz JavaScript interval ID yaratdıq. Tutmaq budur ki, tətbiqin pozulmasına və gözləmə müddətinə yol verməmək üçün əsl animasiyanı iki dəfə işə salmalısınız: bir döngədə (JavaScript intervalı) izləyən ilk və digərləri.

// y oxu boyunca bir elementi zamanla hərəkət edən animasiya funksiyasıAndDown = (yPositionPropName, müddəti, yHighPosition, yLowPosition) => {Animated. Nəticə ([Animated.timing (yPositionPropName, {müddəti: müddəti || 1000, toValue: yHighPosition}), Animated.timing (yPositionPropName, {müddəti: müddəti || 1000; Dəyişiklik: yLowPosition})]). Başlanğıc (); };
// Yuxarıdakı funksiyaya zəng vurun və istifadə edin // Döngə yuxarı və aşağı çəkilməzdən əvvəl ilk dəfə yuxarı və aşağı animasiya başlayın (this.state.rankImageTopPosition, this.rankImageMoveDuration, this.rankImageHighposition, this.rankImageLowposition) ;
// loop dərəcə şəkli yuxarı və aşağı hərəkət. Ümumi interval vaxtı // bu (yuxarıya və aşağıya) animasiya müddəti x 2) vaxtdır.rankAnimationIntervalId = setInterval (() => {yuxarı və aşağı (this.state.rankImageTopPosition, this.rankImageMoveDuration, this.rankImageHighposition, this.rankImageLowposition) ;}, bu.rankImageMoveDuration * 2);
// Oyunçumuzu rəqiblə müqayisə etdikdən sonra interval nömrəsini təmizləyin ClearInterval (this.rankAnimationIntervalId);

Tərtib edilmiş komponentlərlə animasiya edilə bilən komponentlərin istifadəsi

Dizayn edilmiş komponentlərin istifadəçiləri üçün 4 animasiya olunan komponentdən birini (görünüş, mətn, şəkil, ScrollView) aşağıdakı kimi hazırlanmış bir komponentə çevirə bilərsiniz:

const AnimatedImage = səpkili (Animated.Image) `. . . `;

Animasiyanın əsl performansını yoxlayın

Animasiyanızın necə davrandığını başa düşmək üçün onu real cihazda sınamalısınız. Emulyatorlar bu cür rəy verə bilməzlər. Əksinə, animasiyanız bir emulator mühitində düzgün işləyə bilər və həqiqi bir cihazdan yapışa bilər. Yalnız həqiqi cihaz testi animasiyanın 60 FPS və ya daha az sürətə sahib olduğunu göstərə bilər. Yavaş animasiyalar meydana çıxdıqda bu belədir.

Nə düşünürsən

Bu animasiya tövsiyələri haqqında nə düşünürsünüz? Animasiyalarınızı sizin üçün necə işləyirsiniz? Şərh hissəsində perspektivlərinizi və fikirlərinizi təklif edin.

Çalışacağınız xüsusi bir mövzu varmı? Mən onunla işləyəndə perspektivimi bölüşməyi xoşlayıram.

Bu məqaləni bəyənmisinizsə, düyməni basaraq tapa bilərsiniz.

Haqqımda

Salam mən Tasosam. İnterneti sevən və hazırda React Native və React ilə çox işləyən bir proqram tərtibatçısı. Mən proqram marketinqi mərkəzində geniş mobil və veb layihələr həyata keçirdiyimiz Coded Lines proqram agentliyinin həmtəsisçisiyəm. Axtardığınız kimi görünürsə, mənə müraciət edin: [email protected] Dayandırdığınız üçün təşəkkür edirik :)