CSS 애니메이션 (간단한 메모) - pathLength를 활용하기

23/03/04 새벽 1시경

현재 이진트리에서 노드간 이어지는 라인을 그리는 효과를 추가했다.

여기서 발견한 문제점은

 

1. stroke-dasharray 및 dashoffset을 활용하여 애니메이션을 추가해야한다.

2. 그러나 해당 line은 노드의 위치가 유동적으로 바뀌는 path로 그려지는 svg이다.

3. pathLength를 활용하기 전, path를 만들기 전에 불러진다.

4. 또한 유동적으로 바뀌기에 tag나 css에서 간단하게 사용하기가 힘들다.

 

여기서 우리는 간단하게 해결을 하였다.

 

3번 문제점 -> 해당 문제는 pathLength를 활용하기위한 방도를 찾는게 아니라, 미리 알고있는 좌표값을 통해 곡선의 길이를 구하였다.

Math.sqrt( (x2-=x1)*x2 + (y2-=y1)*y2 )

 

4번 문제점은 tsx 파일에서 

tag를 export하는 과정에서 위에 계산을 한 뒤 미리 넣어주었다. 

distance가 바로 위에 계산을 한 값이다.

export default function VerticalCurvedLineSvg ({PathTag,distance}: ICurvedLineSvgProps) {

    return (
        <g id="CurvedLine">
            <>
                <path d={PathTag} strokeDasharray={Math.ceil(distance)+1} strokeDashoffset={Math.ceil(distance)+1}/>
            </>
        </g>
    );
}

이렇게 계산하여

초기의 dasharray와 dashoffset을 미리 설정해주었다.

 

이렇게 초기값을 넣어줬으니 css에서는 다음과 같이 해도 되었다.

#CurvedLine path{
    stroke:black;
    fill: none;
    animation: line 2s forwards;
    stroke-linecap: round;
}
@keyframes line{
    to{stroke-dashoffset: 0;}
}

 

보다시피 line 애니메이션에서

from{stroke-dashoffset : 유동적인 길이} 

를 미리 넣지 않고 

to만 넣어서 css요소를 바꾸도록 하는 코드를 짤 필요 없이 간단하게 작성하였다.

사실 그냥 꼼수거나 원래 이렇게 쓰는 것일 수 있으나, 일단 이렇게 하나를 알긴 하였다.