RiveでHelloWorld

RiveでHelloWorld

Riveとは？

• インタラクティブな2Dベクターベースのアニメーションを実現するプラットフォーム
• ノーコードで実現．使う分には無料だが，コンテンツの作成（エクスポート）に課金が必要
• 競合としては
  • SVGアニメーションとかanime.jsとか？
  • LottieFIlesも見た目は似てるけど，インタラクティブな要素があるのはRiveの方．
• 学生なら割引がある．

デスクトップアプリをダウンロードしてインストールする

Gitで管理する時は少し注意

• .gitattributesの設定をしないとファイルが壊れるかも

簡単なチュートリアルを参考に進めていく

新規ファイルを作成する

• New Fileで作成する

サイズはまずは適当で良いのでデフォルトの500×500で．

背景色を白に変更してみる

四角形を追加しよう

適当に形とか色とかを調整する

作成した四角形にButton Frontという名前をつけた

ボタンを複製して，少し色違いのButtoin Backを作成する

Hierarchyビューは上のものの方手前にくるので，Backは下に移動させて，位置を少しずらして影のように見せる

テキストを追加してみよう

3つのオブジェクトをグループ化する

Animateビューをみて，キーフレームを打つ

このTimeline 1は「Not hovered」という名前に変更する

このタイムラインをDuplicateで複製して，Hoveredを作成する

Hoveredのタイムラインのボタンのグループは少しサイズを大きくした

State Machine 1をみて，Hoveredをドラッグ&ドロップする

状態遷移の設定をする．

• チュートリアルの動画ではConditionsのタブが右にあるが，自分の手元の環境だとState Machineの下のウィンドウに表示されていた
• InputsにhoverというBoolを設定して，ON/OFFで状態遷移できるようにする

Listenerを設定する．EnterとExit用にそれぞれリスナーを作成

Clickのアニメーションを作成．キーフレームをいい感じに設定させる

Layer2を作成して，Clickに遷移するようにする

キーフレームの設定を工夫して，HoverとClickの両立の設定をする

完成したけど書き出すのは課金が必要だ・・・どうしよう

• とりあえず一番安いやつで課金してみた．

Riveのファイルを書き出す

• .rivというファイルが書き出される

Webアプリに組み込んでみた！

#blog