WordPressブログにRiveのボタンアニメーションを実装しよう!

WordPressブログにRiveのボタンアニメーションを実装しよう! Rive
Rive
当ページのリンクには広告が含まれています。
  • クリック率をあげたい…
  • 自分の活動を見て欲しい!

WordPressブログなどで装飾されたボタン…
目を惹きますよね。

自分の世界観をそのまま表現するには…
Riveのアニメーション装飾がおすすめです。

『…Rive??』という方は、こちらから♪

  • CSSの装飾で十分…
  • イラレやフォトショも無いし…

そんな方にこそおすすめ。

Riveは、スタンドアロンでデザインからアニメーションを作成できる優秀なツールです!

さらに…
無料で使用できるの大きなポイント。

  • デザイン制作
  • アニメーション制作
  • Listener制御(ホバーやクリック制御など)

もちろん、無料のお約束…
機能制限』はあります。

…しかし、
アニメーションを学ぶ上で、きっとあなたの役に立つでしょう。

簡単なアニメーションなら…
無料で使える機能でも問題ありません。

ちなみに…
私もボタンアニメーションを作成してみました。

「OFUSE」をください。
…冗談です。

今回は、WordPressにRiveで作ったボタンアニメーションを実装する方法を紹介します。
※ 基本的なクリック制御(OpenURL)付き

デザインに精通されている方なら…
より本格的な作品も作れます

ロリポップで低コストなブログ運営を始めて…
作品を紹介しながら製作費を稼ぐのもアリです♪

スポンサーリンク

ボタンアニメーションの効果

CSSよりも自由度が高いボタン

まずは…
Rive公式HPの「ボタン」に触れてください。

ロケット発射や猫ちゃんの手など…
ボタンアニメーションの可能性を感じますよね。

CSSで装飾したボタンも…
もちろん効果的です。

しかし…
ライバルと絶対に被らない、唯一無二の作品を自分のブログに載せられたら絶対に楽しいはず!

クリック率

CSSのホバーアクション
みなさん使われていますよね。

Riveでは、ユーザーの動作に連動したアニメーションも制作できます。

また、その制御をアニメーション側で設定することができます。

それ以外にも…

  • 文字の入力に合わせて動くアニメーション
  • 広告に合わせた効果的なオリジナルボタン

これらの機能を装備したボタン…
訴求性を高めてくれると思いませんか?

クリック率を上げるため
あなたもオリジナルのボタンアニメーションを作ってみませんか?

Riveについて

今回は、細かい操作方法は割愛しますが…
公式ページや動画を参考にしてみてください。

Rive公式ガイド

Rive公式YouTubeCH

Riveでボタンデザインを作ろう

インコをモチーフにしたオリジナルデザインの画像
デザインモードで作成
  • STEP1
    基本となるボタンを作成
    • 初めは簡単な形状を作成しましょう
  • STEP2
    Eventを設置
    • イベントの設定(OpenURL)
  • STEP3
    ターゲットを作成
    • クリックの対象エリア

デザイン

画面右上のボタンから…
デザインモード」に設定してください。

詳しいデザイン方法は…
Rive公式Guideを参考にしてください。

まずは、簡単な図形を使用して作成しましょう。


\ 最短で身につける最適解 /

その技術を「副業」にできるかも…

何でも相談できるメンター
あなたにはいますか?

まずは無料相談↓↓

テックアカデミー無料メンター相談

テキスト

実は、数年前のRiveでは…
テキストは作成できませんでした。

しかし…
最近のバージョンアップにより、Rive内でテキストの作成が可能になりました。

どんどんと機能が追加されて便利になっていくRiveを体験してみてくださいね。

フォント設定
テキストの入力

イベントとターゲットの作成

今回は…
ボタンクリック後に任意のURLが開くボタンアニメーションを作成します。

デザイン時に設定することは2つ。

  • イベント(OpenURL)設定
  • ターゲット(クリックの当たり判定エリア)
イベント(OpenURL)

今回の例では…
OpenURL」の「Self」を選択します。

内訳は以下の通りです。

  • Type
    • Open URL
  • URL Properties
    • Self(新しいページを開く)
  • その他の設定について
    • Blank
      • 通常はリンクを新しいタブで開く
      • イベントの通知を設定しない場合、ブラウザはポップアップがブロックされたことをユーザーに通知する可能性がある
    • Parent
      • 現在のブラウジングコンテキストの親コンテキストで開く
      • 親がない場合はSelfとして動作
    • Self
      • 現在のブラウジングコンテキストで開く
    • Top
      • 最上位のブラウジングコンテキストで開く
      • 祖先がない場合は、Selfとして動作
ターゲット(クリック対象エリア)

この後のアニメーションモードで設定しますが…
イベントが発火するクリック対象エリアを
ターゲット」として作成します。

個別に作成する目的は…
ボタンデザイン変更時の調整のためです。

もちろん、ボタンパーツを「ターゲット」にすることも可能です。

ボタン以外のアニメーション制作に備えて…
指定範囲を”ターゲット”として設置する癖をつけておきましょう。

ボタン形状などのデザインパーツをコピペして、同じ範囲の「ターゲット」を作成します。

“範囲”自体が目的なので…
非表示に設定しておきます。

Riveでアニメーションを作ろう

画面右上のボタンから…
アニメーションモード」に設定してください。

Riveのアニメーション制作のイメージは
以下の通りです。

  • タイムライン
    • デザインモードで作成したパーツを個別にアニメーション化
  • ステートマシン
    • 個別のタイムラインを接続
    • 入力値による条件分岐
    • ポインター検知
    • イベント発火と通知設定

タイムラインの作成

画面左下にある「Animations」欄のプラスボタンから「タイムライン」を作成してください。

デフォルト表示のタイムラインを編集しても問題ありません。

Riveの「タイムライン」
  • デザインパーツをアニメーション化する機能
    • アニメーションの種類
      • ワンタイム
      • ループ
      • 反復
    • 時間設定
      • 継続時間
      • 再生速度
      • fps設定
    • キーフレーム
      • デザインパーツのキーフレーム設定

例としては…

  • 無操作(アイドリング)時のタイムラインは…
    繰り返し動作
  • クリック時のタイムラインは…
    ワンタイム動作

デザインを基にアニメーションを想像しながら作成しましょう。

Riveの公式動画を参考に…
少しずつ覚えていきましょう。

慣れないと…
『めんどくさい』アレルギーを起こしますよね。

丸い形状のデザインパーツが弾むような…
簡単なアニメーションから作ってみましょう。

今回のタイムライン構成

今回のボタンアニメーション…
タイムライン構成は、次の2つです。

  • アイドリング用のタイムライン
    • アイドリング時のアニメーション
      • 無操作時の繰り返し動作
  • イベント発火用のタイムライン
    • ブランク(空のタイムライン)
      • イベント発火用に設置

上達してきたら…
クリック時のアニメーションを混ぜるなど
様々な表現が実現できます♪

ステートマシンの作成

画面左にある「Animations」欄にある既存の
ステートマシン」を選択します。

新規作成しても問題ありません。

Riveの「ステートマシン」
  • 各タイムラインの制御を行う機能
    • Inputs値による条件分岐
    • Listenes(ポインター検知)
    • タイムラインの接続
① 「Inputs」設定
Riveの「Inputs
  • 各タイムライン接続の条件分岐に使われる値

プラスボタンから新規作成しましょう。
「Inputs」は、3種類あります。

  • Number
  • Boolean
  • Trigger

作りたいアニメーションの制御に合わせて使い分けていきます。

例えば…

  • 入力数値(Number)に合わせて…
    コップの水量が変化するアニメーション
  • 選択(Boolean)に合わせて…
    アイテムを身に付けるアニメーション
  • タップ(Trigger)したら…
    キャラクターがジャンプするアニメーション

今回は…
”click”という名前で「Boolean」を設定します。
初期値を「False(チェックなし)」にしましょう。

②「Listeners」設定
Riveの「Listeners
  • ユーザーのポインター動作を検知

プラスボタンから新規作成します。

今回は…
”pointer_down”という名前で作成しました。

作成した「Listeners」を選択すると…
画面右に詳細設定の欄が表示されます。

一番上の項目は…
検知する範囲(ターゲット)を設定する欄です。
ここにデザインモードで作成したクリック範囲の”ターゲット”を設定します。

真ん中の項目は…
検知したいポインターの種類を設定します。

RiveのListeners(ポインター検知)は
5種類あります。

  • Pointer Enter
    • ターゲット領域に入ったことを検知
  • Pointer Exit
    • ターゲット領域から出たことを検知
  • Pointer Down
    • クリックやタップ検知
  • Pointer Up
    • クリックやタップのリリースを検知
  • Pointer Move
    • ターゲット領域の動きを検知

今回は、ボタンアニメーションですので…
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実装例

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>
  • OpenURL後、”Safari”で「戻る」を押して画面遷移した場合、アニメーションがリセットされない問題があります。

    これは読み込み高速化(キャッシュ)によるものです。

    ブラウザバックを検知してRiveのロードをリセットすることで対処可能です。
    適宜調整してください。

  • 同一のRiveプロジェクトファイル内のアートボードを変更する際は、”artbord”名と”stateMachines”名を変えれば同じランタイム用ファイル(.riv)で利用可能(ファイルURLはDL毎に変更)です。
  • WordPressの同じページ上に複数のJavaScriptを含むカスタムHTMLウィジェットを配置すると、一部のウィジェットが正常に表示されないことがあります。

    その際は、”canvas id”、”変数名”(”const r = …”の部分)、”該当箇所”を変更して試してみてください。

有料版の機能である「ShareLink」は非常にシンプルに実装できます。

無料版の機能である「ランタイム」を使用する場合は、ファイルの扱いや記述など少し複雑です。

しかし、理解して慣れてしまえば問題なく扱えると思います。

こちらの記事も参考にしてくださいね。


\ 最短で身につける最適解 /

その技術を「副業」にできるかも…

何でも相談できるメンター
あなたにはいますか?

まずは無料相談↓↓

テックアカデミー無料メンター相談

Riveボタンアニメーションのまとめ

WordPressブログにRiveのボタンアニメーションを実装しよう!

私が始めてRiveに触れたのは、Androidアプリの制作を始めた頃でした。

アプリ立ち上げ時のスプラッシュ画面やUIにアニメーションを採用したことがきっかけです。

もちろん…
プロのデザイナーさんとは雲泥のレベル…

それでも、イタズラ書きの延長で始めたRiveのアニメーションは、とても楽しいです。

WordPressでブログを始めて、Riveのプラットフォームの広さを思い出しました。

少し難しく感じるかもしれませんが…
この記事が何かのきっかけとなれば幸いです。

是非、チャレンジしてみて下さいね♪

あなたの世界観が…
思わぬ効果を生み出すかもしれません。

タイトルとURLをコピーしました