PathSliderライブラリを使用してSVGパスに沿って要素をアニメーション化する方法

投稿日: 2022-04-20 2022-04-20
タグ: javascript

序章

SVGのpath要素を使用して、WebサイトまたはWebアプリケーションのフロントエンド用の革新的なアニメーションを作成できます。このチュートリアルでは、PathSliderライブラリを使用してSVGpathに沿って要素を移動するようにHTML、CSS、およびJavaScriptを設定する方法を示します。チュートリアル全体に従うことで、このライブラリを使用して、ある位置から別の位置に移動するスライダーを開発します。

Path Slider Basic Demo

ステップ1—`PathSlider`ライブラリを設定する

スライダーを機能させるためのコードに入る前に、PathSliderライブラリーの使用方法と、そのオプションのいくつかを見てみましょう。

まず、ライブラリはanime.js に依存しているため、PathSliderの使用を開始する前に、プロジェクトに含める必要があります。さらに、すべてが正しく機能するようにHTMLおよびCSSコードで考慮しなければならない他の小さな要件がいくつかありますが、スライダーを開発するときにそれらが表示されます。

ライブラリによって提供されるオプションのいくつかをもう少しよく理解するために、SVGパスの一部と図解されたパラメーターの名前を示す次の図を見てください。

PathSlider Options

この図は次のことを示しています。

startLength（floatまたは’center’）：要素の配置を開始するパスの長さ。これは常にアクティブなアイテムの位置になります。選択したアイテムがここに移動し、それに応じて他のすべてのアイテムも移動します。
activeSeparation（フロート）：アクティブなアイテムと隣接するアイテムの間の分離。
paddingSeparation（float）：パスの最初と最後でのパディングの分離。
items：選択したアイテムが配置された後、残りのスペースを考慮して、他のすべてのアイテムは互いに同じ距離に配置されます。

itemsを除いて、ここで説明するすべてのプロパティは、スライダーを初期化するときにoptionsとして提供できるため、必要に応じてスライダーを完全に自由にカスタマイズできます。これらに加えて、他のoptionsが利用可能であり、PathSliderGithubリポジトリで参照できます。

次に、HTMLコードを記述しましょう。

ステップ2—HTML構造を作成する

HTMLコードは、コンテナー（.path-slider）、アイテムをスライドさせるSVG path、およびアイテムになります。 SVG pathとアイテムは同じコンテナー内にある必要があることに注意してください。これにより、配置の問題を回避できます。

<!-- Path Slider Container -->
<div class="path-slider">
    <!-- SVG path to slide the items -->
    <svg width="460px" height="310px" viewBox="0 0 460 310">
        <path d="M 230 5 c -300 0 -300 300 0 300 c 300 0 300 -300 0 -300 Z" class="path-slider__path"></path>
    </svg>
    <!-- Slider items -->
    <a href="#chat" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#chat"/></svg></div>
        <div class="item__title"><h2>Chat</h2></div>
    </a>
    <a href="#alarmclock" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#alarmclock"/></svg></div>
        <div class="item__title"><h2>Alarm clock</h2></div>
    </a>
    <a href="#camera" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#camera"/></svg></div>
        <div class="item__title"><h2>Camera</h2></div>
    </a>
    <a href="#envelope" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#envelope"/></svg></div>
        <div class="item__title"><h2>Envelope</h2></div>
    </a>
    <a href="#lightbulb" class="path-slider__item">
        <div class="item__circle"><svg class="item__icon"><use xlink:href="#lightbulb"/></svg></div>
        <div class="item__title"><h2>Light bulb</h2></div>
    </a>
</div>

基本的な構造ができたので、CSSでスタイルを設定しましょう。

ステップ3—CSSでスタイルを追加する

スライダーを機能させるためにスタイルは必要ありませんが、通常はpathストロークの中央にアイテムを配置します。また、他のスタイルをいくつか追加して、モダンなフロントエンドの外観を作成します。

ここでは、主要部分のみに焦点を当てます。

// Circle width and height
$circle-width: 74px;
$circle-height: 74px;

// Styles for slider items, positioning them absolutely, in the top left corner of the container
// Also centering them (see negative values for `left` and `top`)
// They will be positioned along the SVG path later with Javascript
.path-slider__item {
  position: absolute;        // Get items out of the flow, and let the library set the correct position
  left: - $circle-width / 2; // Half of the width, for centering purpose
  top: - $circle-height / 2; // Half of the height, for centering purpose
}

// Styles for the item circle (icon container)
.item__circle {
  width: $circle-width;    // Desired width
  height: $circle-height;  // Desired height
}

// Styles for the selected item
.path-slider__current-item {

  .item__circle {
    background-color: #4DA169; // Change circle background-color for selected item
    transform: scale(1.5);     // Scale up circle for selected item
  }
}

いつものように、Githubリポジトリで完全なコードを確認できます。

これでスタイリングが完了しました。次に、JavaScriptでスライダーを初期化します。

ステップ4—JavaScriptを使用してスライダーを初期化する

スライダーを初期化するには、pathとitemsのみが必要です。オプションで、カスタマイズのためにoptionsでオブジェクトを渡すことができます。したがって、次のようなコードを使用して、必要に応じてスライダーを機能させることができます。

// Setting up the options
var options = {
    startLength: 0, // start positioning the slider items at the beginning of the SVG path
    duration: 3000, // animation duration (used by anime.js)
    stagger: 15, // incrementally delays between items, producing a staggering effect
    easing: 'easeOutElastic', // easing function (used by anime.js)
    elasticity: 600, // elasticity factor (used by anime.js)
    rotate: true // This indicates that items should be rotated properly to match the SVG path curve
};

// Initialize the slider using our SVG path, items, and options
new PathSlider('.path-slider__path', '.path-slider__item', options);

このコードスニペットでは、使用されているすべてのoptionsにコメントを付けて、それぞれの意味を理解できるようにしています。

ライブラリは、スライダー内の各アイテムのclickイベントを初期化するため、それらのいずれかをクリックすると、選択されます（メインの位置にアニメーション化されます）。スライダーにさらにコントロールを追加したい場合（たとえば、ある種のページ付け、または前のボタンと次のボタン）、任意の項目を選択するために呼び出すことができるいくつかの便利な関数があります。

selectPrevItem()：前の項目を選択します。
selectNextItem()：次の項目を選択します。
selectItem(index)：対応するindexを使用して任意のアイテムを選択します。

これにより、次のようなスライダーが表示され、要素がSVGpathに沿って移動します。

Path Slider Basic Demo

結論

このチュートリアルでは、閉じたSVG pathとPathSliderライブラリによって提供されるいくつかのoptionsを使用して、基本的なスライダーを開発しました。ライブデモを確認したり、Codepen でコードを試してみたり、Githubでフルコードを入手したりできます。

getdocs

13036

序章

ステップ1—PathSliderライブラリを設定する

ステップ2—HTML構造を作成する

ステップ3—CSSでスタイルを追加する

ステップ4—JavaScriptを使用してスライダーを初期化する

結論

getdocs

ステップ1—`PathSlider`ライブラリを設定する