2Dアニメーションツール「Cavalry」を最近つかってみているお話
昨今、ウェブサービスやアプリなどにおいても、マイクロインタラクションは重要視されている。D2C等々の隆盛もあって、細かいインタラクションにブランドの意図を込めたり、その傾向は続くような気がする。
僕個人としては小難しいことは置いておいて、LPやオンボーディングの演出、何らかのアクションのフィードバックとしてアニメーションが洗練されてたりすると「お・も・て・な・し」感があってええやん、くらいに思っている。
上記を達成しようとすると、おそらくAfter Effects + Lottieとかの構成やcssで頑張るのが通常の構成な気がするけれど、僕はCavalryを採用した。ちゃんとした理由は後述するとして、Aeで実現するほどリッチなアニメーションは「マイクロ」じゃなくなってしまう気がしたのと、css職人ではないので、あんまりcssの制約ありきで演出を考えたくなかったからだ。そこらへんを考慮すると、Cavalryが「ちょうどよさそう」だった。
Cavalryとはなにか
2Dに特化したアニメーションツール。手続き型的にアニメーションが作れるので、ちょっとした変数の入れ替えや複製がシンプルにできる。Google Spread Sheetなど外部のデータとの連携などもできるのが大きな特徴。
公式ウェブはこちらアプリケーションの紹介は色んな方がすごく丁寧にまとめていらっしゃるので、そちらを参照いただいたきたい。たとえばこちらの記事など。
Cavalryを選んだ理由
主に2つある。当たり前だけど、慣れた制作スタイルとやりたかったことにフィットした。
1. Behaviourとの相性
僕の個人的な背景として、OpenframeworksやTouchDesignerなど「コードベース」で、物理演算などにも頼りながら「ジェネレーティブ」に試行錯誤してアニメーションやエフェクトをつくる機会が多かった。それもあって、制作スタイルも、頭のイメージをそのまま出せば良い「わかってる」「みえてる」タイプではないので、手続き型ならではの試しながらつくれるCavalryは相性がよかった。
特にBehavioursと呼ばれる変形やエフェクトなどの機能群（？）と相性がよかった。Random、Stagger、Oscillator、Noiseのあたりのエフェクトを、CavalryのGUIを使ってこねていくのは、先述のツールを使ってコードを書くのと頭の使い方的には似た感覚があった。
2.CLIとGoogle Spreadsheetの連携
外部のデータ、特にGoogle Spreadsheetと公式に連携できるのは興味深かった。いま金融業界に身をおいていて、Spreadsheetと向き合う機会が飛躍的に増えた。Cavalryの公式にあるようなグラフにアニメーションをつけるなどのユースケースはありがたい。
さらに、Cavalryは課金するとCLIから叩くことができる。たとえば毎朝9時に任意の会社の株価を取りにいって、1分おきに最新の株価に基づいたグラフをsvgアニメーションとして出力するといったこともやればできそう。現状思いついたユースケースが微妙なのと、執筆時点では課金したばかりで試せていない機能なので、詳細は次の記事で書きたい。連携方法はこちらにある。
試しにつくってみたもの
上記がCavalryを使って作ったもの。習作として、機械学習のアルゴリズムをイメージしてGIFアニメをつくってみた。現時点だとアルゴリズムの解説にいたってはほぼWikipediaのコピペである。あくまでも僕はデザイナーであり、本記事はCavalryに焦点を当てたものなので、ご容赦いただきたい。言い訳がましいけど、GIFのほうもウォーターマークすら外せてないので、折をみて更新していく予定。
Cavalryを勉強するのに便利だったリソース
1.公式の情報（ドキュメントとDiscordとInstagram）
当たり前だけど、公式のチュートリアルは全部目を通したほうがよい。手を動かしながら、学びたい人は「1 minutes wonder」シリーズをガンガンやって楽しさ優先ですすめるのがオススメかも。
公式のDiscordもオススメ。ツワモノな人たちがガンガンサンプルを投稿しているのと中の人もずっとみてるっぽいので、気軽に質問しても答えてくれる。
公式のInstagramは純粋に目の保養。Cavalry界隈のツワモノを一覧できるので、そこをうまく掘るとサンプルが落ちていたり、チュートリアルを公開してくれたりしている。感謝。
2.数少ない日本語のチュートリアル
cogのmasaya ishikawaさんという方が公開してらっしゃるチュートリアルは、勉強になった。錯視をテーマにしたサンプルが面白いのはもちろん、配列使ったり、少しでもprocessingなどの表現寄りのプログラムを書いたことがある人には親しみやすいのではないかと思う。序盤に発見できてよかった。感謝。
また、ishikawaさんらが主催されているCavalry勉強会？はとても眼福なので、タイムラインを眺めているだけで楽しい。
できたらいいなこんなこと
Cavalryは便利。ただ使っていて不便まではいかないけれど、できたらいいなと思ったことが3点ある。
1.物理演算周り
JSMathによるエクスプレッションがサポートされていたりするので、物理演算周りができるといいなと思った。ただこれはDiscordをダラダラ眺めていたら中の人から「サポート予定だぜ！」的なコメントがあった。期待したい。
2.Compositeの一部参照
複数アニメーションのトンマナをそろえたいときに、他Compositeのパラメーターの一部を使いまわしたいな、と思った。今回の例でいうと、ノイズとグラデーションのテクスチャは使いまわしたいので外から引っ張れたらいいなと思った。できそうだなと思いつつ、見当たらなかったので、できるのであれば教えてもらいたい。
3.SVGアニメーションのサポート
現状だとSVGの連番をエクスポートしたものを自前でアニメ化する必要がある。ろまたんさんという方が、便利なツールをつくってくれているのだけど、できれば公式でサポートしてほしいなと思った。Cavalryの中の人に問い合わせたところ、アニメーションはわからないけど、少なくともノイズなどのテクスチャ周りは処理が重いので、SVGエクスポートの時点で対応する現状なさそうとのことだった。
Cavalryは十分便利なので最高なのだけど、個人的には上記できたらうれしいなと思いました。できるなら教えてほしい...
謝辞的なもの
この記事は、出向という形で所属させていただいているJapan Digital Design株式会社のAdvent Calendarの記事として書かれたものです。ちなみに、いま私が所属しているXDチームではExperience Designer職を募集しています。金融の体験設計に関わるお仕事に興味がある方、ぜひご連絡ください。
また本記事はAdvent Calendarの一部として書かれてはいますが、所属する組織の意見や見解を代表するものではなく、個人の私見となります。
購読いただきありがとうございます。技術、インタラクション、デザイン周りの忘備録やときどき全く関係ないことも書いていきます。よろしければフォロー、コメントよろしくお願いします。