SvelteとSpringアニメーション

Springアニメーションは、UIの相互作用を実現する優れた方法です。 Spring Animationは、一定の期間にわたって一定の速度でプロパティを変更する代わりに、Spring Physicsを使用して物事を動かし、実際のオブジェクトを動かしてユーザーがより自然な体験をするという印象を与えます。

春のアニメーションについて以前に書きました。その記事はReactに基づいており、アニメーションにReact-Springを使用します。この記事では、Svelteで同様のアイデアを紹介します。

CSS開発者！アニメーション効果を制御するとき、通常は緩和を考えます。 「スプリング」アニメーションは、実際の物理学に基づいた緩和サブカテゴリと考えることができます。

Svelteには、実際には、外部ライブラリを必要とせずにフレームにスプリングが組み込まれています。 React-Springに関する前の記事の前半を確認します。しかし、その後、私たちはSvelteでのスプリングのすべての使用を掘り下げ、実際の実装を今後の記事に任せます。これは残念なように思えるかもしれませんが、Svelteには、これらのアニメーションプリミティブと効果的に統合するために反応に見られないいくつかのユニークな機能があります。それらについて話し合うのに時間がかかります。

別の注意事項：この記事で散在するデモのいくつかは、より顕著な効果を生み出すためにスプリングを「弾力性」するように構成したため、奇妙に見えるかもしれません。デモコードを使用している場合は、必ず動作するスプリング構成を見つけてください。

これは、さまざまな春の構成とその動作を紹介するために、Rich Harrisが作成した素晴らしいReplです。

Svelteストレージからクイックスタート

始める前に、Svelteストレージを簡単に見てみましょう。 Svelteのコンポーネントは状態を保存および更新することができますが、Svelteにはストレージの概念もあり、コンポーネントの外側に状態を保存できます。 SvelteのSpring APIはストレージを使用しているため、ここで重要な部分を簡単に説明します。

ストレージのインスタンスを作成するには、書き込み可能なタイプをインポートして、次のように作成できます。

 「svelte/store」から{writable}をインポートします。
const clicks = writable（0）;

クリック変数は、値が0のストアです。保存された新しい値を設定するには、セットと更新メソッドの2つの方法があります。前者は保存するように設定する値を受け取り、後者は現在の値を受け入れ、新しい値を返すコールバック関数を受信します。

 function increment（）{
  clicks.update（val => val 1）;
}
functionset5（）{
  clicks.set（5）;
}

実際に州を使用できない場合、状態は役に立たない。これを行うために、ストアは新しい値の通知を受信できるサブスクライブメソッドを提供しますが、コンポーネント内で使用すると、ストレージ名を$文字で接頭することができます。例えば：

<h1 id="値-clicks">値{$ clicks}</h1>
インクリメント
5に設定します

これは、完全な作業コードの例です。ストレージは、派生ストレージ（ストレージを一緒にリンクできる）、読み取り可能なストレージ、さらにはストレージが最初に観察され、オブザーバーがいないときに通知する機能など、他の多くの機能を提供します。しかし、この記事の目的のために、上記のコードは私たちが注意する必要があるすべてです。詳細については、Svelteドキュメントまたはインタラクティブチュートリアルを参照してください。

春のクラッシュコース

スプリングとその機能をすばやく紹介しましょう。特定の要素のレンダリング側面（不透明度と変換）を変更する単純なUIを調べてから、アニメーションの変更を確認します。

これは、1つに切り替える最小限のスベルトコンポーネントです<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>これらの変更はすぐに適用されるので、それらをアニメーション化する方法を見てみましょう。これがスプリングが入ってくる場所です。Svelteでは、スプリングは目的の値を設定できるストレージですが、すぐには変更されず、代わりにSpring Physicsを使用して徐々に変更された値を保存します。その後、UIをこの変更された値にバインドして、素晴らしいアニメーション効果を得ることができます。それが実際にどのように機能するか見てみましょう。</p> <pre class="brush:php;toolbar:false"> 「Svelte/Motion」から{spring}をインポートします。 const fadespring = spring（1、{stiffness：0.1、減衰：0.5}）; const transformspring = spring（0、{stiffness：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>Svelteからスプリング機能を取得し、不透明度と変換アニメーションのためにさまざまなスプリングインスタンスを設定します。コンバージョンスプリング構成は、スプリングアニメーションを一時的に閉じて必要な変更をすぐに適用する方法を後で示すのに役立つように、<em>非常に弾力性が</em>あるように意図的に設定されています（これは後で役立ちます）。スクリプトブロックの最後に、必要なプロパティを設定するために使用されるクリックハンドラーがあります。次に、HTMLでは、変化した値を私たちの要素に直接結合します...それだけです！それはすべて、Svelteの基本的な春のアニメーションについてです。</p> <p>残りの唯一の項目は、SnapRansform関数です。これは、変換スプリングを現在の値に設定するだけでなく、オブジェクトを2番目のパラメーターとして渡します。これには、アニメーションなしで必要な値をすぐに適用する効果があります。</p> <p>このデモとこの記事で表示される基本的な例の残りは、こちらをご覧ください。[デモリンクはこちらに挿入する必要があります]</p> <p> ...（記事の残りの部分の擬似原産性は、元の意味を変更せずに保持し、写真の位置と形式を維持します）</p> </div>