Mattas Perry iš „Framer“ ir aš pažvelgiame į „React“ animacijos biblioteką „Framer Motion“.
Pirmiausia apžvelgsime, kaip paprasta yra API. Jūs labai deklaratyviai valdote viską naudodamiesi savo JSX elementų atramomis. Animacijos valdymas šiame sluoksnyje yra labai intuityvus ir prasmingai susijęs su vartotojo sąsaja ir būsena.
Kiekvienas mūsų žiūrimas pavyzdys yra realesnis ir apima daugiau funkcijų, ką „Framer Motion“ sugeba. „React“ kūrėjams patiks viso to sintaksė, o visiems kitiems patiks neįtikėtinai našūs ir sklandūs rezultatai.
Mes baigiame pažvelgti į patį „Framer“, kuris naudoja šią tikslią biblioteką, kad atliktų visus animacinius veiksmus, kuriuos daro „Framer“. Susidomėjote Frameriu? Atsisiųskite „Framer X“.
1 demonstracinė versija: pagrindinė sintaksė
2 demonstracinė versija: variantai
3 demonstracinė versija: „AnimatePresence“ ir „layoutTransition“
Premija: patikrinkite paveikslėlio iššokančio funkciją „slinkti, kad atmestumėte“.