Menu

CODE

Snap.svgでアニメーションを制作 IE11にも対応

2019/07/11 更新日:2020/05/04
デモページへ
仕様書

jqueryでSVGのパス指定で色yアニメーションなどの設定をできます。特にIEではsvgアニメーションのCSSで制限がありますので、JSで制御する必要があります。
使用するプラグインはこちらsnapsvg

先ずはイラストレーターで制作した画像をHTMLとして入力します。

svgをHTMLすると実際はパスの羅列が盛り込まれています。今回はタグに対してクラスをつけていきます。

<div class="animation-svg__image">
 <div class="animation-svg__image-dynamic">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 497.35 485.54">
<defs></defs><title>アセット 10</title>
<g id="レイヤー_2" data-name="レイヤー 2"><g id="Text"><g id="Service"><g id="figure" data-name="figure"><polygon id="circle" class="cls-1 moveLine moveLine--1" stroke="url(#linear)" points="448.95 97.57 250.54 0.56 50.98 95.19 0.54 310.22 137.21 483.72 358.07 485.04 496.81 313.19 448.95 97.57"/>
<line class="cls-1 moveLine moveLine--2 js-moveLine--2" stroke="url(#linear)" x1="250.54" y1="0.55" x2="0.54" y2="310.22"/>
<line class="cls-1 moveLine moveLine--2 js-moveLine--3" stroke="url(#linear)" x1="137.21" y1="483.72" x2="50.98" y2="95.19"/>
<line class="cls-1 moveLine moveLine--2 js-moveLine--4" stroke="url(#linear)" x1="137.21" y1="483.72" x2="448.95" y2="97.57"/>
</g></g></g></g>
  </svg>
 </div>
</div>

次にJSで動きを順番付けを行って行きます。

animationPolygonに六角形のアニメーションの順番付けを行って行きます。 var polygonとの変数にそれぞれのクラスを指定し、格納。
attr('strokeDashoffset', '1500');にてそのアニメーションの全体速度を設定し、後はコールバックにより数珠つなぎでアニメーションを行っていきます。

$(function() {
/* -- animationText -- */
var speedPolygon = 1500,
speedLine = 750,
speedText = 2500,
easing = mina.linear;
/* -- animationPolygon -- */
var polygon = Snap.select('.moveLine--1');
var polygon2 = Snap.select('.js-moveLine--2');
var polygon3 = Snap.select('.js-moveLine--3');
var polygon4 = Snap.select('.js-moveLine--4');
polygon.attr('strokeDashoffset', '1500');
polygon2.attr('strokeDashoffset', '750');
polygon3.attr('strokeDashoffset', '750');
polygon4.attr('strokeDashoffset', '750');
polygon.animate(
{
 'stroke-dashoffset': '0'
},
 speedPolygon,
 easing,
 function() {
polygon2.animate(
{
 'stroke-dashoffset': '0'
},
 speedLine,
 easing
);
polygon3.animate(
{
 'stroke-dashoffset': '0'
},
 speedLine,
 easing
);
 polygon4.animate(
{
 'stroke-dashoffset': '0'
},
 speedLine,
 easing,
function() {
 $('.animation-svg__image').addClass(
 'animation-svg__image--wide'
);
 $('.animation-svg__image--wide').on(
 'animationend',
function() {
 $('.animation-svg__text').addClass(
 'animation-svg__text--' + className
);
$('.animation-svg__text--' + className).on(
 'animationend',
function() {
 $('.header-logo__link').removeClass(
 'active'
);
 animationText();
}