Snap.svgでアニメーションを制作 IE11にも対応
2019/07/11
Update date: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();
}