Greensock 플러그인으로 쉽게 만들어진 멋진 웹 애니메이션

Greensock 플러그인을 사용하여 멋진 웹 애니메이션 잠금 해제 : A Deep Dive 이 튜토리얼은 Greensock (GSAP)의 강력한 플러그인을 탐색하여 전통적인 CSS 또는 Smil과 비교하여 복잡한 웹 애니메이션에 대한 간소화 된 접근 방식을 제공합니다. 우리는 주요 플러그인을 다루고 전문가 급 결과를 효율적으로 달성하는 방법을 보여줍니다.

이 할부는 여러 탁월한 GSAP 플러그인에 중점을 둡니다

Bezierplugin : 곡선 베 지어 경로를 따라 손쉬운 애니메이션 요소, 일관된 크로스 브라우저 호환성을 보장하고 CSS 또는 SMIL의 한계를 능가합니다.

Draggable & ThrowPropsplugin :

탁월한 성능과 광범위한 장치/브라우저 지원을 갖춘 대화식, 물리 기반 드래그 앤 드롭 애니메이션 빌드.

Drawsvgplugin :

동적 SVG 스트로크 애니메이션을 만들어 CSS보다 우수한 제어 및 유연성을 제공합니다. 특히 반응 형 디자인에 유리합니다.
• Morphsvgplugin : SVG 모양 사이의 원활하게 전환, 최소한의 코드로 복잡한 모핑 효과를 단순화하고, 다양한 포인트 수를 가진 경로를 처리하기까지합니다. SplitText :
개별 조작을 위해 텍스트를 줄, 단어 또는 문자로 나누어 텍스트 애니메이션 효과를 생성합니다.
• 이 플러그인 마스터 링은 복잡한 웹 애니메이션의 개발 시간이 크게 줄어 듭니다. Bezierplugin 가있는 경로를 따라 애니메이션 사전 정의 된 경로 (곡선, 지그재그 등)를 따라 물체를 애니메이션하면 현실감이 추가됩니다. Smil은 구식이며 CSS 지원은 제한되어 있지만 Bezierplugin은 강력한 브라우저 솔루션을 제공합니다. Tweenmax에 포함 된 무료 플러그인입니다
Bezierplugin 기본 사항 :
• html에 트윈 삭스를 포함시킵니다. 기본 구문은 다음과 같습니다 수많은 좌표의 경우 변수로 캐시하십시오 'x'및 'y'사용을 사용하는 요소의 현재 위치에 대한 위치를 좌표합니다. Bezierplugin은 (좌표가 자석 역할) 및
(기본값, 경로 장력에
• 를 사용)를 제공합니다. 경로를 따라 요소를 회전시킵니다. Codepen 데모는 이러한 특성을 보여줍니다 Codepen Demo 참조 Greensock 프리미엄 플러그인 및 유틸리티
Tweenmax는 많은 것을 제공하지만 Club Greensock 회원은 프리미엄 플러그인 및 유틸리티를 잠금 해제합니다. 놀랍게도 녹색 회원 자격은 이러한 리소스를 다운로드하기위한 액세스 권한을 부여합니다. 그러나 Codepen Demos는 Codepen 환경 내에서 프리미엄 플러그인을 무료로 실험 할 수 있습니다.



드래그 가능하고 드래그 앤 드롭을 드래그 앤 드롭

Draggable은 드래그 앤 드롭 애니메이션을 단순화하여 크로스 브라우저 호환성, 터치 스크린 지원 및 성능을 제공합니다. ThrowPropsplugin은 매끄럽고 물리 기반 글라이딩을 추가합니다 <:> 기본 구현 : 로 움직임을 제한하고 : 로 활공 할 수 있습니다

(수평) 또는 는 회전 드래그를 활성화합니다

Codepen Demo

참조

Drawsvgplugin이있는 라이브 드로킹 SVG 스트로크 drawsvgplugin은 SVG 드로잉 자체의 효과를 만듭니다.

<code class="language-javascript">TweenMax.to(document.getElementById('myDiv'), 5, {
  bezier:[
    {left:100, top:250}, 
    {left:300, top:0}, 
    {left:500, top:400}
  ], 
  ease:Power1.easeInOut
});</code>

가없는 간단한 모양을 처리하고 반응 형 스케일링에 적응하여 CSS 제한을 능가합니다. <:> 기본 사용 :

SVG에 정의 된 스트로크가 있는지 확인하십시오 (SVG 또는 CSS). GSAP의 스agger 방법을 사용하여 여러 스트로크를 비틀 거리십시오 bounds Codepen Demo throwProps 참조 Morphsvgplugin으로 변화하는 모양

<code class="language-javascript">const points = [ /* ... your points */ ];
TweenMax.to(document.getElementById('myDiv'), 5, { bezier: points, ease:Power1.easeInOut });</code>

morphsvgplugin은 하나의 SVG 모양을 다른 포인트 수로도 다른 것으로 모르고 있습니다. <:> 간단한 사용 :

당신은 경로 데이터를 직접 제공하거나 간단한 모양에 type: 'x'를 사용할 수 있습니다. type: 'y' Codepen Demo type: 'rotation' 참조 SplitText

가있는 재미있는 텍스트 효과 splittext는 대상 애니메이션의 줄, 단어 또는 문자로 텍스트를 분할합니다. <:> 기본 사용 : animate ,

또는

개별적으로. 애니메이션 후 를 사용하여 추가 마크 업을 제거하십시오.

Codepen Demo

참조 결론 getTotalLength()

Greensock의 플러그인을 사용하면 정교한 웹 애니메이션을 효율적으로 만들 수 있습니다. 문서 및 커뮤니티 포럼을 탐색하여 기능을 마스터하고 웹 디자인을 높이십시오. 자리 표시 자 코드펜 링크를 생성 된 데모에 대한 실제 링크로 교체해야합니다.

위 내용은 Greensock 플러그인으로 쉽게 만들어진 멋진 웹 애니메이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!