WordPressブログなどで装飾されたボタン…
目を惹きますよね。
自分の世界観をそのまま表現するには…
Riveのアニメーション装飾がおすすめです。
『…Rive？？』という方は、こちらから♪
そんな方にこそおすすめ。
Riveは、スタンドアロンでデザインからアニメーションを作成できる優秀なツールです！
さらに…
無料で使用できるの大きなポイント。
もちろん、無料のお約束…
『機能制限』はあります。
…しかし、
アニメーションを学ぶ上で、きっとあなたの役に立つでしょう。
簡単なアニメーションなら…
無料で使える機能でも問題ありません。
ちなみに…
私もボタンアニメーションを作成してみました。
「OFUSE」をください。
…冗談です。
今回は、WordPressにRiveで作ったボタンアニメーションを実装する方法を紹介します。
※ 基本的なクリック制御（OpenURL）付き
デザインに精通されている方なら…
より本格的な作品も作れます。
低コストでブログ運営を始めて…
「技術ブログ」で稼ぐことも！？
[PR] おすすめサーバー
▷ ロリポップ
ボタンアニメーションの効果
CSSよりも自由度が高いボタン
まずは…
Rive公式HPの「ボタン」に触れてください。
ロケット発射や猫ちゃんの手など…
ボタンアニメーションの可能性を感じますよね。
CSSで装飾したボタンも…
もちろん効果的です。
しかし…
ライバルと絶対に被らない、唯一無二の作品を自分のブログに載せられたら絶対に楽しいはず！
クリック率
CSSのホバーアクション
みなさん使われていますよね。
Riveでは、ユーザーの動作に連動したアニメーションも制作できます。
また、その制御をアニメーション側で設定することができます。
それ以外にも…
これらの機能を装備したボタン…
訴求性を高めてくれると思いませんか？
クリック率を上げるため…
あなたもオリジナルのボタンアニメーションを作ってみませんか？
Riveについて
今回は、細かい操作方法は割愛しますが…
公式ページや動画を参考にしてみてください。
Rive公式ガイド
Rive公式YouTubeCH
Riveでボタンデザインを作ろう
- STEP1基本となるボタンを作成
- 初めは簡単な形状を作成しましょう
- STEP2Eventを設置
- イベントの設定(OpenURL)
- STEP3ターゲットを作成
- クリックの対象エリア
デザイン
画面右上のボタンから…
「デザインモード」に設定してください。
詳しいデザイン方法は…
Rive公式Guideを参考にしてください。
まずは、簡単な図形を使用して作成しましょう。
[PR] テックアカデミー
その技術を「副業」にできるかも…
「何でも相談できるメンター」
あなたにはいますか？
まずは無料相談↓↓
テックアカデミー無料メンター相談 
テキスト
実は、数年前のRiveでは…
テキストは作成できませんでした。
しかし…
最近のバージョンアップにより、Rive内でテキストの作成が可能になりました。
どんどんと機能が追加されて便利になっていくRiveを体験してみてくださいね。
フォント設定
テキストの入力
イベントとターゲットの作成
今回は…
ボタンクリック後に任意のURLが開くボタンアニメーションを作成します。
デザイン時に設定することは2つ。
イベント(OpenURL)
今回の例では…
「OpenURL」の「Self」を選択します。
内訳は以下の通りです。
ターゲット（クリック対象エリア）
この後のアニメーションモードで設定しますが…
イベントが発火するクリック対象エリアを
「ターゲット」として作成します。
個別に作成する目的は…
ボタンデザイン変更時の調整のためです。
もちろん、ボタンパーツを「ターゲット」にすることも可能です。
ボタン以外のアニメーション制作に備えて…
指定範囲を”ターゲット”として設置する癖をつけておきましょう。
ボタン形状などのデザインパーツをコピペして、同じ範囲の「ターゲット」を作成します。
“範囲”自体が目的なので…
非表示に設定しておきます。
Riveでアニメーションを作ろう
画面右上のボタンから…
「アニメーションモード」に設定してください。
Riveのアニメーション制作のイメージは
以下の通りです。
- タイムライン
- デザインモードで作成したパーツを個別にアニメーション化
- ステートマシン
- 個別のタイムラインを接続
- 入力値による条件分岐
- ポインター検知
- イベント発火と通知設定
タイムラインの作成
画面左下にある「Animations」欄のプラスボタンから「タイムライン」を作成してください。
デフォルト表示のタイムラインを編集しても問題ありません。
例としては…
デザインを基にアニメーションを想像しながら作成しましょう。
Riveの公式動画を参考に…
少しずつ覚えていきましょう。
慣れないと…
『めんどくさい』アレルギーを起こしますよね。
丸い形状のデザインパーツが弾むような…
簡単なアニメーションから作ってみましょう。
今回のタイムライン構成
今回のボタンアニメーション…
タイムライン構成は、次の2つです。
上達してきたら…
クリック時のアニメーションを混ぜるなど
様々な表現が実現できます♪
ステートマシンの作成
画面左にある「Animations」欄にある既存の
「ステートマシン」を選択します。
新規作成しても問題ありません。
① 「Inputs」設定
プラスボタンから新規作成しましょう。
「Inputs」は、3種類あります。
作りたいアニメーションの制御に合わせて使い分けていきます。
例えば…
今回は…
”click”という名前で「Boolean」を設定します。
初期値を「False(チェックなし)」にしましょう。
②「Listeners」設定
プラスボタンから新規作成します。
今回は…
”pointer_down”という名前で作成しました。
作成した「Listeners」を選択すると…
画面右に詳細設定の欄が表示されます。
一番上の項目は…
検知する範囲（ターゲット）を設定する欄です。
ここにデザインモードで作成したクリック範囲の”ターゲット”を設定します。
真ん中の項目は…
検知したいポインターの種類を設定します。
RiveのListeners(ポインター検知)は
5種類あります。
今回は、ボタンアニメーションですので…
「Pointer Down」を選択します。
一番下の「set」の項目は…
クリック・タップ検知後の「Inputs」値の変更を指定できます。
先ほど作成した「Inputs(“click”)」のBoolean値を”True”に変更するように設定します。
「Listeners」でクリックを検知して…
「Inputs」値が変更される事で次に進むイメージ。
③ タイムラインの接続
始まりは「Entry」にしてください。
ステートマシンが開始される状態を意味します。
各タイムラインの設置は…
画面左の「Animations」欄の項目から中央の「Layer」のスペースにドラッグして設置します。
各タイムラインの接続は…
ブロックの横にカーソルを合わせると表示されるマークをドラッグして接続します。
今回は使用しませんが…
双方向に繋ぐこともできます。
複雑な分岐や動作のリセット等に利用します。
接続時の条件設定は…
接続したラインの中間にある矢印マークをクリックすると設定できます。
今回は、「アイドリング」から「ブランク」に接続する中間の条件を設定します。
中間の矢印マークをクリックすると…
画面の右に「Conditions」と「Events」の欄が表示されます。
「Conditions」は…
条件分岐となる値を入力します。
今回の場合は、「Inputs」で設定した”click”のブーリアン値を”true”に設定します。
※「Listeners」のクリック検知後「Inputs」値が”true”になる
「Events」は…
デザインモードで設定した「イベント名」と
「イベント通知」を設定します。
今回の場合の「イベント通知」は…
イベント終了をブラウザに知らせることで、ポップアップブロックを防ぐ意味合いがあります。
全体の流れ
- クリックされたことをListenerが検知
- インプットが”True”に変わる
- インプットが”True”を条件に次に進む
- その際に、OpenURLイベントの発火と通知
- ブランクに移り終了
組み合わせでもっと複雑な表現も可能です。
是非チャレンジしてみてくださいね。
こちらのRive公式Guideを参考にしてください。
ファイルのダウンロード
今回は、無料で使える機能を紹介するため、
ランタイム用ファイルをダウンロードします。
※ 有料機能ですが「ShareLink」だと簡単に実装できます。
WordPressで表示させる方法
カスタムHTML実装例
<html>
<head>
<title>Rive Hello World</title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script src="https://unpkg.com/@rive-app/canvas@2.7.0"></script>
<script>
// Safariの「戻る」対策（※下記参照）
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
r.reset();
r.play("〇〇〇〇（stateMachinesの名前）");
}
});
const r = new rive.Rive({
src: "〇〇〇〇.riv（ファイルのURL）",
canvas: document.getElementById("canvas"),
// artboard: "artboardの名前"
automaticallyHandleEvents: true, // Automatically handle OpenUrl events
autoplay: true,
stateMachines: "〇〇〇〇（stateMachinesの名前）",
onLoad: () => {
r.resizeDrawingSurfaceToCanvas();
},
});
</script>
</body>
</html>有料版の機能である「ShareLink」は非常にシンプルに実装できます。
無料版の機能である「ランタイム」を使用する場合は、ファイルの扱いや記述など少し複雑です。
しかし、理解して慣れてしまえば問題なく扱えると思います。
こちらの記事も参考にしてくださいね。
その技術を「副業」にできるかも…
「何でも相談できるメンター」
あなたにはいますか？
まずは無料相談↓↓
テックアカデミー無料メンター相談
Riveボタンアニメーションのまとめ
私が始めてRiveに触れたのは、Androidアプリの制作を始めた頃でした。
アプリ立ち上げ時のスプラッシュ画面やUIにアニメーションを採用したことがきっかけです。
もちろん…
プロのデザイナーさんとは雲泥のレベル…
それでも、イタズラ書きの延長で始めたRiveのアニメーションは、とても楽しいです。
WordPressでブログを始めて、Riveのプラットフォームの広さを思い出しました。
少し難しく感じるかもしれませんが…
この記事が何かのきっかけとなれば幸いです。
是非、チャレンジしてみて下さいね♪
あなたの世界観が…
思わぬ効果を生み出すかもしれません。
