Svelte 및 Spring 애니메이션

Spring Animation은 UI 상호 작용을 생생하게하는 훌륭한 방법입니다. 스프링 애니메이션은 스프링 물리학을 사용하여 사물을 움직여서 사람들에게 이동하고 사용자에게보다 자연스러운 경험을 제공하는 데 도움이되는 속성을 일정 속도로 바꾸는 대신, 스프링 물리학을 사용합니다.

나는 전에 스프링 애니메이션에 대해 썼다. 이 기사는 React를 기반으로하며 애니메이션에 React-Spring을 사용합니다. 이 기사는 Svelte에서 비슷한 아이디어를 탐구 할 것입니다.

CSS 개발자! 애니메이션 효과를 제어 할 때는 일반적으로 완화를 생각합니다. "봄"애니메이션을 실제 물리학을 기반으로 완화 하위 범주로 생각할 수 있습니다.

Svelte에는 실제로 외부 라이브러리없이 프레임에 스프링이 내장되어 있습니다. React-Spring에 대한 이전 기사의 전반부를 검토 할 것입니다. 그러나 그 후, 우리는 Svelte에서 Springs의 모든 사용을 파고 실제 구현을 향후 기사로 남겨 둘 것입니다. 이것은 실망스러운 것처럼 보이지만 Svelte는 이러한 애니메이션 프리미티브와 효과적으로 통합하기 위해 React에서 찾을 수없는 몇 가지 독특한 기능을 가지고 있습니다. 우리는 그들을 논의하는 데 약간의 시간이 걸릴 것입니다.

또 다른 점 :이 기사에 산재 된 시연 중 일부는 스프링을보다 눈에 띄는 효과를 내기 위해 "탄성"으로 구성했기 때문에 이상하게 보일 수 있습니다. 데모 코드를 사용한 경우 스프링 구성을 찾으십시오.

이것은 Rich Harris가 다양한 스프링 구성과 행동을 보여주기 위해 만든 훌륭한 대체입니다.

Svelte Storage로 빠르게 시작하십시오

시작하기 전에 Svelte Storage를 빨리 살펴 보겠습니다. Svelte의 구성 요소는 상태를 저장 및 업데이트 할 수 있지만 Svelte는 스토리지 개념을 가지고있어 구성 요소 외부에 상태를 저장할 수 있습니다. Svelte의 Spring API는 스토리지를 사용하기 때문에 여기서 중요한 부분을 간략하게 다룰 것입니다.

스토리지 인스턴스를 만들려면 쓰기 가능한 유형을 가져 와서 다음과 같이 만들 수 있습니다.

 "svelte/store"에서 {writable} 가져 오기;
const clicks = 쓰기 가능 (0);

Clicks 변수는 값이 0 인 상점입니다. 저장된 새 값을 설정하는 두 가지 방법 인 세트 및 업데이트 방법이 있습니다. 전자는 저장하도록 설정할 값을 받고 후자는 현재 값을 받아들이고 새 값을 반환하는 콜백 함수를받습니다.

 함수 증분 () {
  clicks.update (val => val 1);
}
함수 setto5 () {
  clicks.set (5);
}

실제로 상태를 사용할 수 없다면 상태는 쓸모가 없습니다. 이를 위해 매장은 새로운 값에 대한 알림을받을 수있는 구독 방법을 제공하지만 구성 요소 내에서 사용할 때는 $ 문자로 스토리지 이름을 접두사 할 수 있습니다. 이는 Svelte에게 저장된 현재 값을 표시 할뿐만 아니라 변경할 때 업데이트하도록 지시 할 수 있습니다. 예를 들어:

<h1 id="값-clicks"> 값 {$ clicks}</h1>
증가
5로 설정하십시오

이것은 완전한 작업 코드 예제입니다. Storage는 파생 스토리지 (스토리지를 함께 연결할 수 있음), 읽기 가능한 스토리지 및 저장소가 처음 관찰되고 더 이상 관찰자가 없을 때 알림을받을 수있는 기능을 제공합니다. 그러나이 기사의 목적을 위해 위에 표시된 코드는 우리가주의를 기울여야 할 모든 것입니다. 자세한 내용은 Svelte Documentation 또는 Interactive Tutorial을 참조하십시오.

봄 충돌 코스

스프링과 기능을 빨리 소개합시다. 우리는 특정 요소의 렌더링 측면 (불투명성 및 변환)을 변경 한 다음 애니메이션 변경 사항을 살펴 보는 간단한 UI를 살펴 보겠습니다.

이것은 하나로 전환하는 최소한의 수소 구성 요소입니다.<div> 불투명도와 다른 것으로 전환<code><div> x 축 변환 (애니메이션없이).<pre class="brush:php;toolbar:false">&lt;div style=&quot;opacity: {shown ? 1 : 0}&quot;&gt; 토글 내용&lt;/div&gt; &lt;br&gt;비녀장 &lt;hr&gt;&lt;div style=&quot;transform: translateX({moved}px)&quot;&gt;나는 상자입니다.&lt;/div&gt; &lt;br&gt;이동!</pre> <p> 이러한 변경 사항은 즉시 적용되므로 애니메이션하는 방법을 살펴 보겠습니다. Spelte에서는 스프링은 원하는 값을 설정할 수있는 저장소이지만 즉시 변경되지는 않지만 대신 스프링 물리학을 사용하여 점차 변경된 값을 저장합니다. 그런 다음 UI가 변경된 값에 바인딩하여 멋진 애니메이션 효과를 얻을 수 있습니다. 그것이 실제로 어떻게 작동하는지 봅시다.</p> <pre class="brush:php;toolbar:false"> &quot;svelte/motion&quot;에서 {spring} 가져 오기; const fadespring = spring (1, {강성 : 0.1, 댐핑 : 0.5}); const transformspring = spring (0, {강성 : 0.2, 댐핑 : 0.1}); const togglefade = () =&gt; fadespring.update (val =&gt; (val? 0 : 1)); const toggletransform = () =&gt; transformspring.update (val =&gt; (val? 0 : 500)); const snaptransform = () =&gt; transformSpring.update (val =&gt; val, {hard : true}); &lt;div style=&quot;opacity: {$fadeSpring}&quot;&gt;희미한 내용&lt;/div&gt; &lt;br&gt;페이드 토글 &lt;hr&gt;&lt;div style=&quot;transform: translateX({$transformSpring}px)&quot;&gt;나는 상자입니다.&lt;/div&gt; &lt;br&gt;이동! 제자리에 스냅</pre> <p> 우리는 splte에서 스프링 기능을 얻고 불투명도 및 변환 애니메이션을 위해 다른 스프링 인스턴스를 설정합니다. 전환 스프링 구성은 고의적으로 <em>매우 탄력적</em> 으로 설정되어 나중에 스프링 애니메이션을 일시적으로 닫고 필요한 변경 사항을 즉시 적용하는 방법을 보여줍니다 (나중에 유용합니다). 스크립트 블록의 끝에는 필요한 속성을 설정하는 데 사용되는 클릭 핸들러가 있습니다. 그런 다음 HTML에서 변경된 값을 요소에 직접 바인딩합니다 ... 그게 다야! 그것은 Svelte의 기본 스프링 애니메이션에 관한 것입니다.</p> <p> 나머지 항목은 Snaptransform 함수로 변환 스프링을 현재 값으로 설정하지만 객체를 두 번째 매개 변수로 전달합니다. 이것은 애니메이션없이 즉시 필요한 값을 적용하는 효과가 있습니다.</p> <p> 이 기사에서 볼 수있는이 데모와 나머지 기본 예제는 다음과 같습니다. [데모 링크는 여기에 삽입되어야합니다]</p> <p> ... (기사의 나머지 부분의 의사 원리는 원래 의미를 변경하지 않고 그림의 위치와 형식을 유지합니다)</p> </div>