GreenSock(GSAP) 애니메이션 기본 사항

트윈이란 정확히 무엇입니까?

"tween"이라는 단어를 처음 들었을 때 나는 그것이 무엇을 의미하는지 완전히 확신하지 못했습니다. 간단히 말해 트윈은 일련의 프레임입니다. 디지털 맥락에서 기본적으로 트윈은 애니메이션입니다.

어떻게 만들까요?

다행스럽게도 브라우저에서 트윈을 활용하는 데 도움이 되는 많은 라이브러리가 있습니다. 그러한 라이브러리 중 하나는 GreenSock입니다. 오늘은 .to() 및 .from() 에 대해 알아보고 곧 트위닝을 시작하겠습니다.

먼저 CDN에서 GreenSock을 가져와 HTML의 <script> 태그에 배치합니다. 일반 자바스크립트 파일 앞에 배치해야 합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js">
</script>

홈페이지 greensock.com에서 최신 버전을 확인하세요.

CDN은 gsap 개체를 제공하며console.log(gsap) 제공되는 다양한 방법을 살펴봅니다. 오늘은 "core"속성에서 트윈을 살펴보겠습니다.

.에게()

첫 번째 트윈은 gsap.to() 입니다. 두 개의 매개변수를 사용합니다.

대상 - 일반 CSS 선택기가 될 수 있습니다.

애니메이션을 적용할 속성과 값이 포함된 개체입니다.

gsap.to("svg:last-child", {
  duration: 1,
  x: 100
});

단위 값을 지정하지 않으면 gsap이 픽셀을 애니메이션합니다. 기본 지속 시간은 0.5초입니다.

한 가지 중요한 참고 사항은 .to()의 값이 트윈의 최종 위치가 되는 반면 CSS 값은 시작 위치가 된다는 것입니다.

.에서()

.to() 의 반대이므로 gsap 값이 시작점이 되고 CSS 위치가 목적지가 됩니다. 배경색에 애니메이션을 적용해 보겠습니다. double-barreled 속성 단어를 사용할 때 우리는 camelCasing 명명 규칙을 사용하여 gsap에서 선언합니다.

gsap.from(".square", {
  backgroundColor: "green",
  delay: 2,
});

지연 시간을 2로 사용하면 페이지가 로드된 후 2초 후에 애니메이션이 시작됩니다.

.에서부터()

트윈 2개만 볼 줄 알았는데?

음, 기술적으로 그렇습니다. .fromTo()는 상상할 수 있듯이 이 둘의 조합입니다. 이전에 CSS가 시작 또는 끝 위치를 어떻게 정의했는지 기억하십니까? 이 트윈을 사용하면 gsap에서 둘 다 정의할 수 있습니다. 여기에서 from 및 to 값 모두에 대해 개체를 전달합니다.
.fromTo() 를 사용하여 속성/변수에 대한 두 번째 개체에 지속 시간과 같은 특수 속성을 추가합니다.

gsap.fromTo(
 ".square", 
 { x: 50 }, 
 { x: 0, duration: 1 }
);

GreenSock은 정말 강력한 애니메이션 라이브러리입니다. 유료 계층이 있지만 프로젝트에서 많은 기능을 무료로 사용할 수 있습니다. codepen.io에서 유료 계층 기능을 무료로 사용할 수도 있습니다. 이 게시물이 트윈을 시작하는 데 도움이 되었기를 바랍니다. 추가 자습서를 계속 지켜봐 주십시오.