Icons8 Animated Icons with Lottie

この記事は約 9 分で読めます。
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を指定する方法
同じ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
招き猫 (まねきねこ)は、前足で人を招く形をした、猫の置。猫は農作物や蚕を食べるネズミを駆除するため、古くは養蚕の縁起物でもあったが、養蚕が衰退してからは商売繁盛の縁起物とされている。右手 (前脚)を挙げている猫は金運を招き、左手 (前脚)を挙げている猫は人 (客)を招くとされる。黒い猫は、昔の日本では『夜でも目が見える』などの理由から、「福猫」として魔除けや幸運の象徴とされ、黒い招き猫は魔除け厄除けの意味を持つ。また、赤色は疱瘡や麻疹が嫌う色、といわれてきたため、赤い招き猫は病除けの意味を持つ。また、福の字が逆さまに書かれているのは、福を倒すとしてそこから似た漢字の到達をあらわす。
複数のアイコンを取得する方法
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)に対する通称である。イヌ (犬)と並ぶ代表的なペットとして日本を含め世界中で広く飼われている。
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圧縮して使用する事が望ましいようです。
貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました
Posted by FOUR 4to6
関連記事

ASCII文字のクリスマスツリー
※ クリスマスソングが、 ストリーミング再生されます。 音量に注意して下さい。 ...

テーマ Luxeritasでプッシュ通知を試してみる
Push.jsを使って、 WEBブラウザからのプッシュ通知を 送信してみます。 ...

Can I Useをブログに埋め込む
Can I Use のブラウザ対応表を ブログ内に埋め込んでみましょう。 Can ...

コメント投稿者のurlのlink-targetを_blankに且つ自サイトには付けない
当ブログの人気記事に 「テーマ Luxeritas(ルクセリタス) の “プチ” ...

WordPress ブロックエディタのプレビューメッセージを変更する
Block Editor Handbookには、 エディタエクスペリエンスの動作 ...
ディスカッション
コメント一覧
まだ、コメントがありません