matsurai25/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<script
			src="https://code.jquery.com/jquery-3.3.1.min.js"
			integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			crossorigin="anonymous"
		></script>
		<script src="./lottie.js"></script>
		<style>
			body {
				background-color: #fff;
				margin: 0px;
				height: 100%;
				overflow: hidden;
			}
			#lottie {
				background-color: #fff;
				width: 100%;
				height: 100%;
				display: block;
				overflow: hidden;
				transform: translate3d(0, 0, 0);
				text-align: center;
				opacity: 1;
			}

			#one:hover path {
				cursor: pointer;
				fill: red;
			}

			#two:hover path {
				cursor: pointer;
				fill: red;
			}

			#three:hover path {
				cursor: pointer;
				fill: red;
			}
		</style>
	</head>
	<body>
		<div id="lottie"></div>

		<script>
			(function() {
				var elm = document.getElementById('lottie');
				var params = {
					container: elm,
					renderer: 'svg',
					loop: true,
					autoplay: true,
					path: 'data.json',
				};

				window.anim;
				anim = lottie.loadAnimation(params);

				function goToAndPlayAndStop(startFrame, pauseFrame) {
          var tmpFunction = function (f) {
						var frame = Math.floor(f.currentTime);
				    console.log(frame)
						if (frame == pauseFrame) {
				      anim.removeEventListener('enterFrame', tmpFunction);
							anim.pause();
						}
				  }
				  anim.goToAndStop(startFrame, true);
				  anim.play();

					anim.addEventListener('enterFrame', tmpFunction);
				}

				goToAndPlayAndStop(0, 15);

				function segue(scene) {
					var currentFrame = Math.floor(anim.currentFrame);
					var startFrame = 30 * scene - 30;
					var pauseFrame = 30 * scene - 15;

					// 現在時間から15frame進めて、startFrameからはじめて、pauseFrameで止める
          var tmpFunction2 = function (f) {
						var frame = Math.floor(f.currentTime);
				    console.log(frame)
            // もし最後のフレームだったら最後で止める
            var targetFrame = f.totalTime == currentFrame + 15 ? 0 : currentFrame + 15
						if (frame == targetFrame) {
				      anim.removeEventListener('enterFrame', tmpFunction2);
              goToAndPlayAndStop(startFrame, pauseFrame);
						}
				  }
				  anim.play();
					anim.addEventListener('enterFrame', tmpFunction2);
        }

				$(document).on('click', '#one', () => segue(1));
				$(document).on('click', '#two', () => segue(2));
				$(document).on('click', '#three', () => segue(3));
			})();
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script
	src="https://code.jquery.com/jquery-3.3.1.min.js"
	integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
	crossorigin="anonymous"
	></script>
	<script src="./lottie.js"></script>
	<style>
	body {
	background-color: #fff;
	margin: 0px;
	height: 100%;
	overflow: hidden;
	}
	#lottie {
	background-color: #fff;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	transform: translate3d(0, 0, 0);
	text-align: center;
	opacity: 1;
	}

	#one:hover path {
	cursor: pointer;
	fill: red;
	}

	#two:hover path {
	cursor: pointer;
	fill: red;
	}

	#three:hover path {
	cursor: pointer;
	fill: red;
	}
	</style>
	</head>
	<body>
	<div id="lottie"></div>

	<script>
	(function() {
	var elm = document.getElementById('lottie');
	var params = {
	container: elm,
	renderer: 'svg',
	loop: true,
	autoplay: true,
	path: 'data.json',
	};

	window.anim;
	anim = lottie.loadAnimation(params);

	function goToAndPlayAndStop(startFrame, pauseFrame) {
	var tmpFunction = function (f) {
	var frame = Math.floor(f.currentTime);
	console.log(frame)
	if (frame == pauseFrame) {
	anim.removeEventListener('enterFrame', tmpFunction);
	anim.pause();
	}
	}
	anim.goToAndStop(startFrame, true);
	anim.play();

	anim.addEventListener('enterFrame', tmpFunction);
	}

	goToAndPlayAndStop(0, 15);

	function segue(scene) {
	var currentFrame = Math.floor(anim.currentFrame);
	var startFrame = 30 * scene - 30;
	var pauseFrame = 30 * scene - 15;

	// 現在時間から15frame進めて、startFrameからはじめて、pauseFrameで止める
	var tmpFunction2 = function (f) {
	var frame = Math.floor(f.currentTime);
	console.log(frame)
	// もし最後のフレームだったら最後で止める
	var targetFrame = f.totalTime == currentFrame + 15 ? 0 : currentFrame + 15
	if (frame == targetFrame) {
	anim.removeEventListener('enterFrame', tmpFunction2);
	goToAndPlayAndStop(startFrame, pauseFrame);
	}
	}
	anim.play();
	anim.addEventListener('enterFrame', tmpFunction2);
	}

	$(document).on('click', '#one', () => segue(1));
	$(document).on('click', '#two', () => segue(2));
	$(document).on('click', '#three', () => segue(3));
	})();
	</script>
	</body>
	</html>