Icons8 Animated Icons with Lottie

2021年1月16日

Icons8 の Free Animated Icons の
JSON ファイルを Lottie で
表示してみたいと思います。

get the bodymovin javascript library.

まず、
bodymovin player の
Javascriptライブラリを入手します。

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.5/lottie.min.js" integrity="sha512-0bCDSnaX8FOD9Mq8WbHcDwshXwCB5V4EP+UBu87WQgga2b7lAsuEbaSmIZjH/XEmNhJuhrPbFHemre5HZwrk9w==" crossorigin="anonymous"></script>

アニメーションを含むspanを作成

<span> 要素に特定の属性を追加します。
class は “lottie" に設定します。
lottie 以外に設定しても動作しません。

HTML

<span style="width:28px;height:28px" class="lottie" data-animation-path="https://maxst.icons8.com/vue-static/landings/animated-icons/icons/maneki/maneki.json" data-anim-loop="true" data-name="maneki"></span>

必須

style="width:28px;height:28px"

• style 属性でアイコンのサイズを指定。

class="lottie"

data-animation-path="https://maxst.icons8.com/vue-static/landings/animated-icons/icons/maneki/maneki.json"

• a class called “lottie"
  class 名は “lottie" 以外は表示されません。
• a “data-animation-path" attribute with relative path to the data.json
  json ファイルへのパス。

Optional

data-anim-loop="true"

data-name="maneki"

• a “data-anim-loop" attribute
  アニメをループするかどうか。
• a “data-name" attribute to specify a name to target play controls specifically
  再生コントロールを具体的にターゲットとする名前を指定する。

CSS

span.lottie {
  display: inline-block;
  position: relative;
  top: 5px;
  margin: 0 2px 0;
}

JavaScriptでアニメーションの再生

繰り返し (for)と文字列の長さ (length)を
取得しています。
ヒントは
look at the great animations exported on codepen
See examples on codepen.
↑ ここにありました。

1つのページに複数のアイコンを
使う際に JavaScriptを
複数書かなくても済むので
効率が良いかと思います。

同アイコンに複数のIDを指定する方法

HTML

<p>招き猫 (まねきねこ) <span id="maneki_1"></span>は、前足で人を招く形をした、猫の置物<span id="maneki_2"></span>。</p>

JavaScript

var animations = ['maneki_1', 'maneki_2', 'maneki_3', 'maneki_4', 'maneki_5', 'maneki_6'];
var i, len = animations.length;
for (i = 0; i < len; i += 1) {
  var anim;
  var elem = document.getElementById(animations[i]);
  var animData = {
    container: elem,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://maxst.icons8.com/vue-static/landings/animated-icons/icons/maneki/maneki.json',
    rendererSettings: {
      progressiveLoad: true,
    }
  };
  anim = bodymovin.loadAnimation(animData);
};

new version の Animated icons 2.0 は
リンクのパスが違います。

result

複数のアイコンを取得する方法

HTML

<p>ネコ (猫) <span id="angry-cat"></span>は、狭義には食肉目ネコ科ネコ属に分類されるリビアヤマネコ (ヨーロッパヤマネコ)が家畜化された <span id="cat-meow"></span>イエネコ (家猫、Felis silvestris catus)に対する通称である。イヌ (犬)と並ぶ代表的なペットとして日本を含め <span id="globe"></span>世界中で広く飼われている。</p>

JavaScript

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

new version の Animated icons 2.0 は
リンクのパスが違います。

result

CSS (共通)

CSSの属性セレクタで指定しています。
display: inline-block; で横並び。
position: relative; を書かないと、
アイコン位置の調整が出来ません。
Refer to「Tips for Aligning Icons to Text」

span[id^="maneki"], span[id*="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;
}

Notes

上記 Examplesは
direct link (直リンク)での方法ですが、

gzipping the animation jsons and the player have a huge reduction on the filesize. I recommend doing it if you use it for a project.

GitHub – airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/

「animation jsonsをgzipすると、
プレーヤーは、ファイルサイズに大幅な削減を持っています。
プロジェクトに使用する場合は、
それを行うことをお勧めします。」

gzip (ジー・ジップ)は、データ圧縮プログラムのひとつ、およびその圧縮データのフォーマットである。「GNU zip」の略であり GNUプロジェクトによって開発・メンテナンスされている。現在、多くのUNIXに標準搭載される。

gzip – Wikipedia

上記からも、jsonファイルをダウンロードし、
gzip圧縮して使用する事が望ましいようです。

Animated Icons - 500 Free Icons

Add user delight to your site with this free pack of 300 animated icons in JSON (Lottie), GIF, a ...

 https://icons8.com/free-animated-icons

Lottie Docs

Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animation ...

 http://airbnb.io/lottie/#/web