前回は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が年額で3万円ほどするので、
アニメーション触ってみたいという方には敷居が低くおすすめです
コメント
アニメーションってすごいですね!
アニメーションを使ってアプリをぜひ開発してください!