정보실

웹학교

정보실

css CSS 모션 경로로 재미있게

본문

경로를 따라 요소를 애니메이션 하는 것은 개발자가 일반적으로 GSAP와 같은 큰 JS 라이브러리를 위해 도달하는 것입니다. 그러나 새로운 CSS 모션 경로 모듈을 사용하면 CSS 만 사용하여 멋진 경로 애니메이션을 만들 수 있습니다!


https://css-irl.info/fun-with-css-motion-path/ 


이러한 속성을 사용하여 몇 가지 재미있는 애니메이션을 만들었습니다.이 기사와 관련된 몇 가지 기술을 살펴 보겠습니다.


https://codepen.io/michellebarker/pen/povdXRW 


https://codepen.io/michellebarker/pen/qBEpmGK 


간단한 경로 애니메이션 


경로 애니메이션을 만들려면 애니메이션 하려는 경로 값 (구문은 SVG 경로와 유사 함)과 함께 offset-path를 사용하고 offset-distance 속성에 애니메이션을 적용해야 합니다.


.obj {
  offset-path: path("M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0");
  animation: move 2000ms;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

간단한 예를 들면 다음과 같습니다.


https://codepen.io/michellebarker/pen/gOboBxB 


또한 오프셋 회전 및 오프셋 위치를 사용하여 애니메이션 된 객체의 회전 동작 및 위치를 변경하여 멋진 효과를 얻을 수도 있습니다. 이 데모에서는 기본값과 비교할 때 오프셋 회전의 효과를 볼 수 있습니다. 

두 번째 객체는 경로를 기준으로 회전하지 않지만 고정되어 있습니다.


https://codepen.io/michellebarker/pen/bGNamvP 


Motion path with SVG 


또한 요소가 움직이는 실제 경로를 표시하는 데 관심이 있었습니다. 위의 데모에서는 HTML에 동일한 경로 좌표를 가진 SVG를 포함 시키고 절대 위치를 사용 하여 이 작업을 수행합니다. 

이 스펙을 사용하면 URL을 path () 함수 (clip-path와 유사)로 전달할 수 있습니다. 

이는 단순히 SVG 경로 ID를 포함하고 CSS에서 경로를 복제하지 않도록 할 수 있음을 의미합니다. 

(좌표가 많은 복잡한 경로를 포함하면 CSS 파일이 매우 지저분해집니다!) 그러나 아직 지원되지 않는 것으로 보이므로 경로 좌표를 사용하여 처리해야 합니다.


이는 SVG의 크기를 조정할 수 없고 경로가 일치하기 때문에 애니메이션을 반응 형으로 만드는 제어 기능이 적다는 것을 의미합니다. 

SVG 너비를 변경하려고 시도하면 경로는 원래 크기로 유지됩니다. 

(다른 방법으로는 작동하지 않으므로 이 경우에 해당합니다. 해결 방법이 있으면 알려 주시기 바랍니다.)


“Drawing” the path 


경로를 따라 요소를 이동할 수 있을 뿐만 아니라 경로를 그리는 것처럼 보이게 할 수 있습니다. CSS에서 stroke-dashoffset 및 stroke-dasharray 속성을 사용하여 SVG 경로를 이미“그릴”수 있습니다. 트릭은 stroke-dasharray 값을 경로 길이로 설정 한 다음 해당 오프셋 값에서 0으로 애니메이션을 적용하는 것입니다.


.path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1000ms;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}

(CSS Tricks의 이 기사는 보다 자세하게 설명합니다.)


오프셋 패스 애니메이션과 동일한 지속 시간 및 타이밍 기능 (간격)을 가진 "그리기"애니메이션을 사용하는 경우 동시에 발생하며 경로는 애니메이션 요소에 의해 그려지는 것처럼 나타납니다.


이 기사의 시작 부분에 있는 두 개의 데모 중 두 번째 데모에서는 패스를 따라 객체를 이동하는 애니메이션이 획 애니메이션의 모든 주기에 대해 두 번 반복됩니다. 획-대시 오프셋을 사용하면 선이 그려졌다가 다시 그려집니다 (양수에서 음수 오프셋 값으로 이동). 따라서 선이 그려 져서 지워지는 것처럼 보입니다.


.path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1000ms;
}

@keyframes draw {
  0% {
    stroke-dashoffset: 520;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -520;
  }
}

Smoother animation with box-shadow 


이 애니메이션에는 약간의 트릭이 있습니다. 

첫 번째 예제를 만들 때 애니메이션이 매우 빠르기 때문에 일부 지점에서 애니메이션이 튀어 나온 것으로 나타났습니다. 

애니메이션이 보다 자연스럽게 느껴지도록 오브젝트가 움직이는 동안 상자 그림자를 추가했습니다. 

이렇게 하면 일종의 모션 블러 효과가 생겨 훨씬 매끄럽게 느껴집니다.


@keyframes move {
  10% {
    opacity: 1;
    offset-distance: 0%;
  }
  30% {
    box-shadow: -0.5rem 0 0.3rem salmon;
  }
  70% {
    box-shadow: -0.5rem 0 0.3rem salmon;
  }
  90% {
    opacity: 1;
    offset-distance: 100%;
    box-shadow: none;
  }
  100% {
    opacity: 0;
    offset-distance: 100%;
  }
}


브라우저 지원 


작성 시점에 offset-path는 Chrome에서만 지원됩니다. layout.css.motion-path.enabled 플래그를 사용하여 Firefox에서 활성화 할 수 있지만 다음 Firefox 릴리스에서 표준으로 지원되도록 설정되어 있습니다.



페이지 정보

조회 40회 ]  작성일20-01-24 13:55

웹학교