svgのモーフィング [javascript]

となりの肩幅

◆はじめてのjavascriptのお勉強として。
◆使用したライブラリは SVG Morpheus
◆setInterval関数が第一引数の関数を呼んでくれず、動かなくてハマった。

・svg ：画面の解像度が無限になっても綺麗に表示されるすごい画像。
・モーフィング ：なめらかに画像が遷移するやつ。svgでアニメーションさせようとするとアンカーポイントの数を前後でそろえたりする制約がある、がSVG Morpheusを使うと簡単にモーフィングさせられる。
・setInterval関数がうごかない問題：以下を参照して解決。むずかしい。
【参考】setInterval関数が、第一引数の関数を呼ばない【Javascript】

以下ソース

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>PDCA Morpheus</title>
	<script type="text/javascript" src="../compile/unminified/svg-morpheus.js"></script>
	<script type="text/javascript">
	window.onload = function(){
		let currentIcon = "pdcaP";
		let myIcons = new SVGMorpheus('#pdcaIconSet',{
			duration: "250",
			easing: 'linear',
			rotation: "clock"
		});

		function changeIcon(){
			if(currentIcon == "pdcaP"){
				myIcons.to("pdcaD");
				currentIcon = "pdcaD";
			}else if(currentIcon == "pdcaD"){
				myIcons.to("pdcaC");
				currentIcon = "pdcaC";
			}else if(currentIcon == "pdcaC"){
				myIcons.to("pdcaA");
				currentIcon = "pdcaA";
			}else if(currentIcon == "pdcaA"){
				myIcons.to("pdcaP");
				currentIcon = "pdcaP";
			}
		};
		setInterval(changeIcon,1000);
	};
	</script>
</head>
<body>
	<p>回せ　Boom Boom</p>
	<div>
	<svg id="pdcaIconSet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200.08 367.92">

    <g id="pdcaA">
      <path d="M35.46,40.42,31.83,30.34H16.5L12.87,40.42H8.44L21.52,5.1h5.55L40.13,40.42ZM30.52,26.71,24.16,9.29,17.84,26.71Z" fill="#336699"/>
    </g>
    <g id="pdcaC">
      <path d="M24.75,41.95q-7.92,0-12.41-4.78T7.85,23.69q0-8.53,4.56-13.43t12.36-4.9A25.24,25.24,0,0,1,36.45,8.52v5.13h-.33A17.85,17.85,0,0,0,24.49,9a10.94,10.94,0,0,0-8.84,3.88Q12.4,16.8,12.4,23.69t3.32,10.7a11.06,11.06,0,0,0,8.82,3.86,17,17,0,0,0,5.67-.95,19.24,19.24,0,0,0,5.91-3.71h.33v5.16a35.37,35.37,0,0,1-7,2.67A22.31,22.31,0,0,1,24.75,41.95Z" fill="#336699"/>
    </g>
    <g id="pdcaD">
      <path d="M10,41.31V6h8.51Q26,6,30.23,7.94A15.15,15.15,0,0,1,37,13.88a18.3,18.3,0,0,1,2.47,9.81,18,18,0,0,1-4.68,12.42q-4.68,5.2-16.16,5.2ZM14.37,9.7V37.61h4.55q8.37,0,12.16-3.54t3.8-10.45q0-6.56-3.84-10.24T18.91,9.7Z" fill="#336699"/>
    </g>
    <g id="pdcaP">
      <path d="M20.37,28V41.31H16V6h9.75q6.82,0,10.09,2.87a9.76,9.76,0,0,1,3.27,7.72,10.48,10.48,0,0,1-3.57,8.21Q32,28,25.55,28Zm0-18.28V24.3h4.36q5.37,0,7.6-2.07a7.17,7.17,0,0,0,2.24-5.52,6.36,6.36,0,0,0-2.18-5.23q-2.18-1.78-7-1.78Z" fill="#336699"/>
    </g>

	</svg>
</div>
</body>
</html>





この記事が気に入ったらサポートをしてみませんか？