明けましておめでとうございます！🪅
前年度から気になっていたRiveに挑戦してみたいと思います。
簡単なボタンアニメーションを作成する
UIはFigmaと似たような感じで、直感的にボタンを作成することができました。
ただ「Animate」タブから設定するこちらのUIが見慣れない。。
Hoverされていない状態とHoverされている状態のTimelineを作成する
AfterEffectsのようにScale値をいじってキーフレームを打つ方式のようですね、「Not Hover」の状態と「Hover」の状態を作成しておきます。AEで言うコンポジションを2つ作った状態？
State Machineに作成したTime lineを追加
State Machineに移動して先ほど作成した「Not Hover」と「Hover」をドラッグ in ドロップで追加していきます。めちゃくちゃ直感的！
追加した後Not Hover状態からHoverへインタラクションを追加すると状態を変化させることができるようです
インタラクションに条件を追加
変化させたいインタラクションを選択した状態で「Inputs」タブを選択します。
今回はHoverさせたいのでBooleanを選択
インタラクションを選択し条件を付与します
Transitionを400msに設定し、InterpolationをCubicに設定し再生してみました
Listenersを選択し状態の条件を設定
Listenersを追加し右のサイドメニューからターゲットを「Button」に設定し、Hoverの時はPointer Pointer Enterを設定し「Hover true」になるように、Hoverしていない時はPointer Exit「Hover false」に設定し再生するとHoverしたときは拡大され離すと縮小するインタラクションができました！
Clickのレイヤーを追加する
ClickというTime Lineを追加しScale値をいじります
State MachineのレイヤーにClickというレイヤーを追加します
レイヤーを追加しEntryからClickへインタラクションを伸ばす
InputsからTriggerを選択し名前をClickにします
矢印の状態に条件を付与します＋からif Clickを選択
1つだけだと止まってしまうので、何度でもクリックしたらクリックアニメーションが流れるようにもう一つClickを追加し各Clickに状態を付与していきます
ListenersにのターゲットにButtonを設定しClickを選択します
状態を設定できたので、Clickのインタラクションが作成できました！
ただこのレイヤーが複数あると最新のレイヤーが優先されてしまうようです💧
そうならないためにはButtonの中にあるレイヤーを一度グループ化しClickの中のタイムラインをコピーし「Button Click」を選択した状態でペーストすることでButtonに対してではなくButton Clickに対してタイムラインが当たるので競合しないようです（既存のButtonの方のタイムラインは削除する）
まとめ
今回は初歩の初歩として、自分が理解するために作ってみました！Figmaのように直感的で使えますし、AEを使ったことがある方ならある程度わかりやすいUIなのかなと思いました
Riveはアップデートが早くドキュメントも英語ばかりなので追っていくのは大変ですが、マイクロインタラクションをアプリに追加していくのに最適なツールのようなので、少しずつ覚えてアプリに追加していきたいなーと思ってます！
参考：
コメント