PathSliderライブラリを使用してSVGパスに沿って要素をアニメーション化する方法
序章
SVGのpath
要素を使用して、WebサイトまたはWebアプリケーションのフロントエンド用の革新的なアニメーションを作成できます。 このチュートリアルでは、PathSliderライブラリを使用してSVGpath
に沿って要素を移動するようにHTML、CSS、およびJavaScriptを設定する方法を示します。 チュートリアル全体に従うことで、このライブラリを使用して、ある位置から別の位置に移動するスライダーを開発します。
ステップ1—PathSlider
ライブラリを設定する
スライダーを機能させるためのコードに入る前に、PathSlider
ライブラリーの使用方法と、そのオプションのいくつかを見てみましょう。
まず、ライブラリはanime.js に依存しているため、PathSlider
の使用を開始する前に、プロジェクトに含める必要があります。 さらに、すべてが正しく機能するようにHTMLおよびCSSコードで考慮しなければならない他の小さな要件がいくつかありますが、スライダーを開発するときにそれらが表示されます。
ライブラリによって提供されるオプションのいくつかをもう少しよく理解するために、SVGパスの一部と図解されたパラメーターの名前を示す次の図を見てください。
この図は次のことを示しています。
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
に沿って移動します。
結論
このチュートリアルでは、閉じたSVG path
とPathSlider
ライブラリによって提供されるいくつかのoptions
を使用して、基本的なスライダーを開発しました。 ライブデモを確認したり、Codepen でコードを試してみたり、Githubでフルコードを入手したりできます。