6ヶ月前に投稿

Lottie Animation を表示 (class属性から要素を取得)

2021年1月27日

この記事は約 11 分で読めます。

4.5

Bodymovin and Lottieを使用して、
ブログでAfter Effects
アニメーションを実装する方法を
いくつか記事にしましたが、
(下記リスト参照)

getElementById() で要素の取得が主で、
class名 (class属性値)から要素を取得する方法は例がなく、
自身で何とかする事にしました。

経緯

id属性(identifier)は要素を識別するために固有の ID名(識別子)をつけます。ひとつの文書内で同一の ID名を複数つけること(重複)はできません(つまり、一意でなければならない)。

id属性|(X)HTML辞典 (w3g.jp)

class属性は要素に対して分類を指定します。
分類ですから class属性の値は
HTML文書内で複数の要素に
同じ値を付けることができます。
また一つの要素に
複数の分類を付けることも可能です。

上記から、使い勝手のよい
class名 (class属性値)から
要素を取得する方法が
良いと思いました。

class名からの取得は
getElementsByClassName()
取得できますが、
単純にgetElementById()
置き換えただけでは上手くいきません。

Bootstrap and jQueryで表示させる
記事を見つけましたので、
そこからカスタマイズしていきます。

Getting Started

bodymovin Javascriptライブラリを入手します。

Bodymovin can render Lottie JSON files on the web.First, get the bodymovin player javascript library. It is statically hosted at https://cdnjs.com/libraries/bodymovin or you can get the javascript directly by clicking in the bodymovin plugin.Get Player

Web (airbnb.io)
<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- OR -->
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>

jQuery

以下がjQuery のコード。

   $(function () {
     $('.bodymovin').each(function () {
       var element = $(this);
       var animation = bodymovin.loadAnimation({
         container: element[0],
         renderer: 'svg',
         loop: true,
         autoplay: true,
         path: element.data('icon')
       });
     });
   });
<div class="bodymovin p-4" data-icon="/animations/01.json"></div>

What this code does is to find all HTML elements with the class , read their attribute and use it as a path to the animation file and apply the Lottie magic on it.bodymovindata-icon

How to use animated icons on a website or a mobile app | by Emil Nikov | The Iconfinder Blog

上記を
Vanilla JS に置き換えてみました。
(今のご時世、脱jQuery だそうだ。)

Vanilla JS とは
単にJavaScriptの事。
ネイティブなJavaScript、
Pure JSとも言う。
javascriptを
より簡単便利な
フレームワークありきで
考える風潮を
皮肉ったジョークです。

Vanilla JS

Document.getElementsByClassName()

const myAClass = document.getElementsByClassName('bodymovin');
for (let i = 0, len = myAClass.length; i < len; i++) {
  loadMYAnimation(myAClass[i]);
}

function loadMYAnimation(myAClass) {
  const animation = bodymovin.loadAnimation({
    container: myAClass,
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: myAClass.dataset.icon,
    rendererSettings: {
      progressiveLoad: true
    }
  });
}

HTML

<span class="bodymovin winter_activity_01" data-icon="/animation/data.json"></span>

結果

CSS

span.bodymovin {
  display: inline-block;
  position: relative;
}

span[class*="winter"] {
  width: 28px;
  height: 28px;
  top: 5px;
  margin: 0 2px 0;
}

Vanilla JS Ⅱ

Document.getElementsByClassName()

const animations = ['angry-cat', 'cat-meow', 'globe', 'information'];
let i = 0,
  len = animations.length;
for (i = 0; i < len; i++) {
  let anim;
  const elem = document.getElementsByClassName(animations[i]);
  const animData = {
    container: elem[0],
    renderer: 'svg',
    loop: true,
    autoplay: true,
    rendererSettings: {
      progressiveLoad: true,
    },
    path: 'https://maxst.icons8.com/vue-static/landings/animated-icons/icons/' + animations[i] + '/' + animations[i] + '.json'
  };
  anim = bodymovin.loadAnimation(animData);
}

Document.querySelectorAll()

※ 引数の指定は ('angry-cat') ではなく、
classの場合は ('.angry-cat') 、IDの場合は ('#angry-cat') とします。

replace () メソッドで classの「.」を削除します。

const animations = ['.angry-cat', '.cat-meow', '.globe', '.information'];
let i = 0,
  len = animations.length;
for (i = 0; i < len; i++) {
  let anim;
  const elem = document.querySelectorAll(animations[i]);
  const myAnim = animations[i].replace(/^./g, "");
  const animData = {
    container: elem[0],
    renderer: 'svg',
    loop: true,
    autoplay: true,
    rendererSettings: {
      progressiveLoad: true,
    },
    path: 'https://maxst.icons8.com/vue-static/landings/animated-icons/icons/' + myAnim + '/' + myAnim + '.json'
  };
  anim = bodymovin.loadAnimation(animData);
}

HTML

<span class="angry-cat"></span>
<span class="cat-meow"></span>
<span class="globe"></span>
<span class="information"></span>

結果

  • ネコネコ
  • 地球地球
  • インフォメーション

CSS

span[class*="cat"], span.globe {
  display: inline-block;
  width: 28px;
  height: 28px;
  position: relative;
  top: 5px;
  margin: 0 2px 0;
}

span.information {
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
  top: 5px;
  margin: 0 2px 0;
}

Vanilla JS Ⅲ

Document.querySelector()

Document.querySelector()を使うと
class属性値の要素を取得できます。
getElemetnsByClassName()
ばかりこだわっていたので、
勉強不足
でした。

let svgContainer = document.querySelector('.maneki');
let animation = bodymovin.loadAnimation({
  container: svgContainer,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: "https://maxst.icons8.com/vue-static/landings/animated-icons/icons/maneki/maneki.json"
});

結果

Icons8 has a lot of free animated icons here

おまけ 着jQuery

$(function () {
  const animations = ['angry-cat', 'cat-meow', 'globe', 'information'];
  $.each(animations, function () {
    let anim;
    const elem = document.getElementsByClassName(this);
    const animData = {
      container: elem[0],
      renderer: 'svg',
      loop: true,
      autoplay: true,
      rendererSettings: {
        progressiveLoad: true,
      },
      path: 'https://maxst.icons8.com/vue-static/landings/animated-icons/icons/' + this + '/' + this + '.json'
    };
    anim = bodymovin.loadAnimation(animData);
  });
});

最後に

WordPressには、
デフォルトでjQueryが読み込まれているので、
こだわる必要がなければ、
jQueryのコードでもよいと思います。
わたし自身、特にこだわりもなく、
jQuery でもかまわないのですが、
勉強を兼ねて Vanilla JSに
書き換えて
みました。

貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました

Lottie Animation を表示 (class属性から要素を取得)