WordPressでRiveのアニメーションを動かしてみる

前回はRiveというアニメーションツールを使ってスマホアプリでアニメーションを動かしてみました

RiveのすごいところはAndroid、iOS、ウェブ何でも動くところです

ウェブでも動くので当然WordPressでも動作します

ということでWordPressで動かしてみました

動かした結果

こんな感じです

数行のコードを埋め込むだけで動かせました

どうやって動かすのか？

Riveファイルの準備

Riveのサイトで作成しダウンロードします

面倒な方はこちらを使ってください

Riveファイルをワードプレスにアップロードする

ダウンロードしたapple.rivファイルをワードプレスにアップロードします

そのままでは.rivファイルがアップロードできないのでプラグインをインストールします

WP Extra File Typesプラグインのインストール

ワードプレスにWP Extra File Typesプラグインをインストールします

このプラグインを使うことで様々な拡張子のファイルをアップロードできるようになります

WP Extra File Typesプラグインの設定

デフォルトでは.rivファイルがアップロードできないので、

WP Extra File Typesプラグインの設定を変更します

設定画面を開き以下のように.ravを追加し、変更を保存を押します

.rivファイルアップロード

ワードプレスの投稿画面の左上のプラスボタンからファイルを検索します

アップロードから、apple.rivファイルを選択します

アップロードしたファイルのURLを確認する

アップロードしたファイルをクリックし、「URLをコピー」を押します

apple.rivのURLがコピーできました

ブログにコードを埋め込む

カスタムhtmlでコードを埋め込みます

カスタムHTMLを選択後以下のコードを埋め込みます

<canvas id="canvas-apple" 　width="500" height="500"></canvas>

<script src="https://unpkg.com/rive-js"></script>
<script>
    new rive.Rive({
        src: 'アップロードした.rivファイルのURL',
        canvas: document.getElementById('canvas-apple'),
        autoplay: true
    });
</script>

これで完了です

おつかれさまでした

もっとすごいアニメーション

アニメーションがしょぼいと思った方へ

頑張ればこんな事ができます

あとがき

Riveは無料で使える便利なツールです

AdobeのAfter Effectsが年額で３万円ほどするので、

アニメーション触ってみたいという方には敷居が低くおすすめです