애니메이션 코드를 효율적으로 작성하기 위한 팁 | CSS-TRICKS

애니메이션 라이브러리 사용

일부 개발자는 CSS 전환, CSS 애니메이션 또는 웹 애니메이션 API( WAAPI ) 와 같은 기본 브라우저 기술을 사용하여 라이브러리를 로드하지 않고도 동일한 작업을 수행 할 수 있기 때문에 애니메이션 라이브러리를 사용하는 것이 낭비라고 생각합니다. 어떤 경우에는 사실입니다. 그러나 고려해야 할 몇 가지 다른 요소는 다음과 같습니다.

• 브라우저 버그, 불일치 및 호환성 : GSAP와 같은 애니메이션 라이브러리는 이러한 문제를 해결하고 보편적으로 호환됩니다. IE9에서 모션 경로를 사용할 수도 있습니다! SVG 요소의 transform-origin 처리, 경로 스트로크 측정, Safari의 3D origin 등, 크로스 브라우저 문제와 관련하여 많은 문제가 있는 영역이 있습니다 .
• 애니메이션 워크 플로우 : GSAP와 같은 도구를 사용하면 적당히 복잡한 애니메이션도 훨씬 빠르고 재미있게 제작할 수 있습니다. 애니메이션을 모듈화하고, 원하는만큼 깊게 중첩하고, 타이밍을 자동으로 조정할 수 있습니다. 이것은 실험을 훨씬 쉽게 만듭니다. 저를 믿으세요. 일단 CSS와 GSAP에서 애니메이션 시퀀스를 만들어 보면 제가 의미하는 바를 알 수있을 것입니다. 이후 편집 속도도 더 빠릅니다.
• DOM을 넘어서는 애니메이트 : 캔버스, WebGL, 일반 객체 및 복잡한 문자열은 기본 기술로 애니메이트 할 수 없습니다. 모든 애니메이션에 하나의 일관된 도구를 사용하는 것이 훨씬 더 깔끔합니다. 
• 런타임 제어 : 좋은 애니메이션 라이브러리를 사용하면 전체 애니메이션 시퀀스의 속도를 일시 중지, 다시 시작, 되감기, 탐색 또는 점진적으로 변경할 수 있습니다. 각 transform 구성 요소를 독립적으로 제어 할 수 있습니다 (회전, 배율, x, y, 기울이기, 등). 또한 언제든지 해당 값을 검색 할 수 있습니다. JavaScript 애니메이션은 최고의 유연성을 제공합니다.
• 이징 옵션 (바운스, 탄성 등) : CSS는 이즈를 위해 두 개의 제어점 만 제공합니다. GSAP의 CustomEase를 사용하면 말 그대로 상상할 수있는 모든 용이성을 만들 수 있습니다. 
• 지연 평활화 : GSAP는 CPU가 정체될 경우 점프를 방지하가 위해 절대 타이밍을 우선시하거나 즉시 상황을 조정할 수 있습니다.
• 고급 기능 : GSAP를 사용하면 SVG 모핑, 물리/관성 추가, 브라우저에서 직접 모션 경로 편집, 위치 인식 스태거 사용 등을 쉽게 수행 할 수 있습니다.

 

업계 최고의 애니메이터 대부분은 수년 동안 이와 같은 것을 배웠기 때문에 GSAP와 같은 도구를 사용합니다. 아주 기본적인 애니메이션을 넘어 서면 JavaScript 라이브러리는 당신의 삶을 훨씬 더 쉽게 만들고 완전히 새로운 가능성을 열어 줄 것입니다. 

 

 

타임 라인 사용

좋은 애니메이션 라이브러리는 개별 애니메이션(트윈 이라고 함)을 만드는 방법과 타임 라인에서 애니메이션을 시퀀스하는 방법을 제공합니다 . 타임 라인을 트윈을 위한 컨테이너와 같이 생각하여 서로를 기준으로 배치합니다. 

애니메이션을 시퀀스로 실행해야 할 때마다 타임 라인을 사용해야 합니다.

const tl = gsap.timeline(); 
tl.to(".box", { duration: 1, x: 100 })
  .to(".box", { duration: 1, backgroundColor: "#f38630" }, "+=0.5") 
  .to(".box", { duration: 1, x: 0, rotation: -360 }, "+=0.5")

 

기본적으로 GSAP에서는 타임 라인에 추가된 트윈이 실행되기 전에 이전 트윈이 완료 될 때까지 기다립니다. +=0.5은 추가 오프셋 또는 0.5초 지연을 추가하므로 첫 번째 트윈의 지속 시간에 관계없이 첫 번째 트윈이 완료된 후 0.5초 후에 두 번째 트윈이 시작됩니다.

트윈 사이의 시간을 1초로 늘리려면 +=0.5를 +=1로 변경하면 됩니다! 아주 쉽습니다. 이 접근 방식을 사용하면 이전 기간을 결합하기 위해 계산을 수행하는 것에 대해 걱정하지 않고 애니메이션을 빠르게 반복 할 수 있습니다.

 

 

상대 값 사용

“상대 값”이란 세 가지를 의미합니다.

1. 현재 값을 기준으로 값을 애니메이션합니다. GSAP는 이에 대해 += 및 -= 접두사를 인식합니다. 따라서 x: "+=200"는 현재 x에 200 단위(일반적으로 픽셀)를 추가합니다 x. 그리고 x: "-=200" 현재 x 값에서 200을 뺍니다. 이 기능은 트윈을 서로 기준으로 배치 할 때 GSAP의 위치 매개 변수에도 유용합니다.
2. 뷰포트 크기 변화에 값이 반응해야 하는 경우 상대 단위(vw, vh 및 경우에 따라 % 등)를 사용합니다.
3. 가능하면 .fromTo() 대신 .to() 및 .from()과 같은 메소드를 사용하여 시작 또는 종료 값이 현재 값에서 동적으로 채워지도록 합니다. 이렇게 하면 모든 트윈에서 시작 및 종료 값을 선언할 필요가 없습니다. 예를 들어 색상이 다른 요소가 여러 개 있는 경우 gsap.to(".class", {backgroundColor: "black" }) 처럼 모두 검은색으로 애니메이션 할 수 있습니다.

 

 

키 프레임 사용

동일한 대상을 연속적으로 반복해서 애니메이션하는 경우 keyframes를 사용하기에 완벽한 시기입니다! 다음과 같이합니다.

gsap.to(".box", { keyframes: [
  { duration: 1, x: 100 },
  { duration: 1, backgroundColor: "#f38630", delay: 0.5 }, 
  { duration: 1, x: 0, rotation: -360, delay: 0.5 }
]});

 

타임 라인이 필요하지 않습니다! 트윈 간격을 두기 위해 각 keyframes에서 delay 속성을 사용하기만 하면 됩니다. (음수를 사용하면 중첩을 생성할 수 있습니다.)

 

 

스마트 기본값 사용

GSAP에는 ease("power1.out") 및 duration(0.5초)과 같은 속성에 대한 기본값이 있습니다. 따라서 다음은 0.5초 동안 애니메이션되는 유효한 트윈입니다.

gsap.to(".box", { color: "black" })

 

GSAP의 전역 기본값을 변경하려면 gsap.defaults()을 사용하세요.

// linear ease와 1초의 duration을 사용하세요.
gsap.defaults({ ease: "none", duration: 1 });

이것은 편리할 수 ​​있지만 특정 타임 라인에 대한 기본값을 설정하여 하위에만 영향을 미치도록하는 것이 더 일반적입니다. 예를 들어 부모 타임 라인에서 기본값을 설정하여 하위 트윈 각각에 duration: 1을 입력하는 것을 피할 수 있습니다.

const tl = gsap.timeline({ defaults: { duration: 1 } }); 
tl.to(".box", { x: 100 })
  .to(".box", { backgroundColor: "#f38630" }, "+=0.5") 
  .to(".box", { x: 0, rotation: -360 }, "+=0.5")

 

 

한 번에 여러 요소에 애니메이션 적용

.box의 동일한 클래스를 공유하는 여러 요소가 있는 경우 위 코드는 모든 요소에 동시에 애니메이션을 적용합니다!

또한 더 복잡한 선택자 문자열을 사용하여 다른 선택자를 가진 여러 요소를 선택할 수도 있습니다.

gsap.to(".box, .circle", { ... });

또는 요소 유형(선택자 문자열, 변수 참조, 일반 객체 등)이 동일한 변수 참조 배열을 전달할 수 있습니다.

var box = document.querySelector(".box");
var circle = document.querySelector(".circle");

// some time later…
gsap.to([box, circle], { ... });

 

 

함수 기반 값, 스 태거 및 / 또는 루프 사용

함수 기반 값

거의 모든 속성에 숫자/문자열 대신 함수를 사용하면 GSAP가 트윈을 처음 렌더링 할 때 각 대상에 대해 해당 함수를 한 번씩 호출합니다. 또한 함수가 반환하는 모든 것을 속성 값으로 사용합니다! 이것은 단일 트윈을 사용하여 다양한 애니메이션을 만들고 분산을 추가하는 데 매우 유용 할 수 있습니다.

GSAP는 다음 매개 변수를 함수에 전달합니다.

1. 인덱스
2. 영향을 받는 특정 요소
3. 트윈의 영향을받는 모든 요소의 배열

 

예를 들어 인덱스를 기반으로 이동 방향을 설정할 수 있습니다.

var yMove = 50;
gsap.to(".box", {
  delay: 0.5,
  duration: 1,
  y: function(i, elem, boxes) {
    return i % 2 === 1 ? -yMove : yMove;
  }
});

 

또는 배열에서 항목을 선택할 수 있습니다.

var colors = ["#3498db", "#27ae60", "#f1c40f"];
gsap.to(".box", {
  delay: 0.5,
  duration: 1,
  backgroundColor: function(i, elem, boxes) {
    return colors[i % 3];
  }
});

 

스태거

시작 시간을 엇갈리게 오프셋하여 애니메이션을 보다 역동적이고 흥미롭게 보이게 만드세요. 단일 트윈에서 간단한 엇갈린 오프셋(시차 간격 띄우기)의 경우 각 애니메이션의 시작 시간 사이에 0.2 초를 추가하려면 stagger: 0.2를 사용하면 됩니다.

var yMove = 50;
gsap.to(".box", {
  delay: 0.5,
  duration: 1,
  stagger: 0.2,
  y: function(i, elem, boxes) {
    return i % 2 === 1 ? -yMove : yMove;
  }
});

또한 개체를 전달하여 그리드 중심에서 바깥으로 발산하거나 타이밍을 무작위로 지정하는 등 더 복잡한 스태거 효과를 얻을 수 있습니다.

GSAP의 스 태거에 대한 자세한 내용은 스태거 문서를 확인하세요 .

 

루프

애니메이션을 만들거나 적용하기 위해 요소 목록을 반복하는 것이 도움이 될 수 있습니다. 특히 사용자의 상호 작용과 같은 일부 이벤트를 기반으로 하는 경우 더욱 그렇습니다. 

항목 목록을 반복하려면 .forEach()를 사용하는 것이 가장 쉽습니다. 그러나 IE에서 .querySelectorAll()로 선택한 요소에서는 지원되지 않으므로 대신 GSAP의 utils.toArray() 기능을 사용할 수 있습니다 .

아래 예에서는 각 컨테이너(.container)를 반복하여 해당 컨테이너로 범위가 지정된 자식(h1, .content)에 애니메이션을 추가합니다.

gsap.utils.toArray(".container").forEach((container, i) => {
  const header = container.querySelector("h1");
  const content = container.querySelector(".content");
  
  gsap.to([header, content], {autoAlpha: 1, duration: 0.5, stagger: 1, delay: i * 2});
});

 

 

애니메이션 모듈화

모듈화는 프로그래밍의 핵심 원칙 중 하나입니다. 또한 작고 이해하기 쉬운 청크를 만들어 더 큰 창작물로 결합 할 수 있는 동시에 깨끗하고 재사용 가능하며 쉽게 수정할 수 있습니다. 또한 매개 변수와 함수 범위를 사용하여 코드의 재사용성을 높일 수 있습니다.

 

Functions

함수를 사용하여 트윈 또는 타임 라인을 반환한 다음 마스터 타임 라인에 삽입합니다.

function doAnimation() {
  // 함수에 전달 된 인수를 사용하여 계산과 같은 작업을 수행합니다.
  
  // 위의 계산을 사용하여 트윈을 반환합니다.
  return gsap.to(".myElem", { duration: 1, color: "red"});
}

tl.add( doAnimation() );

 

타임 라인을 중첩하면 애니메이션 방식을 혁신적으로 바꿀 수 있습니다. 코드를 모듈화하고 읽기 쉽게 유지하면서 정말 복잡한 애니메이션을 쉽게 시퀀싱 할 수 있습니다 .

function doAnimation() {
  const tl = gsap.timeline();
  tl.to(...);
  tl.to(...);
  // ...원하는만큼의 애니메이션!

  // 완료되면 타임 라인을 반환합니다.
  return tl;
}

const master = gsap.timeline();
master.add( doAnimation() );
master.add( doAnotherAnimation() );
// 더 많은 타임 라인을 추가하세요!

 

다음 데모는 Carl Schooff의 "Writing Smarter Animation Code"게시물에서 수정 된 실제 사용 사례 입니다. (데모 확인하기)

다음 데모는 Craig Roblewsky의 Star Wars 테마를 사용한 동일한 기술을 보여주는 더 복잡한 데모입니다. (데모 확인하기)

 

애니메이션 빌드 루틴을 함수 안에 래핑하면 애니메이션(예 : 크기 조정)을 쉽게 재현 할 수 있습니다!

var tl; // 타임 라인에 대한 접근 가능한 참조를 유지합니다.

function buildAnimation() {
  var time = tl ? tl.time() : 0; // 존재하는 경우 이전 시간을 저장

  // 존재하는 경우 이전 타임 라인을 제거
  if (tl) {
    tl.kill();
  }

  // 새로운 타임 라인 생성
  tl = gsap.timeline();
  tl.to(...)
    .to(...); // 애니메이션 작업을 합니다.
  tl.time(time); // 플레이헤드를 원래 위치에 맞춥니다.
}

buildAnimation(); // 일을 시작하다

window.addEventListener("resize", buildAnimation); // resize 이벤트

 

동일한 코드를 반복하고 한 변수를 다른 변수(일반적으로 부호)로 전환하는 경우 코드를 건조 상태로 유지하려면 일반 함수를 만들거나 루프를 사용해야 합니다(반복하지 마십시오.

 

 

효과

효과를 사용하면 사용자 지정 애니메이션을 새로운 대상 및 구성으로 언제든지 호출할 수 있는 명명된 효과로 만들 수 있습니다. 이것은 애니메이션에 대한 표준이 있거나 다른 컨텍스트에서 동일한 애니메이션을 호출할 때 특히 유용합니다.

다음은 개념을 보여주기 위한 초간단 "페이드" 효과입니다.

// GSAP에 효과 등록 :
gsap.registerEffect({
    name: "fade",
    defaults: {duration: 2}, // 기본값은 아래 효과에 전달 된 "config" 객체에 적용됩니다.
    effect: (targets, config) => {
        return gsap.to(targets, {duration: config.duration, opacity:0});
    }
});

// 이제 다음과 같이 사용할 수 있습니다 :
gsap.effects.fade(".box");
// 또는 기본값을 재정의합니다 :
gsap.effects.fade(".box", {duration: 1});

 

 

제어 방법 사용

GSAP는 트윈 또는 타임 라인의 상태를 제어하는 ​​다양한 방법을 제공합니다. 여기에는 .play(), .pause(), .reverse(), .progress(), .seek(), .restart(), .timeScale() 및 기타 여러 가지가 포함됩니다.

제어 메서드를 사용하면 애니메이션 간의 전환이 더 유연해지고 (예 : 부분적으로 반전 할 수 있음) 성능이 향상됩니다(매번 새 인스턴스를 만드는 대신 동일한 트윈/타임 라인을 재사용하여). 또한 애니메이션 상태를 보다 세밀하게 제어함으로써 디버깅에도 도움이 될 수 있습니다.

다음은 간단한 예입니다.

var tween = gsap.to(".green", {
  duration: 4, 
  x: 750, 
  rotation: 360, 
  ease: "none", 
  paused: true
});

// 트윈 인스턴스를 제어하기위한 클릭 핸들러
document.querySelector("#play").onclick = () => tween.play();
document.querySelector("#pause").onclick = () => tween.pause();
document.querySelector("#resume").onclick = () => tween.resume();
document.querySelector("#reverse").onclick = () => tween.reverse();
document.querySelector("#restart").onclick = () => tween.restart();

하나의 놀라운 사용 사례는 타임 라인의 timeScale을 트위닝(조정)하는 것 입니다!

 

사용 사례 : 애니메이션을 트리거하는 상호 작용 이벤트

사용자 상호 작용 이벤트에 대한 이벤트 리스너 내에서 제어 메서드를 사용하여 애니메이션의 재생 상태를 세밀하게 제어 할 수 있습니다.

아래 예에서는 각 요소에 대한 타임 라인을 만들고 (모든 인스턴스에서 동일한 애니메이션이 발생하지 않도록) 해당 타임 라인에 대한 참조를 요소 자체에 연결한 다음 요소가 홀딩되면 관련 타임 라인을 재생하고 마우스가 나갈 때 되돌립니다.

gsap.set(".information", {yPercent: 100});

gsap.utils.toArray(".container").forEach(container => {
  let info = container.querySelector(".information"),
      silhouette = container.querySelector(".silhouette .cover"),
      tl = gsap.timeline({ paused: true });
  
  tl.to(info, { yPercent: 0 })
    .to(silhouette, { opacity: 0 }, 0);
  
  container.addEventListener("mouseenter", () => tl.play() );
  container.addEventListener("mouseleave", () => tl.reverse() );
});

 

사용 사례 : 타임 라인의 여러 상태 간 애니메이션

애니메이션 세트가 동일한 요소의 동일한 속성에 영향을 주지만 특정 시퀀스 (예 : 각각 마우스 오버/마우스 아웃 상태가 있는 활성/비활성 상태)에만 영향을 미치도록 할 수 있습니다. 관리하기가 까다로울 수 있습니다. 타임 라인의 상태와 제어 이벤트를 사용하여 단순화할 수 있습니다.

const menu_dur = 0.3,
      menu_btn_anim = gsap.timeline({paused: true, defaults: {duration: menu_dur}}),
      menu_btn = document.querySelector(".menu_button");

menu_btn_anim
  .to("#x_left", {drawSVG:"0%"}, 0)
  .fromTo("#top_right,#middle_left, #middle_right, #bottom_left", {autoAlpha:1, drawSVG:"0%"}, {drawSVG:"100%"}, 0)
  .addLabel("hover")
  .to("#x_right, #x_left", {autoAlpha:1, drawSVG:"100%"}, "hover")
  .to(["#top_right,#middle_left, #middle_right, #bottom_left", "#top_left", "#bottom_right"], {drawSVG:"0%"}, "hover")

menu_btn.addEventListener("mouseenter", function() {
  if(!isClicked) {
    menu_btn_anim.tweenTo("hover");
  } else {
    gsap.to(menu_btn, {duration: menu_dur, autoAlpha: 0.4});
  }
});

menu_btn.addEventListener("mouseleave", function() {
  if(!isClicked) {
    menu_btn_anim.reverse();
  } else {
    gsap.to(menu_btn, {duration: menu_dur, autoAlpha: 1});
  }
});
 
var isClicked = false;
menu_btn.addEventListener("click", function() {
  if(!isClicked) {
    menu_btn_anim.play();
    gsap.to(menu_btn, {duration: menu_dur, autoAlpha: 0.4});
  } else {
    menu_btn_anim.tweenTo("hover");
    gsap.to(menu_btn, {duration: menu_dur, autoAlpha: 1});
  }
  isClicked = !isClicked;
});

 

사용 사례 : 스크롤 위치를 기반으로 애니메이션

제어 방법을 사용하여 스크롤 위치에 따라 애니메이션을 쉽게 실행할 수 있습니다. 예를 들어 이 데모는 스크롤 위치에 도달하면 전체 애니메이션을 재생합니다.

const tl = gsap.timeline({paused: true});
tl.from("h1", {scale: 0.7, autoAlpha: 0, duration: 1});

function animateAtScrollPos() {
  if(scrollY > 100) {
    tl.play();
    document.removeEventListener("scroll", animateAtScrollPos);
  }
}
document.addEventListener("scroll", animateAtScrollPos);

 

더 멋진 스크롤 효과를 위해 애니메이션 진행 상황을 스크롤 위치에 첨부 ​​할 수도 있습니다!

const tl = gsap.timeline({paused: true});
tl.from("h1", {scale: 0.7, autoAlpha: 0});


const startY = innerHeight / 10;
const finishDistance = innerHeight / 5;
function animateAtScrollPos() {
  tl.progress((scrollY - startY) / finishDistance);
}
document.addEventListener("scroll", animateAtScrollPos);

 

하지만 이렇게 하려면 성능상의 이유로 스크롤 리스너를 조절하는 것이 가장 좋습니다.

// 사용할 애니메이션
const tl = gsap.timeline({paused: true});
tl.from("h1", {scale: 0.7, autoAlpha: 0});

// 페이지 스크롤의 시작 및 끝 위치
const startY = innerHeight / 10;
const finishDistance = innerHeight / 5;

// 스크롤 이벤트 리스너
document.addEventListener("scroll", function() {
  // 업데이트가 너무 자주 발생하지 않도록 방지 (스크롤 이벤트 조절)
  if (!requestId) {
    requestId = requestAnimationFrame(update);
  }
});

update();

function update() {
  // Update our animation
  tl.progress((scrollY - startY) / finishDistance);
  
  // Let the scroll event fire again
  requestId = null;
}

 

그러나 스크롤 애니메이션을 할 때마다 설정하는 것은 번거 롭습니다. ScrollTrigger 라는 GreenSock의 공식 스크롤 플러그인을 사용 하여이 작업을 수행 할 수 있습니다.

보너스 팁 : GSAP의 플러그인, 유틸리티 메서드 및 도우미 기능 사용

GSAP 플러그인은 GSAP의 핵심에 추가 기능을 추가합니다. 일부 플러그인은 PixiJS 또는 EaselJS와 같은 렌더링 라이브러리 작업을 더 쉽게 해주는 반면, 다른 플러그인은 SVG 모핑, 드래그 앤 드롭 기능 등과 같은 강력한 기능을 추가합니다. 이렇게하면 GSAP 코어를 비교적 작게 유지하고 필요할 때 기능을 추가 할 수 있습니다.

플러그인

ScrollTrigger 는 최소한의 코드로 놀라운 스크롤 기반 애니메이션을 만듭니다. 또는 애니메이션과 관련이없는 경우에도 스크롤 관련 항목을 트리거합니다.

 

MorphSVG 는 포인트 수에 관계없이 두 SVG 모양 사이를 모핑하고 모양이 모핑되는 방식을 미세하게 제어 할 수 있습니다.

 

DrawSVG 는 SVG 요소의 획을 점진적으로 드러내거나 숨겨서 그려지는 것처럼 보이게합니다. 일반적인 스트로크 대시 오프셋 애니메이션에 영향을 미치는 다양한 브라우저 버그를 해결합니다.

 

MotionPath 는 모든 브라우저 에서 모션 경로를 따라 모든 것 (SVG, DOM, 캔버스, 일반 개체 등)에 애니메이션을 적용 합니다. MotionPathHelper를 사용하여 브라우저에서 경로를 편집 할 수도 있습니다 !

 

GSDevTools 는 고급 재생 컨트롤, 키보드 단축키, 글로벌 동기화 등을 갖춘 GSAP 애니메이션과 상호 작용하고 디버깅하기위한 시각적 UI를 제공합니다.

 

Draggable 은 마우스 또는 터치 이벤트를 사용하여 거의 모든 DOM 요소를 드래그 가능, 회전 가능, 던지기 가능 또는 플릭 스크롤 가능하게 만드는 놀랍도록 간단한 방법을 제공합니다. Draggable은 InertiaPlugin 과 아름답게 (그리고 선택적으로) 통합 되어 사용자가 운동량에 따라 부드럽게 움직이고 감속 할 수 있습니다.

 

CustomEase ( CustomBounce 및 CustomWiggle 과 함께 )는 원하는 이즈 를 등록 할 수 있도록함으로써 GSAP의 이미 광범위한 이징 기능에 추가됩니다 .

SplitText 는 HTML 텍스트를 문자, 단어 및 줄로 분할 할 수있는 사용하기 쉬운 JavaScript 유틸리티입니다. 사용하기 쉽고 매우 유연하며 IE9까지 거슬러 올라가며 특수 문자를 처리합니다.

 

ScrambleText 는 임의의 문자를 사용하여 DOM 요소의 텍스트를 스크램블하여 일정한 간격으로 새로운 임의의 문자를 새로 고치는 동시에 트윈 과정에서 새 텍스트 (또는 원본)를 점진적으로 표시합니다. 시각적으로는 텍스트 문자열을 해독하는 컴퓨터처럼 보입니다.

 

Physics2D를 사용하면 특정 값이 아닌 속도와 가속도를 기준으로 요소의 위치를 ​​트위닝 할 수 있습니다. PhysicsProps 는 비슷하지만 2D 좌표뿐만 아니라 모든 속성에서 작동합니다.

 

유틸리티 방법

GSAP에는 몇 가지 일반적인 작업을 더 쉽게 할 수 있는 기본 제공 유틸리티 메서드 가 있습니다. 대부분은 특정 방식으로 값을 조작하는 데 중점을 두므로 애니메이션 값을 생성하거나 수정할 때 특히 유용 할 수 있습니다. 내가 가장 자주 사용하는 사람은 .wrap(), .random, .interpolate(), .distribute(), .pipe(), 그리고 .unitize(), 거기에 있지만, 많은 사람들이 당신이 도움이 될 수.

도우미 기능

비슷한 관점에서 보면 GSAP의 핵심에 내장되어 있지는 않지만 GreenSock이 특정 사용 사례를 처리하기 위해 수년에 걸쳐 만든 몇 가지 도우미 기능 이 있습니다. 이러한 함수를 사용하면 애니메이션을 쉽게 뒤집고, 이즈 곡선을 기반으로 난수를 반환하고, 두 이즈 곡선을 혼합하는 등의 작업을 쉽게 수행 할 수 있습니다. 나는 그들을 확인하는 것이 좋습니다 !

결론

끝까지 해냈습니다! 바라건대, 당신은 그 과정에서 한두 가지를 배웠고이 기사는 앞으로도 계속해서 당신에게 자원이 될 것입니다.

항상 그렇듯이 GSAP에 대한 질문이있는 경우 GreenSock 포럼을 방문하십시오 . 그들은 매우 도움이되고 환영합니다! GreenSock의 직원으로서 자주 어울리는 곳입니다. 나는 애니메이션 관련 도전을 가진 사람들을 돕는 것을 좋아합니다!