💻 Motion Path
CSS Transition과 web animation api 각각의 방식으로 길을 따라 달리는 자동차의 motion을 구현해보도록하자.
🖤 Output
- 처음엔 정지되어있는 car
- 트랙을 클릭하면 애니메이션이 시작된다.
- path를 따라 달리며 반복
- 트랙을 클릭하면 애니메이션이 일시정지되면서 car가 그자리에 멈춤
- 일시정지상태에서 다시 클릭하면 애니메이션이 그자리에 다시 시작
🖤 CSS Transition
css transition 방식으로 구현한 코드다.
<style>
/* CSS Transition으로 */
/* car의 포지션이 윈도우창이아니고 track을 기준으로 잡아야함*/
.track {
position: relative;
width: 675px; /* svg viewbox랑 같은 크기로 */
background: #eee;
}
.path {
fill: none;
stroke: black;
}
.car {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 20px;
background: red;
offset-path: path("m.5,443.85V52.36C.5,23.72,23.72.5,52.36.5s51.86,23.22,51.86,51.86v286.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86V52.36c0-28.64,23.22-51.86,51.86-51.86s51.86,23.22,51.86,51.86v426.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86V52.36c0-28.64,23.22-51.86,51.86-51.86s51.86,23.22,51.86,51.86v226.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86v-59.96c0-28.64,23.22-51.86,51.86-51.86");
offset-distance: 0;
offset-rotate: auto 90deg;
transition: 5s;
}
.track:hover .car {
offset-distance: 3200px;
}
</style>
<body>
<div class="track">
<div class="car"></div>
<svg class="path-svg" viewBox="0 0 674.7 531.36">
<path class="path" d="m.5,443.85V52.36C.5,23.72,23.72.5,52.36.5s51.86,23.22,51.86,51.86v286.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86V52.36c0-28.64,23.22-51.86,51.86-51.86s51.86,23.22,51.86,51.86v426.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86V52.36c0-28.64,23.22-51.86,51.86-51.86s51.86,23.22,51.86,51.86v226.64c0,28.64,23.22,51.86,51.86,51.86s51.86-23.22,51.86-51.86v-59.96c0-28.64,23.22-51.86,51.86-51.86" />
</svg>
</div>
</body>주요 CSS 속성
-offset-path: 따라갈 요소의 모션 경로를 지정하고 상위 컨테이너 또는 SVG좌표계내에서 요소의 위치를 정의한다.
-offset-distance: 요소가 경로를 따라 얼마나 떨어져 있는지 지정하는 길이(100%는 경로의 총 길이)
-offset-rotate: 요소가 path를 따라 배치될때 요소의 방향을 정의
ㄴauto: 양의 x축을 기준으로 방향 각도회전 (초기값)
ㄴ<angle>: 지정된 각도에따라 시계방향 회전 변환이 적용
ㄴauto <angle>: auto뒤에 각도의 계산된값에 더해진다.
이전 포스팅에서 언급했듯이 CSS를 이용한 애니메이션은 미리정해진대로만 재생되기때문에 원하는 시점에서 멈추거나 특정 조건에서만 재생시킬 수 없다.
🖤 WA API
이벤트를 부여하기위해 스크립트로 애니메이션을 다시 짜보자.
<style>
/* 스크립트로 */
/* car의 포지션이 윈도우창이아니고 track을 기준으로 잡아야함*/
.track {
position: relative;
width: 675px; /* svg viewbox랑 같은 크기로 */
background: #eee;
}
.path {
fill: none;
stroke: black;
}
.car {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 20px;
background: red;
offset-path: path("m.5,443.85V52.36C.5,23.72,23.72.5,52
.36.5s51.86,23.22,51.86,51.86v286.64c0,
28.64,23.22,51.86,51.86,51.86s51.86-23.22,
51.86-51.86V52.36c0-28.64,23.22-51.86,51.86-
51.86s51.86,23.22,51.86,51.86v426.64c0,
28.64,23.22,51.86,51.86,51.
86s51.86-23.22,51.86-51.86V52.36c0-28.64,23.22-51.86,51.86-
51.86s51.86,23.22,51.86,51.86v226.64c0,28.64,23.22,51.86,51.86,
51.86s51.86-23.22,51.86-51.86v-59.96c0-28.64,23.22-51.86,51.86-51.86");
offset-distance: 0;
offset-rotate: auto 90deg;
}
</style>cssTransition방식에서 transition부분만 뺐다.
스크립트는 아래코드확인
const car = document.querySelector(".car");
const track = document.querySelector(".track");
const animation = car.animate(
[
{
offsetDistance: 0,
},
{ offsetDistance: "100%" },
],
{
duration: 3000,
fill: "both",
// ease-out:보통-천천, ease-in: 천천-보통, ease-in-out: 천천-보통-천천
easing: "ease-out",
iterations: Infinity,
}
);
console.log(animation);
animation.pause();
track.addEventListener("click", () => {
if (animation.playState === "paused") {
animation.play();
} else {
animation.pause();
}
});element.animate(keyframes,options)방식으로 web animation api를 짜주었다.
track에 addEventListener이벤트를 걸어 클릭했을때의 애니메이션 진행상태에 따라 다른 모션을 주도록하였다.
