スプリングAnime.js vs Motion

お題カードをステージ内3箇所のスナップ点へ、stiffness/damping/massを指定したばね挙動で移動させる。

デモを読み込み中...

スコアカード

実装スコアカード
ライブラリ	実装行数	使用API	主観メモ
Anime.js	6行	animate / spring	ease差し替えだけでばねになる手軽さ
Motion	6行	animate / type:spring	中断・連打時の速度継承が自然で気持ちいい

コード比較

import { animate, spring } from "animejs";

// ばねはイージングとして表現する。
// durationはばね物理（stiffness/damping/mass）から自動決定される
animate(card, {
  x: 150,
  y: 16,
  ease: spring({ stiffness: 200, damping: 12, mass: 1 }),
});

import { animate } from "motion";

// ばねはトランジションタイプとして表現する。
// 速度の引き継ぎ（中断時のvelocity）はエンジン側が面倒を見る
animate(
  card,
  { x: 150, y: 16 },
  { type: "spring", stiffness: 200, damping: 12, mass: 1 },
);