Animator

css 애니메이션을 정의하고 컨트롤하기 쉽게 해주는 래퍼 컴포넌트입니다. 특히 styled-components 의 keyframes 을 이용해야 할때 유용합니다.

import styled, { keyframes } from "styled-components";

const popupKeyframe = keyframes`
  from {
    opacity:0;
    transform:scale(0);
  }
  to {
    opacity:1;
    transform:scale(1);
  }
`;
const moveRightKeyframe = keyframes`
  from {
    opacity:1;
    transform:translateX(0px);
  }
  to {
    opacity:1;
    transform:translateX(300px);
  }
`;
const moveLeftKeyframe = keyframes`
  from {
    opacity:1;
    transform:translateX(300px);
  }
  to {
    opacity:1;
    transform:translateX(0%);
  }
`;
const hideKeyframe = keyframes`
  from {
    opacity:1;
    transform:scale(1);
  }
  to {
    opacity:0;
    transform:scale(0);
  }
`;
type MyAnimationType = 'start'|'move-right'|'move-left'|'end';
const MyAnimatorWrapper = styled(Animator<MyAnimationType>)`
  position:relative;
  opacity:0;
  ${popupKeyframe} ${hideKeyframe} ${moveRightKeyframe} ${moveLeftKeyframe}
`;

export function AnimatorBasic(){

  const start = useRef<AnimationConfig<MyAnimationType>>({ name: 'start', animation: `${popupKeyframe.getName()} 1s forwards` });
  const moveRight = useRef<AnimationConfig<MyAnimationType>>({ name: 'move-right', animation: `${moveRightKeyframe.getName()} 0.7s forwards` });
  const moveLeft = useRef<AnimationConfig<MyAnimationType>>({ name: 'move-left', animation: `${moveLeftKeyframe.getName()} 0.5s forwards` });
  const end = useRef<AnimationConfig<MyAnimationType>>({ name: 'end', animation: `${hideKeyframe.getName()} 1.5s forwards` });
  const [ animation, setAnimation ] = useState<AnimationConfig<MyAnimationType>>(start.current);

  return <Frame>
    <MyAnimatorWrapper config={animation} animationEnd={(ani)=>{
      if(ani.name === 'start'){
        setAnimation(moveRight.current);
      }else if(ani.name === 'move-right'){ 
        setAnimation(moveLeft.current);
      }else if(ani.name === 'move-left'){ 
        setAnimation(end.current);
      }else if(ani.name === 'end'){ 
        setAnimation(start.current);
      }
    }}>
      <div style={{background:'red', borderRadius: '100%', width:'50px', height:'50px'}}></div>
    </MyAnimatorWrapper>
  </Frame>
}

속성 설명

(optional) config

• 타입 : AnimationConfig

interface AnimationConfig<T> = {
  name:T;
  animation:string;
}

css 애니메이션의 내부 이름과 animation 속성을 정의합니다.

name 에는 이름의 종류를 타입으로 지정할 수 있습니다. 가장 처음의 예제에서는 아래와 같이 정의했습니다.

type MyAnimationType = 'start'|'move-right'|'move-left'|'end';

animation 은 css 의 animation 정의와 동일합니다.

animation: `${moveRightKeyframe.getName()} 0.7s forwards`

(optional) animationEnd

• 타입 : (config:AnimationConfig) => void

현재 애니메이션이 종료되었을때 호출됩니다. 파라미터로 현재 재생중인 애니메이션의 config 정보가 제공됩니다.

특정 애니메이션이 종료되었을때 어떤 행동을 해야하는 경우 유용합니다.
예를 들어 특정 애니메이션이 끝나고 실제 컴포넌트를 해제처리 하고 싶으면 animationEnd 에서 컴포넌트 해제 로직을 넣으면 됩니다.