0----1----2--- みたいな形式のテキストでタイムラインアニメーションを作れるライブラリを作りました。

しゅうまいさんと「Webでタイムラインアニメーションを作るのがだるい」的な話をしていて、 AAみたいな発想で楽をできないかなと思ったのが発端になっています。

まずは下記のデモを見てください。

See the Pen TimelineDown Example by hashrock (@hashrock) on CodePen.

下記の文字列を渡すことで、４つの絵文字がそれぞれ個別のアニメーションをします。

const p1 = "--------0----1--2-------";
const p2 = "---------0----1--2------";
const p3 = "----------0----1--2-----";
const p4 = "---------------0----1--2";

上記文字列はFlashでいう「タイムラインUI」をアスキーアート的に表現したものです。

f:id:hashrock:20200104002929p:plain

（画像はAdobe Animate CC でフレームとキーフレームを使用する方法より引用。CC BY-NC-SA）

こういうタイムラインアニメーションを作るには、今どきだとAfterEffectsなどの専用ツールを使うわけですが、テキストだけで作れるんであれば、エディタから離れずにタイミング調整ができるのでプログラマーは嬉しいわけです。

f:id:hashrock:20200104010451g:plain

中身はどうなっているかというと、定番アニメーションライブラリGSAPのTimelineMaxをラップしています。テキストをパースしてTimelineを生成しているだけで実装はほぼすっからかんです。できることや渡せるオプションはTimelineMaxとほぼ同じと考えてください。

使い方

下記のコードをインポートします。

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hashrock/timelinedown@1.0.3/index.browser.js"></script>

使っているところは下記のような感じです。

// タイムラインを定義する。
// 文字一つが0.1秒を表す。「-」は休符のようなもの。
// 数字の文字に到達したら、後述のキーフレームによりアニメーションが起きる。
const str = "------------0----1--2";

// キーフレームを定義する。
// 配列の１つ目が「0」の文字にアサインされる。
// easeにはGSAPのイージング関数を指定することができる。
// （この場合はバウンドする）
const keyframes = [
  { x: 200 },
  { y: 200, ease: Bounce.easeOut },
  { opacity: 0 }
];

// セレクタ、タイムライン文字列、キーフレーム、オプションを順に渡す。
// この場合は「obj」というidの要素にアニメーションがかかる。
// オプションに `frameDuration` を渡すと、1フレームあたりの時間が設定できる（デフォルト0.1秒）。
// それ以外はTimelineMaxに準じる。
const tl = timelineDown("#obj", str, keyframes, {
  repeat: 99,
  frameDuration: 0.1
});