完成イメージ
今回は【anime.js】について、ローディング画面でSVG画像の線画アニメーションを実装しながら学習していきます。
anime.jsの使い方
CDN
/**html**/
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>ファイルをダウンロードして使う
GitHubの「Code」の「Download Zip」よりダウンロードします。
解凍し、anime.min.jsを使用します。
基本的なコードの書き方
まずは、HTMLでアニメーションをつけたいものを書きます。
/**html**/
<div id="anime-js"></div>次にCSSで装飾します。
/**css**/
#anime-js {
width: 200px;
height: 200px;
background-color: #000;
}最後にJavascriptでanime.jsを実装します。
/**js**/
anime({
//このなかにパラメーターを記述していきます。
});SVG画像で線画アニメーションローディング画面を実装する
ローディング画面でSVG画像を使用して、徐々にロゴの線が見えてきて表示されるアニメーションになります。
〜参考にしたサイト〜
最後にソースコードを載せておきます。
HTML
/**html**/
<body>
<div class="loading__svg" id="loading">
<!--お好きなSVG画像をのせてください（SVG画像の作り方は上記の参考URLに掲載されています）-->
<svg version="1.1" id="svg__logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 514 112" style="enable-background:new 0 0 514 112;" xml:space="preserve">
<path id="logo-01" class="fill" style="fill:#3A3A3A;" d="M100.978,58.535c0-8.891,5.927-19.797,21.514-19.797
c13.039,0,20.981,8.001,20.981,18.848c0,11.556-8.12,20.625-21.455,20.625C107.141,78.21,100.978,67.483,100.978,58.535z
M135.767,59.482c0-10.729-6.163-18.077-14.817-18.077c-5.809,0-12.328,2.964-12.328,15.41c0,10.312,5.631,18.61,15.468,18.61
C127.708,75.425,135.767,73.943,135.767,59.482z" />
<path id="logo-02" class="fill" style="fill:#3A3A3A;" d="M160.146,40.455c0-1.126,0.178-1.836,0.77-1.836c0.534,0,1.007,0.592,1.897,1.482
c0.948,0.829,7.882,8.001,16.358,15.943c3.852,3.673,10.49,10.43,11.438,11.26l-0.474-21.93c-0.06-3.021-0.475-4.029-1.897-4.562
c-0.77-0.238-1.956-0.238-2.667-0.297c-0.652,0-0.889-0.297-0.889-0.594c0-0.415,0.593-0.474,1.304-0.474
c2.608,0,5.275,0.177,6.579,0.177c0.652,0,2.785-0.177,5.274-0.177c0.652,0,1.126,0.12,1.126,0.535c0,0.295-0.237,0.533-0.888,0.533
c-0.534,0.059-0.948,0.059-1.482,0.179c-1.541,0.415-2.015,1.421-2.074,4.265c-0.237,7.586-0.356,20.803-0.534,31.353
c0,1.364-0.296,1.838-0.77,1.838c-0.652,0-1.422-0.651-2.548-1.659c-3.319-3.025-9.661-9.127-14.58-13.87
c-5.216-4.86-11.024-11.024-12.447-12.506l0.534,20.566c0.118,3.854,0.711,5.098,1.778,5.452c0.889,0.297,1.897,0.297,2.786,0.358
c0.534,0,0.889,0.177,0.889,0.474c0,0.415-0.475,0.592-1.186,0.592c-3.082,0-5.156-0.177-6.519-0.177
c-0.652,0-3.378,0.177-5.927,0.177c-0.652,0-1.126-0.057-1.126-0.533c0-0.297,0.296-0.533,0.829-0.533
c0.652-0.061,1.541-0.061,2.252-0.238c1.482-0.415,1.719-1.718,1.778-6.104C159.849,59.482,160.146,47.094,160.146,40.455z" />
<path id="logo-03" class="fill" style="fill:#3A3A3A;" d="M217.518,54.03c0-7.706,0-9.07-0.118-10.729c-0.119-1.659-0.534-2.311-2.134-2.667
c-0.474-0.118-1.303-0.118-2.015-0.179c-0.593,0-0.889-0.177-0.889-0.533c0-0.354,0.356-0.474,1.185-0.474
c2.489,0,4.86,0.177,7.468,0.177c1.6,0,12.446,0,13.394-0.057c1.008-0.12,1.897-0.24,2.371-0.297
c0.296-0.061,0.593-0.238,0.829-0.238c0.297,0,0.356,0.238,0.356,0.474c0,0.356-0.356,1.067-0.474,3.2
c-0.06,0.949-0.119,1.957-0.238,3.498c0,0.295-0.118,0.829-0.593,0.829c-0.356,0-0.474-0.297-0.534-0.949
c0-0.236,0-1.006-0.296-1.659c-0.356-0.947-0.83-1.482-3.378-1.777c-1.007-0.12-6.341-0.238-7.527-0.238
c-0.237,0-0.355,0.177-0.355,0.533v12.268c0,0.358,0.059,0.535,0.355,0.535c1.245,0,6.935,0,8.239-0.059
c1.482-0.118,2.252-0.297,2.726-0.829c0.356-0.476,0.593-0.652,0.83-0.652c0.237,0,0.355,0.118,0.355,0.415
c0,0.356-0.237,1.482-0.415,3.913c0,1.006-0.178,3.139-0.178,3.553c0,0.417-0.059,0.949-0.533,0.949
c-0.356,0-0.534-0.533-0.534-0.829c-0.06-0.474-0.06-0.77-0.178-1.364c-0.297-1.126-0.889-1.895-2.964-2.073
c-1.067-0.118-6.045-0.179-7.349-0.179c-0.296,0-0.355,0.238-0.355,0.535v3.852c0,1.72-0.06,5.867,0,7.408
c0.118,3.498,0.888,4.269,6.341,4.269c1.363,0,3.556,0,4.86-0.594c1.363-0.651,1.956-1.659,2.37-3.793
c0.119-0.533,0.237-0.829,0.652-0.829c0.416,0,0.416,0.476,0.416,1.008c0,1.303-0.416,4.919-0.711,5.928
c-0.356,1.303-0.829,1.303-2.786,1.303c-5.156,0-9.601-0.297-14.876-0.297c-2.133,0-4.268,0.177-6.757,0.177
c-0.711,0-1.066-0.177-1.066-0.533c0-0.236,0.178-0.533,0.888-0.533c0.711-0.061,1.363-0.061,1.838-0.179
c1.067-0.236,1.363-1.362,1.541-3.141c0.237-2.075,0.237-5.926,0.237-10.253V54.03z" />
<path id="logo-04" class="fill" style="fill:#3A3A3A;" d="M254.471,76.907c-0.829-0.356-1.007-0.711-1.007-1.72c0-3.023,0.178-5.985,0.237-6.875
c0.06-0.829,0.238-1.305,0.652-1.305c0.474,0,0.534,0.417,0.593,0.831c0.059,0.652,0.059,1.541,0.356,2.37
c1.066,3.852,4.327,5.454,7.704,5.454c4.741,0,6.876-2.905,6.876-5.513c0-2.37-0.711-4.623-5.097-7.822l-2.489-1.898
c-5.868-4.444-7.764-7.822-7.764-11.971c0-5.572,4.8-9.721,12.209-9.721c2.371,0,3.793,0.297,5.275,0.535
c0.829,0.118,1.541,0.297,2.133,0.354c0.475,0.061,0.593,0.297,0.593,0.652c0,0.831-0.237,2.252-0.237,6.283
c0,1.126-0.178,1.541-0.593,1.541c-0.356,0-0.534-0.356-0.593-1.008c-0.06-0.651-0.415-2.073-1.186-3.2
c-0.888-1.364-2.548-2.667-5.927-2.667c-3.911,0-6.163,2.134-6.163,5.037c0,2.193,1.066,4.149,5.334,7.054l1.66,1.126
c6.638,4.505,8.771,8.001,8.771,12.802c0,3.082-1.304,6.578-5.097,8.948c-2.667,1.6-5.69,2.015-8.416,2.015
C259.095,78.21,256.723,77.854,254.471,76.907z" />
<path id="logo-05" class="fill" style="fill:#3A3A3A;" d="M293.552,54.03c0-7.706,0-8.891-0.118-10.55c-0.119-1.661-0.652-2.49-1.779-2.728
c-0.534-0.118-1.185-0.177-1.837-0.236c-0.534,0-0.83-0.179-0.83-0.594c0-0.297,0.356-0.474,1.186-0.474
c2.073,0,5.63,0.177,6.934,0.177c1.185,0,4.682-0.177,6.697-0.177c0.711,0,1.008,0.177,1.008,0.474c0,0.415-0.297,0.594-0.83,0.594
c-0.533,0.059-0.77,0.059-1.363,0.179c-1.422,0.236-1.838,1.124-1.956,2.844c-0.178,1.6-0.178,2.785-0.178,10.491v8.889
c0,4.742,0.059,8.593,0.296,10.727c0.119,1.364,0.534,2.431,2.074,2.608c0.77,0.177,1.482,0.177,2.252,0.238
c0.652,0,0.889,0.297,0.889,0.533c0,0.356-0.415,0.533-1.007,0.533c-3.497,0-6.876-0.177-8.12-0.177
c-1.007,0-4.564,0.177-6.638,0.177c-0.711,0-1.067-0.177-1.067-0.533c0-0.236,0.237-0.533,0.889-0.533
c0.711-0.061,1.126-0.061,1.6-0.179c1.008-0.236,1.482-1.126,1.601-2.549c0.296-2.132,0.296-5.926,0.296-10.845V54.03z" />
<path id="logo-06" class="fill" style="fill:#3A3A3A;" d="M338.576,62.919c0,4.505,0,8.475,0.237,10.668c0.178,1.364,0.474,2.49,2.074,2.667
c0.71,0.12,1.778,0.177,2.548,0.238c0.593,0,0.889,0.236,0.889,0.474c0,0.356-0.356,0.592-1.067,0.592
c-3.437,0-7.053-0.177-8.357-0.177c-1.185,0-4.8,0.177-6.816,0.177c-0.711,0-1.066-0.236-1.066-0.592
c0-0.238,0.237-0.474,0.888-0.474c0.711-0.061,1.304-0.061,1.779-0.179c1.126-0.236,1.422-1.303,1.6-2.785
c0.237-2.134,0.237-5.928,0.237-10.609V42.413c-1.956,0-5.868,0-8.238,0.177c-3.023,0.238-3.912,0.476-4.624,1.779
c-0.355,0.652-0.474,1.067-0.711,1.661c-0.119,0.354-0.297,0.592-0.593,0.592c-0.356,0-0.475-0.297-0.475-0.888
c0.059-1.067,1.007-5.277,1.126-5.928c0.119-0.711,0.297-1.067,0.593-1.067c0.415,0,0.889,0.474,2.193,0.592
c1.422,0.179,3.555,0.297,5.334,0.297h20.98c1.66,0,2.786-0.177,3.556-0.297c0.77-0.118,1.186-0.236,1.482-0.236
c0.356,0,0.415,0.297,0.415,1.185c0,1.008-0.237,4.682-0.237,5.986c-0.059,0.533-0.178,0.829-0.534,0.829
c-0.415,0-0.474-0.297-0.534-1.008c0-0.177-0.059-0.415-0.059-0.651c-0.119-1.364-1.363-2.728-5.749-2.785
c-1.423-0.12-3.615-0.179-6.875-0.238V62.919z" />
<path id="logo-07" class="fill" style="fill:#3A3A3A;" d="M370.135,54.03c0-7.706,0-9.07-0.118-10.729c-0.119-1.659-0.534-2.311-2.134-2.667
c-0.474-0.118-1.303-0.118-2.015-0.179c-0.593,0-0.889-0.177-0.889-0.533c0-0.354,0.356-0.474,1.185-0.474
c2.489,0,4.86,0.177,7.468,0.177c1.6,0,12.446,0,13.394-0.057c1.008-0.12,1.897-0.24,2.371-0.297
c0.296-0.061,0.593-0.238,0.829-0.238c0.297,0,0.356,0.238,0.356,0.474c0,0.356-0.356,1.067-0.474,3.2
c-0.06,0.949-0.119,1.957-0.238,3.498c0,0.295-0.118,0.829-0.593,0.829c-0.356,0-0.474-0.297-0.534-0.949
c0-0.236,0-1.006-0.296-1.659c-0.356-0.947-0.83-1.482-3.378-1.777c-1.007-0.12-6.341-0.238-7.527-0.238
c-0.237,0-0.355,0.177-0.355,0.533v12.268c0,0.358,0.059,0.535,0.355,0.535c1.245,0,6.935,0,8.239-0.059
c1.482-0.118,2.252-0.297,2.726-0.829c0.356-0.476,0.593-0.652,0.83-0.652c0.237,0,0.355,0.118,0.355,0.415
c0,0.356-0.237,1.482-0.415,3.913c0,1.006-0.178,3.139-0.178,3.553c0,0.417-0.059,0.949-0.533,0.949
c-0.356,0-0.534-0.533-0.534-0.829c-0.06-0.474-0.06-0.77-0.178-1.364c-0.297-1.126-0.889-1.895-2.964-2.073
c-1.067-0.118-6.045-0.179-7.349-0.179c-0.296,0-0.355,0.238-0.355,0.535v3.852c0,1.72-0.06,5.867,0,7.408
c0.118,3.498,0.888,4.269,6.341,4.269c1.363,0,3.556,0,4.86-0.594c1.363-0.651,1.956-1.659,2.37-3.793
c0.119-0.533,0.237-0.829,0.652-0.829c0.416,0,0.416,0.476,0.416,1.008c0,1.303-0.416,4.919-0.711,5.928
c-0.356,1.303-0.829,1.303-2.786,1.303c-5.156,0-9.601-0.297-14.876-0.297c-2.133,0-4.268,0.177-6.757,0.177
c-0.711,0-1.066-0.177-1.066-0.533c0-0.236,0.178-0.533,0.888-0.533c0.711-0.061,1.363-0.061,1.838-0.179
c1.067-0.236,1.363-1.362,1.541-3.141c0.237-2.075,0.237-5.926,0.237-10.253V54.03z" />
<path id="logo-08_00000084499578657878502800000017466474858017815451_" class="fill" style="fill:#3A3A3A;" d="M408,78v-9h9v9H408z" />
</svg>
</div>
<div class="main" id="loadingOut">
<p>ローディング後に表示されるページ</p>
</div>
</body>SCSS
/**scss**/
.loading__svg {
background-color: #fcfcfc;
width: 100%;
height: 100vh;
position: relative;
#svg__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
min-width: 200px;
height: auto;
}
#loading__svg,
.fill {
fill: transparent;
stroke-width: 1px;
stroke: #3a3a3a;
}
}
#loadingOut {
width: 100%;
text-align: center;
height: 100vh;
background-color: #000;
p {
padding-top: 50vh;
font-size: 16px;
color: #fff;
margin: 0;
}
}JavaScript
/**js**/
const logo = document.getElementById("svg__logo");//定数にid:svg__logoを定義します
window.onload = function () { //画面を読み込み後にアニメーションを始める
let timeline = anime.timeline({ //timelineは、複数のアニメーションを同期させることができる。デフォルトでは、前のアニメーションが終了次第次のアニメーションが始まる
targets: ".fill", //アニメーションをかける要素を指定
direction: "normal", //アニメーションの方向を指定
loop: false //アニメーションをループさせるかどうか
});
//線画のアニメーション
timeline.add({
strokeDashoffset: [anime.setDashoffset, 0], //svg画像に線画アニメーションを指定する
easing: "easeInOutSine", //アニメーションスピードの緩急
fill: ["transparent", "transparent"],
duration: 400,
delay: function (el, i) {
return i * 250;
}
});
//塗りつぶしアニメーション
timeline.add(
{
easing: "easeInOutSine",
fill: ["transparent", "#3a3a3a"],
duration: 700
},
"-=200"
);
};
//ローディング画面を〜秒後にフェードアウトさせる
$(function () {
$("#loadingOut").css("display", "none");//ローディング後に表示されるページの消しておきます
setTimeout(function () {
$("#loading").fadeOut();
}, 2600); //2.6秒後にローディング画面をフェードアウトさせます
});
//ローディング終了後にページを表示させる
$(function () {
$("#loadingOut").css({ opacity: "0" }); //ローディング後に表示させるページを見えなくしておきます
setTimeout(function () {
$("#loadingOut").css("display", "block");
$("#loadingOut").stop().animate({ opacity: "1" }, 1000);
}, 2600); //ローディング終了後にページを表示させる
});
