11ヶ月前に投稿

Icons8 Animated Icons with Lottie

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

4.5

Icons8Free 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を作成

Animated Icons – 500 Free Icons

<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>
Maneki Animated Icon

必須

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を指定する方法

Caution

同じID名は1つのWebページに1つまでと決まっています。

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

招き猫

招き猫 (まねきねこ)は、前足で人を招く形をした、猫の置。猫は農作物や蚕を食べるネズミを駆除するため、古くは養蚕の縁起物でもあったが、養蚕が衰退してからは商売繁盛の縁起物とされている。右手 (前脚)を挙げている猫は金運を招き、左手 (前脚)を挙げている猫は人 (客)を招くとされる。黒い猫は、昔の日本では『夜でも目が見える』などの理由から、「福猫」として魔除けや幸運の象徴とされ、黒い招き猫は魔除け厄除けの意味を持つ。また、赤色は疱瘡や麻疹が嫌う色、といわれてきたため、赤い招き猫は病除けの意味を持つ。また、福の字が逆さまに書かれているのは、福を倒すとしてそこから似た漢字の到達をあらわす。

招き猫 – Wikipedia

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

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

ネコ (猫)

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

ネコ – Wikipedia

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 (直リンク)での方法ですが、

直リンクとは、あるWebサイトの画像ファイルなどを、外部のWebページから参照して埋め込んで表示したり、ファイルを直接開くことができるリンクを張ること。

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圧縮して使用する事が望ましいようです。

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

Icons8 Animated Icons with Lottie