Како створити вишеструко уграђену компоненту анимације у реакцији са ГСАП-ом

Ако нисте чули за ГСАП или га користили, пропустићете. ГСАП је библиотека анимација за компоненте и елементе. Њихова почетна страница приказује пуно сјајних анимација које можете направити помоћу алата.

ГСАП има пуно конфигурација и не постоји ниједан прави начин за постизање једне врсте анимације. Дакле, размотрићемо један начин (самопоуздања) стварања 'Фаде Ин' анимације када се компонента учита.

Овај чланак неће детаљно описивати како се користи ГСАП. Њихова документација је приручник ако желите детаљни водич за учење алата.

Шта ћемо анимирати

Ево малог описа онога што ћемо анимирати:

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

Такође ћемо компоненту анимације учинити поново употребљивом како бисмо је могли применити на различите елементе.

Хајде да почнемо!

ГСАП инсталација

Прво, морате имати успостављен пројекат реаговања. Направите-реагирајте-апликација је ту за вас ако је требате брзо подесити за овај пројекат.

Да бисте инсталирали ГСАП, унесите следећу наредбу у свој терминал (при чему је тренутни директоријум ваш директоријум пројекта реаговања):

npm install --save gsap 

Направите корисну компоненту анимације

Постављање компоненте

Назовимо наш цомпонет FadeIn:

import React, {useRef, useEffect} from 'react' const FadeInAnimation = ({children, wrapperElement = 'div', direction = null, ...props}) => { const Component = wrapperElement; const compRef = useRef(null) useEffect(() => { // animations }, [compRef]) return (  {children}  ) } export default FadeInAnimation 

Наша анимација још није спремна, али хајде да схватимо са чим започињемо.

  • wrapperElement: користи се за спецификацију која би компонента била. Има подразумевану вредност div. Ово је боље од стварања додатног ДОМ чвора за умотавање компоненте коју желимо да анимирамо.
  • useRef: gsapово нам је потребно да бисмо знали за шта треба покретати анимације. Овим се можемо позвати на нашу компоненту у ДОМ-у.
  • useEffect: без овога, gsapпокренуће анимације са нулл референцом ( useRef(null)). Морамо осигурати да је компонента већ монтирана, отуда и ова кука.
  • children: ово ће бити оно што се налази између и . То може бити текст или чак група елемената.
  • ...props: да би се проширила поновна употреба, ово је неопходно како би компоненте могле да примене друге реквизите попут classNameи style.
  • direction: за случајеве када желимо да додамо правац ефекту постепеног појачавања. Подразумевана вредност је нулл.

Сада идемо на ГСАП.

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

import React, { useRef, useEffect } from "react"; import { gsap } from "gsap"; const FadeInAnimation = ({ children, wrapperElement = "div", direction = null, delay = 0, ...props }) => { const Component = wrapperElement; let compRef = useRef(null); const distance = 200; let fadeDirection; switch (direction) { case "left": fadeDirection = { x: -distance }; break; case "right": fadeDirection = { x: distance }; break; case "up": fadeDirection = { y: distance }; break; case "down": fadeDirection = { y: -distance }; break; default: fadeDirection = { x: 0 }; } useEffect(() => { gsap.from(compRef.current, 1, { ...fadeDirection, opacity: 0, delay }); }, [compRef, fadeDirection, delay]); return (  {children}  ); }; export default FadeInAnimation; 

Пређимо на оно што се овде догодило:

  • Иницијализовали смо променљиву distanceна 200. Ово је корисно у случајевима када се примењује правац. Ово такође можете додати улазним реквизитима како би компонента која га користи могла да одлучи.
  • Ми имамо свој switchслучај. Ово служи за одређивање смера постепеног уласка, са подразумеваним случајем за случајеве када смер није наведен.
  • Онда gsap. Ово је изложено од ГСАП-а за анимирање наше компоненте. Ту је .to, .from, .fromToа више можете наћи у документима.
  • gsap.fromу нашем случају се односи на почетно стање компоненте пре коначног (постављено у табели стилова компоненте). Циљамо тренутни елемент референце, примењујемо трајање од 1 секунде и примењујемо опције анимације.
  • ...fadeDirection: ширимо објект тако да се тамо појављује како је {x: 200}или како је наведено. xје за хоризонтално и yза вертикално је.
  • Затим, почетна непрозирност од 0 и кашњење како је наведено у компоненти.

И то је то. Направимо компоненту која користи ову сјајну анимацију.

Како се користи наша променљива бледећа компонента

Пређите на компоненту коју желите да анимирате и урадите нешто слично следећем:

import React from "react"; import FadeInAnimation from "./FadeInAnimation"; export default function App() { return ( Hello CodeSandbox   Start editing to see some magic happen!   

Hello

); }

Као што се види горе, наша FadeInAnimationкомпонента може прихватити styleослонац. Сетите се да јесмо ...props.

Ево резултата у ЦодеСандБок-у

Упаковати

То је чињеница. Ово је једноставна (самопоуздана) употреба ГСАП-а за постепене ефекте.

Наравно, можете га даље конфигурисати, попут прављења ефекта постепеног одбијања, ротирања и других забавних ствари. Али надам се да вам је овај чланак дао кратак и сажет увод у то како је сјајан ГСАП и како започети с невероватним стварима на вебу.

Напомена: ово је слично подешавању које користим у новом пакету анимација који ускоро лансирам. Поделићу га у овом чланку када буде објављен:)