svgアイコンが動く「useAnimations」の実装方法

# 実装手順

## 1.公式サイトからダウンロードする
[useAnimations](https://useanimations.com/index.html)
ここには、ハンバーガーメニューやSNSアイコンなど、
あらゆるアイコンが無料で使用できます。

気になるアイコンにマウスオーバーすると、
Downloadボタンが出てきますので、それをクリックしてください。

## 2.ダウンロードしたzipから必要なファイルを抜き取る

zipの中には、

- svg

- json

の2種類が入っています。
静止しているアイコンが欲しい場合は、
svgをimgタグに普通に設置してください。

**hoverやclickで動く**ようにするには、
svgは使わず、
**json**の方を使用します。

## 3.その他に必要なファイルを用意する

### javaScriptで必要なもの

- jQuery
公式は、jquery-3.3.1.min.jsを使用しています。

- lottie-player.js
これ、どこから落としてくるのか分からなかったのですが、
公式のjavaScriptを調べると、URLがこれになっていました。
[https://d33wubrfki0l68.cloudfront.net/js/6b61e0a7f8d311b0d8e7594ed9df369497d4dc9d/js/lottie-player.js](https://d33wubrfki0l68.cloudfront.net/js/6b61e0a7f8d311b0d8e7594ed9df369497d4dc9d/js/lottie-player.js)
ダウンロードし、自分のサーバーに入れて使用されるのが良いかと思います。
（正規ルートからダウンロードする方法があれば、
　教えていただけると有難いです。）


## 4.実装する

- Social media  Instagram Facebookアイコン

- Navigation  Menu V3（ハンバーガーメニュー）

の実装例です。

### html

アイコンを入れたいタグの直ぐ上の親に、
クラス（anim-〇〇）を設定してください。

```html
<!--インスタグラム、facebookアイコン（hover時）-->
<ul>
  <li class="sociallink"><a class="anim-icon-instagram" href="インスタグラムへのリンク" target="_blank" rel=”noopener”></a></li>
  <li class="sociallink"><a class="anim-icon-facebook" href="フェイスブックへのリンク" target="_blank" rel=”noopener”></a></li>
</ul>

<!--ハンバーガーメニュ（クリック時）ー-->
<button class='header-burger-btn anim-icon-menu-003'></button>
```

### javaScriptライブラリ
body締めタグの直ぐ上に入れても動作します。

```html
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="js/lottie-player.js" type="text/javascript"></script>
```

### CSS

```CSS
/*アイコンの大きさ変えたい時に入れてください-----------------*/
.sociallink a {
    height: 29px;
    width: 29px;
    display: block;
}
.sociallink svg {
    /*どちらかを100%,autoにする*/
    height: 100%;
    width: auto;
}

/*アイコンの色を変えたい時に入れてください-----------------*/
.header-burger svg * {
    stroke: #fff;
}
```

### javaScript
javaScriptライブラリの後に入れてください。

```javascript
//=========================
//  svg animation
//=========================
//絶対パス取得
//サイトに実装する際、相対パスだとページによってURLが変わる場合があるので、トップページURLを入れる
var homeUrl = 'サイトのトップページURLを入れる';

$(window).on('load',function(){

	//facebook(on hover)
	var iconFacebook = this.document.querySelector('.anim-icon-facebook');
	var animationFacebook = bodymovin.loadAnimation({
		container: iconFacebook,
		renderer: 'svg',
		loop: true,
		autoplay: false,
		path: homeUrl + "js/svg-animation/facebook.json"
	});
	animationFacebook.setSpeed(1);

	var directionFacebook = 1;
		iconFacebook.addEventListener('mouseenter', (e) => {
		animationFacebook.setDirection(directionFacebook);
		animationFacebook.play();
	});
		iconFacebook.addEventListener('mouseleave', (e) => {
		animationFacebook.stop();
	});

	//instagram(on hover)
	var iconInstagram = document.querySelector('.anim-icon-instagram');
	var animationInstagram = bodymovin.loadAnimation({
		container: iconInstagram,
		renderer: 'svg',
		loop: false,
		autoplay: false,
		path: homeUrl +  "js/svg-animation/instagram.json"
	});
	animationInstagram.setSpeed(1);

	var directionInstagram = 1;
		iconInstagram.addEventListener('mouseenter', (e) => {
		animationInstagram.setDirection(directionInstagram);
		animationInstagram.play();
	});
		iconInstagram.addEventListener('mouseleave', (e) => {
		animationInstagram.setDirection(-directionInstagram);
		animationInstagram.play();
	});

	//hamberger-button
	var icon6 = document.querySelector('.anim-icon-menu-003');
	var animation6 = bodymovin.loadAnimation({
					container: icon6,
					renderer: 'svg',
					loop: false,
					autoplay: false,
					path: homeUrl +  "js/svg-animation/menu-003.json"
	});
	animation6.setSpeed(1);

	var direction6 = 1;
		icon6.addEventListener('click', (e) => {
		animation6.setDirection(direction6);
		animation6.play();
		direction6 = -direction6;
	});

});
```


# 補足

## 1ページで複数箇所に設置したい場合
1ページに表示する数の分、javaScriptの記述も増やす必要があります。
例えば、facebookアイコンを2つ表示させたい場合は
以下のようにします。

```javascript
	//1つ目の記述
	//上と同じ内容です
	//facebook(on hover)
	var iconFacebook = this.document.querySelector('.anim-icon-facebook');
	var animationFacebook = bodymovin.loadAnimation({
		container: iconFacebook,
		renderer: 'svg',
		loop: true,
		autoplay: false,
		path: homeUrl + "js/svg-animation/facebook.json"
	});
	animationFacebook.setSpeed(1);

	var directionFacebook = 1;
		iconFacebook.addEventListener('mouseenter', (e) => {
		animationFacebook.setDirection(directionFacebook);
		animationFacebook.play();
	});
		iconFacebook.addEventListener('mouseleave', (e) => {
		animationFacebook.stop();
	});

	//2つ目の記述
	//1つ目の記述と関数・クラスが被らないように名前を変更してください。
	//facebook(on hover) footer
	var iconFacebook2 = this.document.querySelector('.anim-icon-facebook--footer');
	var animationFacebook2 = bodymovin.loadAnimation({
		container: iconFacebook2,
		renderer: 'svg',
		loop: true,
		autoplay: false,
		path: homeUrl + "js/svg-animation/facebook.json"
	});
	animationFacebook2.setSpeed(1);

	var directionFacebook2 = 1;
		iconFacebook2.addEventListener('mouseenter', (e) => {
		animationFacebook2.setDirection(directionFacebook2);
		animationFacebook2.play();
	});
		iconFacebook2.addEventListener('mouseleave', (e) => {
		animationFacebook2.stop();
	});
```

## 上記以外の「useAnimations」アイコンを使いたい場合
上では、Instagram、Facebook、ハンバーガーメニューの実装方法をご紹介しました。
これ以外のアイコンを実装したい場合、
javaScriptの部分を、
公式の以下のファイルから、該当部分をコピペし、改造してください。
[https://d33wubrfki0l68.cloudfront.net/js/e09b5e0935c0a09877e0cea70a5360d1dd4ce169/js/lottie-settings.js](https://d33wubrfki0l68.cloudfront.net/js/e09b5e0935c0a09877e0cea70a5360d1dd4ce169/js/lottie-settings.js)


## IE11では動作しないよ

**IE11では、**

-- **addEventListener('mouseenter', (e)**

-- **addEventListener('mouseleave', (e)**

-- **addEventListener('click', (e)**

**でエラーが出て、アイコンそのものが消えました!!!**
ほんとやめてくれ。。。。

回避策として、
IE11では、静止SVGを入れるように条件分岐する方が早いと思います。。
回避策は、
[IE11でエラーが出るjavaScriptを条件分岐で読み込まなくする方法](https://qiita.com/LifescrewDesign/items/aac3c34ba6ddc344cc7f)
をご参照ください！