開発者ドキュメント

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

序章

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

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

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

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

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

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

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を使用してスライダーを初期化する

スライダーを初期化するには、pathitemsのみが必要です。 オプションで、カスタマイズのために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イベントを初期化するため、それらのいずれかをクリックすると、選択されます(メインの位置にアニメーション化されます)。 スライダーにさらにコントロールを追加したい場合(たとえば、ある種のページ付け、または前のボタンと次のボタン)、任意の項目を選択するために呼び出すことができるいくつかの便利な関数があります。

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

結論

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

モバイルバージョンを終了