[ 코드잇 스프린트 ] 교육기간 3일차 TIL

---

강의 목표

CSS Animation에 대해 학습하고 실습을 진행합니다.

 

강의 내용 정리

강의시간에 학습한 내용을 정리합니다.

 

현업에서 자주 사용되는 애니메이션

• 3D 인터랙션 ( 예시 )
• 스크롤 트리거 ( 예시 )
• 스크롤 링크드  ( 예시 )
• 숫자가 올라가는 애니메이션  ( 예시 )
• 자동 플레이 캐러셀  ( 예시 )

 

주요 애니메이션 라이브러리

• react-spring
• framer-motion

 

실습하기 - 카운팅 애니메이션 ( react-spring )

• react-spring을 이용해 숫자 올라가는 애니메이션 만들기
  • prop으로 목표 숫자를 받는 컴포넌트 생성
  • useSpring hook을 이용해주세요.
  • <animated.span></animated.span> 을 리턴

 

내 코드

import { useState, useEffect } from 'react';
import { animated, config, useSpring } from '@react-spring/web';
import './App.css';

function AnimatedNumberReactSpring({ value }: { value: number }) {
  const { number } = useSpring({
    from: { number: 0 },
    number: value,
    config: config.default,
  });

  return <animated.span>{number.to((n) => n.toFixed(0))}</animated.span>;
}

function App() {
  const [num, setNum] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      const newNum = (Math.random() * 100).toFixed();
      setNum(parseInt(newNum));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: 2,
        fontSize: '50px',
      }}
    >
      {/* <span>Current Number: {num}</span> */}
      <AnimatedNumberReactSpring value={num} />
    </div>
  );
}

export default App;

 

정답 코드

import { useState, useEffect } from 'react';
import { animated, config, useSpring } from '@react-spring/web';
import './App.css';

function AnimatedNumberReactSpring({ value }: { value: number }) {
  const animatedValue = useSpring<{ val: number }>({
    val: value,
    config: {
      ...config.stiff,
      clamp: true,
    },
  });
  return (
    <animated.span>
      {animatedValue.val.to((val: number) => Math.floor(val))}
    </animated.span>
  );
}

function App() {
  const [num, setNum] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      setNum(Math.random() * 100);
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <AnimatedNumberReactSpring value={num} />
    </>
  );
}

export default App;

 

 

실습하기 - 카운팅 애니메이션 ( framer motion )

• Framer motion을 이용해 숫자 올라가는 애니메이션 만들기
  • prop으로 목표 숫자를 받는 컴포넌트
  • <motion.span></motion.span> 을 리턴. 모션 컴포넌트 페이지 참조
  • useMotionValue, useSpring과 useTransform를 이용해주세요.

 

정답 코드

import { useState, useEffect } from 'react';
import './App.css';
import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion';

function AnimatedNumberFramerMotion({ value }: { value: number }) {
  const motionValue = useMotionValue(0);
  const springValue = useSpring(motionValue);

  useEffect(() => {
    motionValue.set(value);
  }, [motionValue, value]);

  const toFixed = useTransform(springValue, (latest) => latest.toFixed(0));
  return <motion.span>{toFixed}</motion.span>;
}

function App() {
  const [num, setNum] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => {
      const newNum = (Math.random() * 100).toFixed();
      setNum(parseInt(newNum));
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <span>{num}</span>
      <AnimatedNumberFramerMotion value={num} />
    </div>
  );
}

export default App;

 

 

Transition

• CSS 속성으로서의 transition
  • 임의의 CSS 속성에 대해
  • 일정 시간 동안 지속적으로(!= 즉시) 값이 변하도록 하는 것
• transition
  • 어떤 속성을 변경할 것인가( transition-property )
  • 언제 그 변화를 시작할 것인가( transition-delay )
  • 그 변화의 지속 시간을 얼마로 할 것인가( transition-duration )
  • 시간의 흐름에 따른 변화의 양을 어느 정도로 할 것인가( transition-timing-function )
• transition 작성에 관한 규칙들
  • transition-property를 제외한 속성들 중 하나가 입력됐는데
    그 속성값의 길이가 transition-property 속성값 길이보다 짧은 경우
    -> 속성값이 반복됨
• 이벤트 리스너
  • transitionrun : delay 전에 호출됨
  • transitionstart : delay 후 실제 애니메이션이 시작할 때 호출됨
  • transitionend : 종료된 후 호출됨. 단, 트랜지션이 종료되기 전에 취소되거나 하면 호출되지 않음
• 타이밍 함수
  • 트랜지션이 진행되는 동안, 각 순간마다 사용할 중간 값을 어떻게 계산하는지 정의
  • 변화의 가속 커브를 정의하는 것
  • 할당할 수 있는 값은 <easing-function> 타입 값 중 하나
    • ease: 중간까지는 가속되다가 중간 이후부터는 감속
    • ease-in: 초기에는 천천히 점점 빠르게
    • ease-out: 초기에는 빠르게 점점 느리게
• transform
  • html 요소의 모양이나 위치를 바꾸는 CSS 속성
  • 확대/축소 : scale
  • 회전 : rotate
  • 위치 이동 : translation
  • 뒤틀기 : skew
• transform 의 주요 속성
  • transform
    • 여러 개의 변형을 지정할 수도 있음
    • 지정된 변형들은 지정된 순서대로 적용됨
  • transform-origin
    • 회전이나 확대/축소 등에서 사용되는 중심점
    • 기본값은 요소의 중심
    • tailwind의 클래스들: origin-center, origin-top, origin-top-right, …

 

animation & @keyframes

• transition 보다 중간 단계를 더 섬세하게 조정할 수 있고 반복할 수도 있는 CSS 속성
  • @keyframes at-rule로 커스텀 애니메이션을 정의하고 “animation-name” 속성으로 사용
• 간단한 애니메이션에 대해서는 자바스크립트 없이도 동작