RiveでHelloWorldしてみた

https://gyazo.com/2a2a370a77b8a3a98f06ef6deb6b3e98

もしよければフレンド登録してください

https://gyazo.com/7af3a0eb58b5ff718f41cd6423d9c1d3

Riveとは？

インタラクティブな2Dベクターベースのアニメーションを実現するプラットフォーム

ノーコードで実現．使う分には無料だが，コンテンツの作成（エクスポート）に課金が必要

競合としては

SVGアニメーションとかanime.jsとか？

LottieFIlesも見た目は似てるけど，インタラクティブな要素があるのはRiveの方．

学生なら割引がある．

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

https://youtu.be/mMpik32gkt4?si=oBU8F6FYOPgrsoaK

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

https://www.youtube.com/watch?v=7m4dwz8SCKo&t=13s

新規ファイルを作成する

https://gyazo.com/a32cf9332d5deeb9ef209a033819e55f

New Fileで作成する

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

https://gyazo.com/d42571597583c753224dd743eb78d48c

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

https://gyazo.com/e71895a5f184152d4ba19940659b5e98

https://gyazo.com/3875981b4ee25cfcb1f1115c2dad07cd

四角形を追加しよう

https://gyazo.com/41780b572cae579deb37b585faff3297

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

https://gyazo.com/5d673eeede15ece768bd4ea54f5a213a

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

https://gyazo.com/e86e48260805702065e43e334b1c3ff4

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

https://gyazo.com/440bf8fb729432660dad66c8399e911d

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

https://gyazo.com/8b78d4778ff0e44f8aab07cccc8f7156

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

https://gyazo.com/1b869c9b17f3a7d4deba665100a0de4a

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

https://gyazo.com/4df720188c45d36e86e946689970a486

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

https://gyazo.com/5c268ba6c5e6ba01b9eb069e8bff6c47

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

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

https://gyazo.com/981fed10579ad82a5ec8ffa3c54c9910

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

https://gyazo.com/bca19eb874782431ab6be197e419449a

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

https://gyazo.com/a2ce72abac0446faae1ac111ae1ea5f0

状態遷移の設定をする．

チュートリアルの動画ではConditionsのタブが右にあるが，自分の手元の環境だとState Machineの下のウィンドウに表示されていた

InputsにhoverというBoolを設定して，ON/OFFで状態遷移できるようにする

https://gyazo.com/2a9e8f110fcfc1cea735e6da291d1f3f

https://gyazo.com/de87f4adf172ee5dc1715f8d3d8f43f6

https://gyazo.com/c19fa65f13da96226d900b2b61fa8c92

https://gyazo.com/0e1af4d0cc809e23f90d81f993af6db0

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

https://gyazo.com/c885a131bee9841d9d9166bd251e9f65

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

https://gyazo.com/da3433cae125944fcc51b74c0129b2c1

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

https://gyazo.com/7bd487efccc7dd996dbed69160fa0e10

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

https://gyazo.com/b09651949958a27ddeffd5a1c127acf5

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

とりあえず一番安いやつで課金してみた（微妙なら来月解約してみる）

Riveのファイルを書き出す！

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

https://gyazo.com/11e8ada1996800284a3f36ccea73e48f