最近のwebサイトでトップページを開くとロゴが線画で描写された後にフェードインするような表示を見かけることがあります。
いざ実装しようとするとモノクロのロゴだけに対応しているもの、IEには対応していないものなど直接参考に出来るものがあまりなかったのでこの機会にまとめておきます。
まず実物を見ていただいた方が早いので、こちらに完成形を載せておきます。
See the Pen SVGロゴ アニメーション表示 by OKD (@OKD) on CodePen.
CONTENTS
今回用意するもの
SVGロゴ
sketchやIllustratorなどで作成したロゴデータを準備します。
（sketchで書き出したSVGでも対応出来ますが、classや色の指定がIllustratorの方が楽なのでIllustratorの方がオススメです。）
sketchの場合はExportで、Illustratorの場合は別名保存でSVGデータを用意します。
その際、テキストデータはアウトライン化しておいてください。
Vivus.js
SVGのパスアニメーションが使えるプラグインです。
ダウンロードはこちらから。
jQuery本体
サンプルでは執筆時点で最新バージョンの3.3.1を使用してますが、必要に応じてバージョンは選択してください。
1系でも動作は可能です。
実装方法
Vivus.jsとjQuery本体を読み込む
htmlファイルやphpファイルなど実際にアニメーションを表示させるページに二つを読み込みます。
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="js/vivus.min.js"></script>SVGデータをアニメーション用に加工
先ほど用意していただいたSVGデータをエディタで開くとこんな感じになってます。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 240 391.9" style="enable-background:new 0 0 240 391.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EC5247;}
.st1{fill:#8B6039;}
.st2{fill:#C39868;}
</style>
<g>
<path class="st0" d="M1.1,358.8c0-19.7,2.4-28.4,13.6-28.4s13.6,8.7,13.6,28.4c0,19.7-2.3,28.9-13.6,28.9S1.1,378.5,1.1,358.8z
M23.1,358.9c0-15.3-1.6-24-8.4-24c-6.8,0-8.5,8.5-8.5,24c0,15.4,1.5,24.5,8.5,24.5C21.7,383.3,23.1,374.2,23.1,358.9z"/>
<path class="st0" d="M59.2,331.4h0.5c4.4,0,4.5,0,4.5,3.6v29.2c0,16-0.1,23.6-12.6,23.6c-12.4,0-12.3-7.6-12.3-23.6v-32.8h0.5
c4.4,0,4.5,0,4.5,3.6v29.2c0,13.3-0.3,19.1,7.3,19.1s7.6-5.8,7.6-19.1V331.4z"/>
<path class="st0" d="M80,387.2v-49.8l0.3-1.9h-8.7v-4.1h21.9v4.1h-8.8l0.3,1.9v46.2c0,3.6-0.1,3.6-4.5,3.6H80z"/>
<path class="st1" d="M101.3,387.2v-56l12.5-0.8c13.3,0,13.3,12.4,13.3,28.4c0,16,0,28.9-13.3,28.9L101.3,387.2z M113.8,383.3
c8.4,0,8.4-11.2,8.4-24.5c0-13.4,0-24-8.4-24h-7.9l0.3,1.9v44.6l-0.3,1.9H113.8z"/>
<path class="st1" d="M137.1,358.8c0-19.7,2.4-28.4,13.6-28.4c11.2,0,13.6,8.7,13.6,28.4c0,19.7-2.3,28.9-13.6,28.9
C139.5,387.7,137.1,378.5,137.1,358.8z M159.1,358.9c0-15.3-1.6-24-8.4-24c-6.8,0-8.4,8.5-8.4,24c0,15.4,1.5,24.5,8.4,24.5
C157.7,383.3,159.1,374.2,159.1,358.9z"/>
<path class="st1" d="M174.4,358.8c0-19.7,2.4-28.4,13.6-28.4c11.2,0,13.6,8.7,13.6,28.4c0,19.7-2.3,28.9-13.6,28.9
C176.8,387.7,174.4,378.5,174.4,358.8z M196.4,358.9c0-15.3-1.6-24-8.4-24s-8.4,8.5-8.4,24c0,15.4,1.5,24.5,8.4,24.5
C195,383.3,196.4,374.2,196.4,358.9z"/>
<path class="st1" d="M238.6,387.2c-5.1,0-5.3,0.1-7-3.6l-10.5-22.9H217l0.3,1.9v21h0.1c0,3.6-0.1,3.6-4.5,3.6h-0.5v-56l8.8-0.8
c12.8,0,12.8,5.9,12.8,15.1c0,8.5-0.6,14.6-8.1,15l12.9,26.6H238.6z M221.3,356.3c7.8,0,7.8-3,7.8-10.7s0-10.7-7.8-10.7h-4v1.9
v17.5l-0.3,1.9H221.3z"/>
</g>
<path class="st0" d="M154.1,116.5c17-23.9,36.8-61.4-13.8-116.5c-17.8,50.2-69,77.4-67,75.8c-5.1-12.7,0,0-5.1-12.7
c-68.6,67.5-72.7,119.3-2.4,165.1C55.1,191,67,156.7,96.7,136.5c2.4,38.8,27.4,38.4,51.2,48.6c21.7,9.3,38,19.4,28.6,43
c82.8-36.4,41.2-107.3,9.9-121.9C180.4,124,150.6,121.5,154.1,116.5z"/>
<g>
<path class="st1" d="M225.8,301.8c-1.1,0-2.2-0.1-3.2-0.4L57.9,262.7c-4.2-1-7.5-3.5-9-7c-1.4-3.1-1.1-6.6,0.6-9.7l0.8-1.4
c2.2-3.9,6.9-6.4,12-6.4c1.1,0,2.2,0.1,3.2,0.4l164.6,38.8c4.2,1,7.5,3.5,9,7c1.4,3.1,1.1,6.6-0.6,9.7l-0.8,1.4
C235.5,299.3,230.8,301.8,225.8,301.8L225.8,301.8z"/>
<path class="st2" d="M14.2,301.8c1.1,0,2.2-0.1,3.2-0.4l164.6-38.8c4.2-1,7.5-3.5,9-7c1.4-3.1,1.1-6.6-0.6-9.7l-0.8-1.4
c-2.2-3.9-6.9-6.4-12-6.4c-1.1,0-2.2,0.1-3.2,0.4L9.9,277.3c-4.2,1-7.5,3.5-9,7c-1.4,3.1-1.1,6.6,0.6,9.7l0.8,1.4
C4.5,299.3,9.2,301.8,14.2,301.8L14.2,301.8z"/>
</g>
</svg>Illustratorの場合だとこのように色ごとにclassを振り分けてくれるので設定が簡単になります。
今回はIllustrator想定で話を進めていきます。
各pathに属性を追加
以下のように「fill」と「stroke」の属性をpathに追加していきます。
<path class="st0" fill="none" stroke="#000" d="M1.1,358.8c0-19.7,2.4-28.4,13.6-28.4s13.6,8.7,13.6,28.4c0,19.7-2.3,28.9-13.6,28.9S1.1,378.5,1.1,358.8z
M23.1,358.9c0-15.3-1.6-24-8.4-24c-6.8,0-8.5,8.5-8.5,24c0,15.4,1.5,24.5,8.5,24.5C21.7,383.3,23.1,374.2,23.1,358.9z"/>
fill属性は塗り色を指定するのですが、CSSを使って最後に色を指定するのでnoneを指定しています。
stroke属性は枠線の色（線で描画するときの色）を指定します。
CSSを設定
今回は線画のアニメーションを行った後、jsでSVGに「done」というclassを付与するためこのような内容になっています。
section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
path {
fill-opacity: 0;
transition: fill-opacity 0.5s;
}
.done .st0 {
fill: #8B6039;
fill-opacity: 1;
}
.done .st1 {
fill: #EC5247;
fill-opacity: 1;
}
.done .st2 {
fill: #C39868;
fill-opacity: 1;
}
.done path {
stroke: none;
}簡単に説明すると最初は透明にしておいて、doneというclassがsvgに付与されたら各パーツに色をつける。
合わせて最初に描画した線は不要なのでstroke:noneで消します。
Vivus.jsを動かすための記述をする
IEは対応しない場合
<script>
new Vivus('layer', { duration: 100 , start: 'autostart', pathTimingFunction: Vivus.EASE_OUT,}, function(obj){
obj.el.classList.add('done');
});
</script>IE11も対応する場合
<script>
new Vivus('layer', { duration: 120 , start: 'autostart',type: 'scenario', pathTimingFunction: Vivus.EASE_OUT,}, function(obj){
$("#layer").attr("class", "done");
});
</script>IEは10以下では確認してませんが、IE11では最初の記述をすると「未定義または NULL 参照のプロパティ は取得できません」的なエラーが出てクラスを付与することが出来ませんでした。
なのでIE11にも対応するように二つ目の記述では一部を変更しています。
最後に一手間
基本的にはここまでの内容でアニメーションで線を描画した後に色付きのロゴをフェードインで表示出来るかと思います。
今回のサンプルでは最後に一手間を加えてテキスト文字が左から描写されていくなどパーツの読み込む順番を制御しています。
具体的にはこのようにdata-start属性を追加して描写のタイミングを調整しています。
<path class="st0" data-start="20" fill="none" stroke="#000" d="M1.1,358.8c0-19.7,2.4-28.4,13.6-28.4s13.6,8.7,13.6,28.4c0,19.7-2.3,28.9-13.6,28.9S1.1,378.5,1.1,358.8z
M23.1,358.9c0-15.3-1.6-24-8.4-24c-6.8,0-8.5,8.5-8.5,24c0,15.4,1.5,24.5,8.5,24.5C21.7,383.3,23.1,374.2,23.1,358.9z"/>その他にもパスを描写する向きを変えたり色々設定は出来るのですが、まずは試していただければと思います。
