Greensock으로 웹에서 애니메이션하는 방법

웹에서 애니메이션을하는 수천 가지 방법이 있습니다. 우리는 이전에 다양한 애니메이션 기술의 비교를 다루었습니다. 오늘, 우리는 내가 좋아하는 방법 중 하나 인 Greensock 사용 방법 중 하나에 대한 단계별 가이드로 뛰어들 것입니다.

(그들은 나하거나 아무것도 지불하지 않습니다. 나는 단지 그들을 사용하는 것을 좋아합니다.)

다른 방법보다 Greensock을 선호하는 이유는 무엇입니까? 기술적으로 말하면, 그것은 종종 직업에 가장 적합한 도구입니다. 복잡한 움직임조차도 사용량은 매우 간단합니다. 내가 그것을 사용하는 것을 선호하는 몇 가지 이유는 다음과 같습니다.

• WebGL/Canvas/Three.JS 컨텍스트뿐만 아니라 DOM 요소에서도 사용할 수 있습니다.
• 완화는 매우 정교합니다. CSS 애니메이션은 2 개의 Bezier 핸들로 제한되어 있습니다. 즉, 바운스 효과를 원한다면 각 패스에 대해 키 프레임을 위아래로 위아래로 만들어야합니다. Greensock을 통해 여러 Bezier 핸들이 고급 효과를 만듭니다. 바운스는 한 줄의 코드입니다. 당신은 그들의 쉬운 비주얼 라이저를 확인함으로써 내가 의미하는 바를 볼 수 있습니다.
• 타임 라인에서 움직임을 시퀀싱 할 수 있습니다. CSS 애니메이션은 한 번에 몇 가지를 조정해야 할 때 약간의 스파게티를 얻을 수 있습니다. Greensock은 매우 읽기 쉽고 타임 라인 자체를 제어 할 수 있습니다. 애니메이션을 애니메이션 할 수도 있습니다! ?
• 이상한 크로스 브라우저 동작을 방지하기 위해 후드 아래에서 일부 계산을 수행 할뿐만 아니라 사양 지시가 사실이어야하는 것들이 그렇지 않아야합니다.
• 플러그인 형태의 많은 고급 기능을 제공하여 작업을 한 단계 더 발전시키고 싶을 때 사용할 수 있습니다.

사람들은 때때로 다른 모든 선택 에서이 특정 라이브러리를 사용하는 이유를 묻습니다. 그것은 대부분의 다른 사람들보다 더 나아가고 있습니다. 플래시가 여전히 일 이었기 때문에 주변에있었습니다. 이 데모 릴은 매우 고무적이며, 심각한 웹 애니메이터 가이 도구에 도달하는 경향이 있다는 점을 지적합니다.

다음은 웹에서 움직임을 만드는 방법에 대한 고장이며, 내가 만들 수있는 가장 작은 단위로 증류됩니다. 시작합시다!

DOM 요소를 애니메이션합니다

우리가

로 만든 공을 50%의 국경-라디우스 값으로 스타일로 고려하십시오. Greensock으로 확장하고 이동하는 방법은 다음과 같습니다.

 <div> </div>

 gsap.to ( '. ball', {
  기간 : 1,
  X : 200,
  스케일 : 2
})

이 경우 GREENSOCK (GSAP)에 몇 가지 다른 속성을 제공하는 클래스 .BallMove IT.TO ()로 요소를 가져 오라고 지시합니다. Transform : Translatex (200px)의 CSS 속성을 간소화 된 CSS 속성 : 200으로 단축했습니다 (유닛이 필요하지 않지만 문자열로 전달할 수 있음). 우리는 또한 쓰기 획득이 아닙니다 : scale (2). 다음은 애니메이션과 함께 사용하려는 변환과 해당 CSS 구문에 대한 참조입니다.

 X : 100 // 변환 : TranslateX (100px)
Y : 100 // 변환 : Translatey (100px)
Z : 100 // 변환 : Translatez (100px)
// 널 변환 해킹 또는 하드웨어 가속이 필요하지 않습니다.
// force3d : true. 이것을 설정하지 않으려면 force3d : false
스케일 : 2 // 변환 : 스케일 (2)
scalex : 2 // transform : scalex (2)
scaley : 2 // 변환 : scaley (2)
scalez : 2 // transform : scalez (2)
SKEW : 15 // 변환 : SKEW (15DEG)
skewx : 15 // transform : skewx (15deg)
Skewy : 15 // 변환 : Skewy (15deg)
회전 : 180 // 변환 : 회전 (180deg)
rotationx : 180 // transform : rotatex (180deg)
rotationy : 180 // transform : rotatey (180deg)
rotationz : 180 // transform : rotatez (180deg)
원근법 : 1000 // 변환 : 원근법 (1000px)
Transformorigin : '50% 50% '// Transform-Origin : 50% 50%

지속 시간은 당신이 생각할 수있는 것입니다. 그것은 1 초의 시간입니다.

그래서, 우리는 어떻게 SVG를 애니메이션 할 것인가? SVG와 같은 코드를 고려해 봅시다.

 <svg viewbox="0 0 500 400">
  <circle cx="80" cy="80" r="80"></circle>
</svg>

 gsap.to ( '. ball', {
  기간 : 1,
  X : 200,
  스케일 : 2
})

애니메이션 관점에서 실제로는 정확히 동일합니다 . Class.ballon으로 요소를 잡고 해당 속성을 번역합니다. SVG는 말 그대로 DOM 요소이므로, 우리는 그들 중 하나에 클래스를 때리고 같은 방식으로 애니메이션 할 수 있습니다!

엄청난! 우리는 가스로 요리합니다.

완화

나는 전에 내가 가장 좋아하는 기능 중 하나이라는 것이 전에 언급했습니다. 우리가 어떻게 사용할 것인지 살펴 보겠습니다.

원래 공을 가져 가자. 어쩌면 우리는 더 독특한 바운스 완화 중 하나를 시도하고 싶을 것입니다. 이것처럼 될 것입니다 :

 gsap.to ( '. ball', {
  기간 : 1.5,
  X : 200,
  스케일 : 2,
  편의 : '바운스'
})

그게 다야! 이 버전의 Greensock은 입구에 더 나은 사용을 사용한다고 가정하므로 기본값으로 적용됩니다. “바운스”를 문자열로 지정하면 레이스를 떠나는 것입니다.

당신은 우리가 또한 지속 시간을 조금 길게 보았을 것입니다. 공은 초기 상태와 끝 상태 사이에서 더 많은 "작업"을해야하기 때문입니다. 선형 또는 사인 완화에는 사랑 스럽지만 1 초 지속 시간은 바운스 나 탄력적 인 용이성에 너무 빠릅니다.

지연 및 타임 라인

기본 제외 팀 기능은 입구에 좋습니다. 호의적 인 출구는 어떻습니까? 그렇게합시다.

 gsap.to ( '. ball', {
  기간 : 1.5,
  X : 200,
  스케일 : 2,
  편의 : '바운스'
})

gsap.to ( '. ball', {
  기간 : 1.5,
  지연 : 1.5,
  x : 0,
  스케일 : 1,
  ease : 'back.inout (3)'
})

당신은 몇 가지 일이 일어나는 것을 보았을 것입니다. 예를 들어, 우리는 두 번째로 나오는 선을 사용하지 않았습니다 (Ease : 'back.inout (3)'). 대신, 우리는 또 다른 용이한 호출을 사용했습니다. 또한 Greensock의 Ease Visualizer 도구를 통해 볼 수 있듯이 구성 옵션을 통과했습니다. 그 편의성에 대한 기본 구성에만 국한되지 않기 때문입니다. 우리는 우리의 요구에 맞게 조정할 수 있습니다. 정돈된!

당신은 또한 우리가 지연을 사용하여 애니메이션을 묶었다는 것을 알았을 것입니다. 우리는 첫 번째 애니메이션 기간의 길이를 가져 왔고 다음 애니메이션이 일치하는 지연이 있는지 확인했습니다. 자, 그것은 여기서 작동하지만 꽤 취성합니다. 첫 번째 길이를 변경하려면 어떻게해야합니까? 글쎄, 이제 우리는 다시 돌아가서 다음 지연을 바꿔야합니다. 그 후 또 다른 애니메이션이 있다면 어떨까요? 그리고 그 후 또 하나? 글쎄, 우리는 다시 돌아가서 다른 모든 지연을 계산해야합니다. 그것은 많은 수동 작업입니다.

우리는 그 작동을 컴퓨터에 오프로드 할 수 있습니다. 내 더 복잡한 애니메이션 중 일부는 수백 개의 체인 애니메이션입니다! 일을 마치고 처음에 무언가를 조정하고 싶다면 모든 것을 다시 살펴보고 싶지 않습니다. 타임 라인 입력 :

 GSAP
  .Timeline ()
  .to ( '. ball', {
    기간 : 1.5,
    X : 200,
    스케일 : 2,
    편의 : "바운스"
  })
  .to ( '. ball', {
    기간 : 1.5,
    x : 0,
    스케일 : 1,
    ease : "back.inout (3)"
  });

이것은 타임 라인을 인스턴스화 한 다음 두 개의 애니메이션을 사로 잡습니다.

그러나 우리는 여전히 각 애니메이션에서 동일한 기간을 계속 사용하는 약간의 반복이 있습니다. 옵션이 타임 라인으로 전달되어 기본값을 작성하겠습니다.

 GSAP
  . 타임 라인 ({
    기본값 : {
      기간 : 1.5
    }
  })
  .to ( '. ball', {
    X : 200,
    스케일 : 2,
    편의 : "바운스"
  })
  .to ( '. ball', {
    x : 0,
    스케일 : 1,
    ease : "back.inout (3)"
  });

꽤 멋지다! 좋아, 아마도 당신은 아마도 이런 식으로 물건이 어떻게 지어 지는지보기 시작했을 것입니다. 애니메이션에서는 큰 일이 아닐 수도 있지만,이 간단한 기본값과 타임 라인은 코드를 관리 할 수있게 유지할 수 있습니다.

이제 우리 가이 움직임을 다른 방향으로 공으로 반영하고 싶다면 어떻게해야합니까? 다시 말해, 루프를 원한다면 어떻게해야합니까? 그때 우리는 단일 애니메이션이나 전체 타임 라인에 적용 할 수있는 addRepeat : -1입니다.

 GSAP
  . 타임 라인 ({
    반복 : -1,
    기본값 : {
      기간 : 1.5
    }
  })
  .to ( '. ball', {
    X : 200,
    스케일 : 2,
    편의 : "바운스"
  })
  .to ( '. ball', {
    x : 0,
    스케일 : 1,
    ease : "back.inout (3)"
  })
  .to ( '. ball', {
    X : -200,
    스케일 : 2,
    편의 : "바운스"
  })
  .to ( '. ball', {
    x : 0,
    스케일 : 1,
    ease : "back.inout (3)"
  });

우리는 또한 요요처럼 반복 할뿐만 아니라 반복 및 재생 및 재생을 할 수있었습니다. 그래서 우리는 이것을 요요라고 부릅니다. 요점을 명확하게하기 위해 첫 번째 애니메이션으로 이것을 보여 드리겠습니다. 당신은 그것이 앞으로 재생되는 것을 볼 수 있고, 그것은 반대로 재생됩니다.

 GSAP
  . 타임 라인 ({
    반복 : -1,
    요요 : 사실,
    기본값 : {
      기간 : 1.5
    }
  })
  .to ( '. ball', {
    X : 200,
    스케일 : 2,
    편의 : "바운스"
  })

겹치고 레이블

우리가 쉽게 애니메이션을 체인 할 수있는 것이 좋지만 실제 움직임은 이런 식으로 정확하게 작동하지 않습니다. 물 한 잔을 마시기 위해 방을 가로 질러 걸어 다니면 걷지 마십시오. 그럼 멈 춥니 다. 그런 다음 물을 집어 들으십시오. 그런 다음 마신다. 한 번의 연속 운동으로 일을 할 가능성이 높습니다. 따라서 움직임을 겹치고 한 번에 물건을 불어 넣는 방법에 대해 간단히 이야기합시다.

타임 라인에서 사물이 조금 전후에 발사되기를 원한다면, 우리는 증분 또는 감소기를 사용할 수 있습니다. 우리가 다음 예제를 사용하면 3 개의 공이 애니메이션을하는 것을 보여 주면 약간 뻣뻣한 느낌이 듭니다.

 GSAP
  . 타임 라인 ({
    기본값 : {
      기간 : 1.5
    }
  })
  .to ( '. ball', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  })
  .to ( '. ball2', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  })
  .to ( '. ball3', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  })

우리가 줄로 통과 한 감소기를 사용하여 움직임과 약간 겹치면 상황이 더 부드럽습니다.

 GSAP
  . 타임 라인 ({
    기본값 : {
      기간 : 1.5
    }
  })
  .to ( '. ball', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  })
  .to ( '. ball2', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  }, '-= 1')
  .to ( '. ball3', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  }, '-= 1')

우리가 할 수있는 또 다른 방법은 라벨이라는 것을 사용하는 것입니다. 라벨은 애니메이션의 플레이 헤드에서 특정 시점에서 물건이 발사되도록합니다. 다음과 같이 보입니다 : .add ( 'labelname')

 GSAP
  . 타임 라인 ({
    기본값 : {
      기간 : 1.5
    }
  })
  .add ( '시작')
  .to ( '. ball', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  }, '시작')
  .to ( '. ball2', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  }, '시작')
  .to ( '. ball3', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  }, '시작') 

우리는 라벨에서 증가하고 감소 할 수도 있습니다. 나는 실제로 내 애니메이션에서 이것을 많이한다. 이 '스타트 = 0.25'처럼 보입니다.

 GSAP
  . 타임 라인 ({
    기본값 : {
      기간 : 1.5
    }
  })
  .add ( '시작')
  .to ( '. ball', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  }, '시작')
  .to ( '. ball2', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  }, 'start = 0.25')
  .to ( '. ball3', {
    x : 300,
    스케일 : 2,
    편의 : "바운스"
  }, 'start = 0.5') 
 

아휴! 우리는 이것으로 많은 일을 할 수 있습니다! 다음은 바닐라 JavaScript를 사용한 약간의 상호 작용과 함께 이러한 구내를 많이 모은 애니메이션의 예입니다. 종을 클릭하십시오.

Greensock을 사용한 프레임 워크 기반 애니메이션을 더 찾고 있다면 Vue에서 이것을 다루는 아나티클이 있습니다.

그러나 스테거, SVG 변형, SVG 그리기, 화면 주위에 물건을 던지고, 경로를 따라 물건을 움직이고, 텍스트를 애니메이션하는 등 우리가 다루지 않은 것이 여전히 많습니다. 나는 그 세부 사항에 대한 Togreensock의 문서로 향하는 것을 제안합니다. 또한 Frontend Masters에 Acourse가 있습니다.이 모든 것을 훨씬 더 깊이로 덮고 재료는 내 github에 소스를 뿌립니다. 나는 또한 당신이 포크하고 놀 수있는 오픈 소스 인 많은 펜을 가지고 있습니다.

웹에서 애니메이션 작업을 시작하기를 바랍니다. 나는 당신이 무엇을 만드는지 기다릴 수 없습니다!

위 내용은 Greensock으로 웹에서 애니메이션하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!