アニメーションの実装テクニック

@ktsnさんがアニメーションを実装するときのコツを公開されていた。

FLIPテクニックと呼ばれるもので、First、Last、Invert、Playの4つのステップでアニメーションを実装する方法だ。

const items = ...

// First: 現在の座標を取得
const firstRects = first(items)

// 要素が追加されたことで要素が動く
prependItem(items, newItem)

// Last: 移動後の座標を取得する
const lastRects = last(items)

// Invert: lastRects - firstRects で移動距離を求め、要素をfirstRectsの場所まで巻き戻す
invert(items, firstRects, lastRects)

// Play: Invertで巻き戻るのを待ったあとに、firstRectsからlastRectsに移動する
play(items)