Katashin .info

直感的なオプションでスプリングアニメーションできる JavaScript ライブラリ CSS Spring Animation

「難しいことはよくわからないからとりあえずいい感じにアニメーションしてほしい！」

前回、前々回の記事を読んだ方の中にはそう思った人がいるかもしれません。今まで CSS に数式を書いてアニメーションさせる方法や、iOS で使われているスプリングアニメーションを CSS で実装する方法を紹介しましたが、しっかりと理解をして実装をするにはハードルが高かったように思います。今回は、それらの実装を簡単にできる JavaScript ライブラリ CSS Spring Animation を紹介します。

前回、前々回の記事は以下のリンクから読めます。

CSS 数式アニメーションで初速も考慮できる表現力の高いイージングを書く

iOS のスプリングを CSS 数式アニメーションで再現する

スプリングアニメーションはイージングより自然なインタラクションになる #

Web におけるアニメーションの実装にはイージングが一般的に使われます。CSS トランジションでは ease-in, ease-out などのプリセットのイージング関数を使ったり、cubic-bezier() である程度自由なイージングを自作できます。

イージングは簡単に使えますが、ユーザーのインタラクションと組み合わせると不自然になる場合があります。そのような場合はスプリングアニメーションを使うことで、より自然なインタラクションを実現できます。

以下のデモでは丸いオブジェクトを左右の点へとドラッグで移動でき、ドラッグの終了時に点の位置へ吸い付くアニメーションが行われます。アニメーションのイージングには ease-out が使われています。上下にずらしてドラッグするとわかりやすいですが、ドラッグ時の速度によらず一定のアニメーションが行われるため、不自然な印象を受けます。

このアニメーションをスプリングアニメーションに変えたのが以下のデモです。ドラッグの動きに合わせたアニメーションが行われるため、より自然です。

スプリングアニメーションは Web の標準仕様にはないため、実装に手間がかかりますが、それを簡単に使えるようにしたライブラリが、本記事で紹介する CSS Spring Animation です。

CSS Spring Animation の特徴 #

CSS Spring Animation は Animate with springs にインスパイアされて開発されているライブラリです。スプリングアニメーションを提供する JavaScript ライブラリは他にもありますが、CSS Spring Animation には以下の特徴があります。

CSS トランジションを使ったスプリングアニメーションの実装 #

従来のスプリングアニメーションのライブラリは requestAnimationFrame で実装されていますが、CSS Spring Animation は CSS トランジションを使っています。CSS トランジションを使うことで、requestAnimationFrame ベースのアニメーションよりもパフォーマンスが上がる可能性があります。

オプションが直感的で動作を予測しやすい #

従来のスプリングアニメーションでは物理演算ベースのオプションを使う必要があり、オプションの違いによって動きがどのように変わるのか、直感的に予測しづらいものでした。CSS Spring Animation では跳ね返りの度合いを表す bounce、アニメーションの長さの duration の2つのオプションを使うだけで、直感的に動きを予測できます。

requestAnimationFrame を使ったグレースフルデグラデーション #

CSS Spring Animation では CSS.registerProperty や CSS の exp() 関数といった、新しい Web 標準の機能を使用しています。これらの機能が未実装のブラウザでは、requestAnimationFrame を使ったグレースフルデグラデーションが行われます。

CSS Spring Animation の使い方 #

npm 上で @css-spring-animation/vue という名前で公開されています。お使いのパッケージマネージャーでインストールしてください。

$ npm install @css-spring-animation/vue

単一ファイルコンポーネントで <script setup> を使っている場合、<spring> コンポーネントを使えます。<spring.div> のように描画したい HTML 要素名を指定します。

<script setup>
import { ref } from 'vue'
import { spring } from '@css-spring-animation/vue'

const moved = ref(false)
</script>

<template>
  <button type="button" class="button" @click="moved = !moved">Toggle</button>

  <!-- <div> 要素を描画し、:spring-style で指定されたスタイルに応じてアニメーションさせる -->
  <spring.div
    class="rectangle"
    :spring-style="{
      translate: moved ? '100px' : '0px',
    }"
    :duration="600"
    :bounce="0.3"
  ></spring.div>
</template>

spring-style プロパティには通常の style と同様に、CSS のスタイルを指定できます。この値が更新されると、更新前後のスタイルでスプリングアニメーションが自動的に行われます。

その他の使い方などはドキュメントを参照してください。

今後の実装予定: <SpringTransition> と擬似クラスのサポート #

究極的には Web アプリに実装するすべてのアニメーションをスプリングアニメーションにしたいと考えています。そのためには、より多くのユースケースをサポートする必要があります。今考えているのは <SpringTransition> コンポーネントと :hover や :focus のような CSS 擬似クラスのサポートです。

Vue では要素の追加、削除時にアニメーションを行う <Transition> コンポーネントがありますが、<SpringTransition> はそれのスプリングアニメーション版です。

:hover や :focus に CSS トランジションをかけることは一般的に行われていると思いますが、これらのユースケースに対しても対応できるようにしたいです。

CSS Spring Animation のソースコードは Github 上に公開されているので、興味がある方はご覧ください。