[React] animation 설정 중 요소가 한가운데로 간다

return (
	<PlanetWrapper src={require("../../assets/graphic/planet-9.png")} m={0} n={1}/>
)

 

m은 월을 의미하고, n은 해당 월에 완독한 책의 수까지 0부터 점진적으로 증가한다.

 

행성이 궤도를 움직이는 애니메이션은 아래와 같다.

const cloudOrbit = (initialX, degree) => keyframes`
    0% {
        transform: 
            rotate(0deg) 
            translateX(${Math.cos((degree * 20 % 360) * (Math.PI / 180)) * (60 + 35 * initialX)}px) 
            translateY(${Math.sin((degree * 20 % 360) * (Math.PI / 180)) * (60 + 35 * initialX)}px) 
            rotate(0deg);

    }
    100% {
        transform: 
            rotate(360deg) 
            translateX(${Math.cos((degree * 20 % 360) * (Math.PI / 180)) * (60 + 35 * initialX)}px) 
            translateY(${Math.sin((degree * 20 % 360) * (Math.PI / 180)) * (60 + 35 * initialX)}px) 
            rotate(-360deg);
    }
`;

const PlanetWrapper = ({ src, m, n }) => (
    <BookInfo m={m} n={n}>
        <Planet src={src} />
        <ReadingBox>
            <img style={{ backgroundColor: '#ddd', width: 50, height: 70 }} />
            <ReadingContent>
                <ContentText color={'#4659A9'} size={'16px'}>종의 기원담</ContentText>
                <ContentText color={'#4659A9'}>2024.01.26 ~ 2024.02.15</ContentText>
            </ReadingContent>
        </ReadingBox>
    </BookInfo>
);

const BookInfo = styled.div`
    position: absolute;
    left: calc(50% - 14px);
    top: calc(50% - 14px);
    animation: ${props => cloudOrbit(props.m, props.n)} ${props => props.m * 15}s linear infinite;
`;

m은 0~11까지 설정되어 있는데, 1월에 해당하는 0이 들어가면 아이콘이 본래 설정된 위치로 가지 않고 한 가운데에 머물러 있었다. 

설정된 위치로 가지 않으니 궤도를 따라 움직일 공간이 없어 움직이지 않은 것으로 보인다.

 

왜 한가운데로 갈까. 시작 위치가 잘못됐나? 하고 콘솔에 출력해보니 시작 위치로 출력되긴한다.

아니 그럼 뭐가 문제야?하고 해당 요소가 거치는 코드를 차례차례 보았다.

 

일단 PlanetWrapper를 거칠거고, 그 다음 BookInfo를 거친다. PlanetWrapper까지는 그냥 전달하기만 하니 문제가 없을거고. 

BookInfo을 보니 왠지 눈에 밟히는 animation이 있었다.

1월이면 m이 0일텐데 그럼 '0s'로 움직이네,,?

그럼 다른 월로 바꿔보고 0s로 설정해보자.

 

아니나다를까 위의 사진처럼 화면의 한 가운데에 머물러 있었다. 

0초로 움직일거면 시작 위치에서 움직이지 말아주지, , , 왜 가운데로 가는거야, , ,

 

아무튼 0s로 설정되지 않게 아래와 같이 변경해주었다.

animation: ${props => cloudOrbit(props.m, props.n)} ${props => (props.m + 1) * 15}s linear infinite;

 

---

div {
  animation: name 2s linear infinite;
}

 

animation의 순서는 이러하다.

name: keyframe을 이용한 애니메이션의 이름

2s:  한 사이클을 완료하는 데 걸리는 시간

linear: 애니메이션의 진행 방식

infinite: 애니메이션의 사이클 반복 횟수

 

참고 자료

https://velog.io/@mangozoo20/CSS-animation-%EC%A0%95%EB%A6%AC