Riveでカウントアップアニメーションを作る方法｜データバインドとプロパティグループ解説
- 4月19日
- 読了時間: 7分
完成イメージ：Riveカウントアップアニメーション
この記事では、Riveのデータバインドを利用したカウントアップアニメーションの作成方法について解説します。
最低限必要な要素
今回、Riveでカウントアップアニメーションを作る際、最低限必要な要素は下記の通りです。
【アートボード内】
テキストレイヤー
プロパティグループ
【データバインド内】
①ビューモデル
Numberプロパティ
②コンバーター
Convert to Stringプロパティ
ステップ1：グラフィックデザイン準備
まず初めに、デザインタブでグラフィック要素の下準備をします。
アートボードサイズは今回500ピクセル×500ピクセルの正方形にしました。
アートボードの色を任意の配色に設定します。私はLinear Gradient（線系グラデーション）
にしています。
テキストレイヤーを1つ追加しましょう。表示する文字は、後ほどデータバインドで設定しますので、デフォルトの「text」のままで問題ありません。
線グラフも追加したい場合は、ペーンツールで線を描きます。
線グラフの色は、デフォルトの「Fill（塗り）」色を消して、「Stroke（線）」色を追加します。
線のエフェクトからTrim Effect（線のトリム）を追加します。デザインタブで見やすいように、Startの数値を100%に設定しました。
グラフィックデザイン要素は以上で完了です。
ステップ2：データバインド準備
次に、データバインドの準備をしていきます。
デフォルトで「ViewModel1」というビューモデルが用意されているので、こちらを使用します。
ビューモデル右側から、Numberプロパティを追加します。
プロパティ名は任意ですが、分かりやすく「textNum」と命名しました。
次に、Converter（コンバーター）を追加します。
少し分かりにくいですが、ビューモデルとは別階層になります。
上部のプラスボタンから、以下の順でConvert to Numberプロパティ追加しましょう。
Converter > String > Convert to Number
後ほど分かりやすいように、コンバーター名を「textNumControl」に変更しました。
ステップ3：データバインディング設定
グラフィックデザインとデータバインドの下準備ができたので、次はその2つを連携させるデータバインディング設定をしていきます。
デザインタブのHierarchyに戻り、テキストレイヤーを選択します。
右側パネルのText Runs設定で、デフォルトの「text」が入力されている部分を右クリックし、「Data Bind」を選択します。
まず、データバインドの方向性を設定します。
左から2つ目のbidirectional（双方向性）を選択しましょう。
次に、プロパティを設定します。
リストを選択すると、先ほどステップ2で追加した「textNum」というプロパティが表示されますので、そちらを選択しましょう。
Convertを設定します。
こちらもステップ2で追加した「textNumControl」を選択します。
最後に、プラスボタンからNumberのプロパティを追加します。
0という数値が入っているボックス上を右クリックして、Data Bindを設定していきます。
データバインドの方向は「Target to Source」を設定します。
Propertyは、「TextNum」を選択しましょう。
なぜプロパティグループが必要なのか？
プロパティグループを追加することで、データバインドで追加した「textNum」という数字の変数をカウントアップ表示することが可能になります。
もしプロパティグループがないと、テキストレイヤーの文字そのものにキーフレームを打つことしかできないので、数字の「0」から「100」にテキストが切り替わるだけになります。
そのため、0から100までの途中の数値を表示する「カウントアップアニメーション」は実現できません。
ステップ4：アニメーション設定とステートマシン作成
最後に、アニメーションを設定していきます。
アニメーションタブに切り替えると、デフォルトで「Timeline1」があるので、ここにキーフレームを追加します。
プロパティグループを選択し、最初のフレームに「0」のキーフレームを設定します。
これで、開始点が0に設定されました。
次に、1秒後の位置に移動し、終了値を「100」に設定します。
線グラフも追加している場合は、線グラフのレイヤーの
Trim Effect > Start
の数値にキーフレームを追加します。
こちらも0％から100％になるよう、2つのキーフレームを追加します。
●タイムラインでのアニメーションプレビュー
タイムライン上でスペースキーを押すと、アニメーションが再生されます。
注意点としては、このタイムライン上ではプロパティグループのアニメーションが再生されないということです。
線グラフが0%から100%に表示されるトリムパスアニメーションは確認できますが、ここでテキストレイヤーは「text」のままで変化がありません。
●ステートマシンでのアニメーションプレビュー
プロパティグループでキーフレームを設定したカウントアップアニメーションを確認するには、State Machine（ステートマシン）を開きます。
デフォルトでは、EntryからTimeline1へ遷移する設定になっています。
この状態でアニメーションを再生すると、ただちにTimeline 1で設定したアニメーションが自動で開始されるという設計です。
このステートマシン上でスペースキーを押して、再度アニメーションを確認してみましょう。今度は、数字の0が100になるまでのカウントアップアニメーションが表示されたと思います。
小数点以下を非表示にしたい場合
しかし、現状のカウントアップアニメーションでは、小数点以下の値も表示されてしまいます。
小数点以下の数字を非表示にし、整数のみのカウントアップアニメーションにする場合は、コンバーターの「textNumControl」を選択します。
右側にConvert to Stringのプロパティ設定画面が表示されるので、From a Number内にある「Round Decimals」にチェックを入れましょう。
この状態で再度ステートマシンを再生すると、今度は数字の0から100まで、小数点以下の数値は表示されない、整数だけのカウントアップアニメーションができました。
小数点以下を表示にしたい場合
逆に、小数点以下の細かい数字も表示させたい場合は、先ほどのConvert to Stringで0にしたRound Decimalsの数字を変更します。
小数点第一位（例：0.1）まで表示させるなら「1」、小数点第二位（例：0.01）まで表示させるなら「2」に設定すると、設定した位までの小数点以下の数字が、カウントアップアニメーションで表示されます。
上記を応用して、さらに細かいデザインを加えると、このようなアニメーションも作成可能です。
まとめ
以上が、Riveでデータバインドを使ってカウントアップアニメーションを作成する方法解説でした。
WebサイトのUIアニメーションとして活用できるほか、inputを設定すれば、クリックで再生されるマイクロインタラクションとしても応用できます。
Rive Marketplaceには、今回ご紹介したカウントアップアニメーションのサンプルを公開しています。Remix可能ですので、ソースファイルが見たいという方はぜひご覧ください。
Remix可能なRiveソースファイル（Rive Marketplaceより）
【シンプル版】Riveカウントアップアニメーション サンプル
【応用版】Riveカウントアップアニメーション サンプル
参考になったらLikeボタンを押していただけると嬉しいです(/・ω・)/❤
LITTLE FUJIでは、Riveエキスパートバッジを取得したデザイナーのAyaka Fujiが、Riveアニメーション制作のご依頼を承っております。
触って動かせるインタラクティブアニメーションや、Webサイトに最適な軽量UIアニメーション制作など、Riveを使ったアニメーションを検討中の方はぜひお気軽にご相談ください。
最近、ココナラでもRiveアニメーションの制作サービスを販売開始いたしました！ 【ココナラ】Riveインタラクティブアニメーションを制作します
※ココナラは利用者手数料が高額なため、LITTLE FUJI Design Studioのお問い合わせフォームから直接ご相談いただく方がおすすめです。
