先端サイトに学ぶCSS3/jQueryアニメーションデザイン ― 第3回

SVG線画が美しいリッチアニメーションの作り方 (1/2)

今回の注目サイト：
Béatrice Créations

http://carlphilippebrenner.com/portfolio/beatricecreations

フランスを拠点に活動するデザイナーであるカール・フィリップ・ブレナー氏のポートフォリオサイト。

ページ遷移が楽しい繊細で滑らかな動き

　CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。

　Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。

　今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。

STEP 1：SVGのパスを作成する

　アニメーションを作る前に、Illustratorを使って素材となるSVGファイルを作成しよう。テキストツールを使って任意の文字を入力し、アウトライン化する。今回のデモのように筆記体のフォントを使用する際は、アウトライン化した文字は結合せず、つなぎ目が滑らかになるように配置を調整する。この段階では、塗りつぶしたままでOKだ。

　全体のサイズはあとでHTMLで指定できるので適当で構わない。サイズの調整がしやすいように、アートボードを文字に合わせてぴったりに設定しておこう。

　配置が終わったらSVG形式で別名保存する。「SVGオプション」の「SVGプロファイル」では「SVG1.1」を選択する。

　保存が完了したら、出力されたSVGファイルをエディターで開いてみよう。以下のようなコードが並んでいれば、元になるSVGファイルは完成だ。

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/003/demo.svg

STEP 2：SVGを読み込む

　SVGをHTMLに読み込んで表示してみよう。先ほどのSVGファイルから、<svg version="1.1"... >...</svg>をコピーし、HTML内にペーストする。

　<svg>タグ内の「width="◯px" height="◯px"」がIllustratorで作成したアートボードの大きさになっている。このサイズ指定を拡大・縮小するとパスのサイズも連動するので、表示したいサイズに調整しよう。widthまたはheightのどちらかのみを指定すると、縦横の比率はそのままに、サイズを自由に調整できる。

　パスの太さや塗りつぶしをCSSで指定するため、シェイプ1つ1つを表す<path>タグにclass名を付けておく。今回は「path」というclass名を定義する。

　これでSVGの読み込みは完了だ。

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/003/1.html

　次に、SVGのパスにスタイルを適用する。SVGのパスは、以下のようなスタイルシートプロパティを使って、ストロークの色や太さ、塗りつぶしを指定できる。

• stroke：線の色
• stronke-width：線の太さ
• fill：塗りつぶしの色

　stronke-dasharrayプロパティとstroke-dashoffsetプロパティを使うと、破線にもできる。

• stroke-dasharray：破線の間隔
• stroke-dashoffset：破線の開始位置

　この段階では以下のような破線に指定しておこう。

■ソースコード（HTML）

<div class="box">
        <svg>
    <g><path class="path" d="M5….." /></g>
        </svg>
 </div>

■ソースコード（CSS）

.box{
    width: 1060px;
    height: 370px;
    margin: 200px auto;
}
.path{
    stroke:#092951;
    fill:none;
    stroke-width:1;
    stroke-dasharray: 10;
}

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/003/2.html

STEP 3：SVGパスを動かしてみる

　SVGの読み込みができたところで、CSSを使って点線のパスを動かしてみよう。パスを動かすしくみには、破線を利用する。前に指定したstroke-dasharrayの破線の間隔を長めに設定し、stroke-dashoffsetに大きな値を指定して破線の開始位置をずらす。破線の開始位置の値を少しずつ小さくしていくことで、パスが移動し、まるで線を手で描いているような動きになるわけだ。

　実際の値は、パスのサイズに合わせて調節しよう。アニメーションは、変更する内容を@keyframesプロパティで指定し、animationプロパティで実行する。デモでは3秒間かけて動くようにした。これでパスのアニメーションが完成だ。

■ソースコード（CSS）

/* .box のCSSは同上 */
.path{    
stroke:#092951;
fill:none;
stroke-width:1;
stroke-dasharray: 3000;
stroke-dashoffset:3000;
animation: DASH 3s ease-in alternate forwards;
-webkit-animation:DASH 3s ease-in 0s forwards;
-o-animation:DASH 3s ease-in 0s forwards;
animation:DASH 3s ease-in 0s forwards;
}
@keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-o-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-ms-keyframes DASHf{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;
}

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/003/3.html