deck.glでレイヤーをアニメーションさせる

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

データに変更があった際に、データを可視化しているレイヤーでアニメーションを設定する方法です。

[注意]

現在、iOSだとトランジションがうまく働かないバグがあるようです。

Layers flickering/disappearing on iOS · Issue #6328 · visgl/deck.gl

Adding an MVTLayer breaks attribute transitions on Safari (MacOS + iOS) · Issue #6436 · visgl/deck.gl

サンプルコード

解説

deck.glのレイヤーでは、getから始まるアクセサプロパティにコールバックを渡すことでデータの属性値を元に高さやカラーなどを指定することができます。

これらのアクセサプロパティは同時にtransitionsプロパティを設定することでレイヤーが新規作成されたときに、現在設定されているレイヤーとの差分を計算しその間の値を補完してアニメーションを実行することができいます。