Riveめもめもー１

わたし

うふふふ、迷走中のわたしはRiveについて記述することにしました。
※個人的メモ帳だよ。間違っているのもあるからね。

まぁ、Rive関連記事が少ないしね、ザクザク書いちゃうぜ。
Riveとは？ぐぐれ。（投

まぁ、簡単に言うとSVGの画像データを利用してアニメーションを作成するシステムです。

現状、FlutterとかWebページとか、、Unityも使えるんかな？えーっと？

こいつらで使えるってよ（Riveのサイトから拾ってきたｗ）

色々使えますね、、、うん。

で、ちょっと前にやってたんですよこれ。
（無料利用でも広告が表示されなかったころ。）
2023/12/21追記：広告でなくなるって連絡が来ました✨

でね。結構有用なの。べんりぃなの。
がっつりアニメーションしたい人もだけど、
アプリの読み込み中のクルクルをかわいくしたい！
とか、
アプリ起動時に３秒くらいのアニメーション表示したい！
みたいなちょっとだけ！みたいなアニメーション作成にも便利です。

で、こちらRiveですが、ありがたいことに無料で利用することが可能です。
まぁ、制約はあるんですが、ちょっと触ってみたい程度なら全然問題ない。
（実際利用するとなると課金しないとちょっときついでふ(´・ω・`)）
2023/12/21追記：広告表示がなくなったようなので、無料状態でちょこっと利用は全然OKになりました✨ありがとう！

・・・ちょっと、アカウント登録なんかをすっ飛ばしてしまいました。
Googleアカウントを持っていればワンクリックで利用開始できるはず、、です。（ちょっと変わっている可能性もある。
無料で作成できるアニメーションファイルは３つまでです。(´・ω・`)

えーっと、この画面は、新規作成のボタンを押したときの画面になります。
初期状態どうします？ってことなんですが、
何がなんだかわかんねぇ！
ので、日本語に翻訳じゃわれ！
Blank artboard
ブランク画面ですわ。何もない状態でスタートします。
自分で作成したSVGデータをインポートしたいときなんかはこれでよいでしょう。
Star rating
スターレイティング。まぁ、アプリとかWebページとかにありますね。レイティングのサンプルです。
Animated login character
ログイン・サインアップにアニメーションを組み込んでみませんか？だと・・・？そんなことできるんか？
Animation blending
複数のアニメーションを混ぜる方法を教えてくれるようです。
ふーん。。
Cursor tracking
カーソルの動きに反応するようなアニメーションを作成できるようです。
カーソルの先を見つめ続けるとか、カーソルから逃げるような動きをさせたいときに有用そうですね。
Loader animation
ローディング中のアニメーションを作成する方法を教えてくれるようです。
ふーん。。

まぁ、あれだ。Blank以外は、見本提示してくれるみたいな感じだわ。
お、じゃぁ、それぞれを解説すれば記事が５つ書けるじゃんｗ

ってことで、一個ずつみていこ。
じゃぁ、Star ratingから。

Star rating

Star ratingをクリックしてCreateボタンを押すと以下のような画面が出ます。
（アカウントが出てきちまうじゃん、、加工面倒だな）

さてさて、これ、なんだかわかんないじゃん？
そういう時はですね、
右上を見ましょう。

Design⇔Animate

DesignとAnimateを切り替えるスイッチがあります。
そちらをぽちっと押しましょう。

表示内容が変わりました。

さっきのDesignの画面は表示されているものを加工するときに使用する画面です。
で、Animateモードはオブジェクトにアニメーションを付ける場所です。
今回作成したStar ratingにはすでにレイティングのアニメーションが設定されています。
どうやって動かしてみるかというと、、

こちらの、、

この画面、左上にあります三角ボタンをタップします。
※再生中はアニメーションの修正、デザイン修正もできないので、注意してね。
するとですね、、

なんか動き出します。

表示されているレイティングの星がすべて暗くなりましたね。
これで、この暗くなっている星をタップしますと、、、

こんなふうに

アニメーションが再生されます。
どうやって管理しているかはまぁ・・・
わたしもわからんのでぼちぼち見ていきます。
一時停止ボタンをタップして、実行を終了させましょう
（さっき三角ボタンがあったところだよ）

さてさて、、どうしようかなぁ、、
まぁ、ここから見ますか。
画面の左下です。Animationsというエリアがありますね。

左下Animations

こちらに格納されるのは２種類

Timelineと
StateMachineです。
えっとね、→と、リサイクルみたいなマークがついているのがTimeLineです。ま、アニメーションを記録しています。
StateMachineは、
アニメーションを制御する装置だと思っていただければ問題なしです。

TimeLine
ちらっと見ていきましょう。TimeLineですが、試しに「5_stars」というTimeLineをクリックしてみましょう。

表示が変わりましたね。
で、再生ボタンを押します。ぽちっと。

ぴかっと

こちら、アニメーションが再生されますね。これは一番右端の星が押されたときのアニメーションのようです。
他も確認しますと、それぞれのボタンが押されたモーションが格納されております。
Exampleについてはおそらく、新規作成画面で動かすアニメーションが格納されています。（多分
Idle_emptyはボタンをタップする前のすべての星が暗い状態のアニメーション（何も動かない）が格納されていました。

StateMachine
次はStateMachineがどんな感じなのか見ていきましょう。
すでに作成されている「State Machine1」をクリックするです。

State Machine1を見るとこのようになっています。
この処理が実行されると、Entryからスタートします。
最初に実行されるのはIdle_emptyですね。初期のすべての星が暗い状態のアニメーションが再生されます。
で、AnyState（青いやつ）ですが、
今回、アニメーションを動かす順番が決まっていないので、これを経由させることで、どこからでも自由に実行できるようになるようです。

で、今回、星がタップされたときにアニメーションを実行させたいので、そのための準備が必要なんですが、、、それが、

これとこれ

Inputsと、Listenersであります。
Inputs
変数、、、値を保存しておくエリアを作成しておくことができます。今回だと、ratingというエリアが作成されています。
初期状態は０、星をタップすると値が１～５に変更されています。
その値を変更する処理というのがListenersに入っております。
Listeners
Listenersの中に入っている「Star_1」をタップしてみますと、画面の一番右側にこのようなものが表示されます。

ふーん、、、

ここでは「何をどうしたらこうする」という処理が書かれています。
一番上、Star_1というのは「何をどうしたら」の”何”を指すものです。
ターゲットみたいなマークがありますね、それをタップしてから、オブジェクトをタップすると、対象となるオブジェクトを指定することができます。
で、次の「Pointer Down」が”どうしたら”の部分ですね、
だから、これだと、Star_1をPointerDown（タップ、あるいはクリック）したらという意味になります。
で、次が”こうする”ですね。
set rating 1となっています。
Inputsで作成した、ratingというエリアに１をセットします。
で、何をしているかを簡単に言うと
Star_1をタップすると、ratingに１をセットする
です

はぁ、なげぇなぁ、、、
で、ですね、その「タップしたらratingに１～５をセットする」という処理をそれぞれの星オブジェクトに対して作成しているのです。

さて、現時点で、ratingの中身を変える処理がかけました。次です。

よっこいよっこい

こちらany Stateにくっついている1_star～5_stars。これらはTimeLineです。
AnyStateで何かが更新されたことを検知して、それを検知したら条件を見て動かす処理を決めます。
でですね、その条件、どこに書かれているかと言いますと、
AnyStateと1_star～5_Starsをつなぐ線の真ん中にある「＞」マーク、こちらです。（1_star~5_Starsには条件記述はないのよね）
で、その中身がこんな感じ、

これは5_starsとつながっている線の「＞」を選択したときに表示される内容になります。
4項目見えますが、今回見るのはConditionsです、
このアニメーション（5_stars）を実行する条件が記述されています。
で、条件が
rating == 5
プログラミングしている人は以下割愛してね☆
プログラミング上で、値を比較（同じか確認）したいときは「==」を使用することが割と一般的です。
「＝でええやん！」と思うかもですが、＝単体は別の使われ方をしていることが多く、その処理と見分けやすくするために「==」と「=」が使い分けれているという背景があります。
ちなみに
A != Bは、AとBが違うことを判断するとき、
<、>はそれぞれ算数で使用したそれと同様です、、
プログラミングしてる人の割愛以上！

ということで、これはratingが5の時という条件になっているですね、
だから、ratingに５が入っていたらアニメーションを実行してやるぜという意味です。

これで、
判断するための値
値を変更するためのやり取り
値の内容をみて、アニメーションを動かすかの判断

が確認できました。
これだけつくれば、レイティングのアニメーションが作成できますな。
以上で、このレイティングの説明は以上になります
（アニメーションの作り方？それはいつか、、、多分）

おまけ
現状、レーティングの値を変更する処理は５つあります。
１～５へ変更されるのですが、

ここね、

この処理、現状では動かないようになっているのですが、
どうもratingに０が入るとすべてがブランク状態に戻るようなので、その処理を追加してみましょう。
条件によるアニメーションの実行はすでにありますし、
判断するための値も、現状のものを利用できますので、
必要なのは、

値を変更するためのやり取り
だけですね。
なので、よよよいっと

リセットボタン作成

作り方・・・うーん、
Designモードで、

ここから、

Rectangleを選択すれば四角をかけるし、

同じ行の中の

こいつをクリックするとテキストが入力できます。
それをちょいちょいーっとやれば、、
できます！（雑
Riveはドキュメントが結構いい感じなので、そちらで確認するとよいですよ！（英語だけど

さて、戻ります。
作成したボタンをタップするとratingエリアに０をセットする処理を追加してみましょう。
えーっと、Animateモードに戻して、

ついか！

んで、右側のやつらをこう！

リセットボタンのオブジェクト名はButtonにしております。

で、完成のはず。。実行しまーす。
・・・・うむ！できました！
え？どうなるか知りたい？
それはご自身でやってみてね（丸投げ
ま、テキストを入れなくても四角とか丸を張り付けて、そいつをクリックしたら―という記述をすればよいので、そこまで難しくは、、、ない、、ハズです。

この記事が気に入ったらサポートをしてみませんか？