Worse is better.😀

カンタン! SVGとCSSで手書き風の文字アニメーション

SVGとCSSで手書き文字風アニメーション CSS3

SVGとCSSで手書き文字風アニメーション

SVGとCSSで書き文字アニメーション!

どうも、DAIMAです。
連日猛暑続きですが、私は日々元気にコーディングしております。

さて今回は、webページに
ちょっとした演出を加えたいときに役立つ
サラサラと文字が書かれていくようなアニメーションの
実装方法をご紹介したいと思います。

[myphp1 file=’signature’]

1.ベクターデータからSVGファイルを作ろう

hikkisvg01

まずは、大元になるSVGデータを作成します。

illustratorで、好きなフォントを使用して、
アニメーションさせたいテキストを入力します。
※今回は、「Learning Curve」というフォントを使用しています。

hikkisvg02

入力したテキストデータをペンツールでなぞります。
この時、一文字をひとつなぎのパスで描くことと、
実際の書き順どおりにパスをひくことが大事です。

またここでは、視認性を考え
線の色を一時的にオレンジ色にしています。

hikkisvg03

文字をなぞり終えたら、作成したパス全体を選択し、
illustratorの機能
「オブジェクト」→「アートボード」→「選択したオブジェクトに合わせる」
で余分な余白を取り除き、残ったデータをSVG形式で保存します。

hikkisvg04

次に「ファイル」→「別名をつけて保存」
を選択し、ファイルの種類タブでSVGを選択して保存します。

2.作成したベクターデータのコードを編集しよう

hikkisvg05

テキストのベクターデータが出来上がったら、
それをテキストエディタで開いてみます。

上記コード内の”path”タグがひとつの文字を表しています
例えば今回のテキスト「DAIMA」は5文字なので、
“path”タグも5つ存在しています。

今回は、これら”path”タグそれぞれに
CSSアニメーションを指定して
ブラウザ上に文字が書かれていくような
動きを実現します。

hikkisvg06

開いたコードを、
今回のアニメーション用に整理したものです。
不要な記述を削除したうえで
コード内の”path”タグに個別のクラスを指定しています

これで、パスをアニメーションさせる準備が整いました。
作成したHTMLソースを掲載しておきます。 

<div class="case">
<svg class="signature" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 205.626 46.326" enable-background="new 0 0 205.626 46.326"
	 xml:space="preserve">
<g>
	<path class="path path1" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M10.792,12.514
		c0,0-2-7,4-9c0,0,6.667-5,19-1.667s12,19,11.333,22.333s-9.333,21-20.333,20.667s-15-1.667-18.667-3s-8.334,1.343-3.667,3.005
		s5.667,1.328,11-9.338s7.334-24.667,14.667-31.667"/>
	<path class="path path2" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M75.792,23.15
		c0,0-5.667,10.365-9.333,13.698s-11,11.666-18.667,6.333s0-22.333,2.667-24.667s16.667-23.333,35.667-16c0,0-15.333,32-16,37.333
		s1.333,11.667,16-4.333"/>
	<path class="path path3" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M79.792,36.181
		c0,0-3,10.168,8.333,9.417s26.333-26.417,27.333-35.75s-1-12.333-7.667-5s-14.667,40.168-4,40.75"/>
	<path class="path path4" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M112.792,5.514
		c0,0,8.333-6.426,12.333-4.546s1.333,4.546,1.333,4.546l-16.667,40.124c0,0,15.333-42.239,30-45.015s-10,42.259-10.667,45.075
		s15-41.944,28-44.73s1.667,19.546,1.667,19.546s-22.333,44.667,7.333,14.333"/>
	<path class="path path5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M194.792,23.15
		c0,0-5.667,10.365-9.333,13.698s-11,11.666-18.667,6.333s0-22.333,2.667-24.667s16.667-23.333,35.667-16c0,0-15.333,32-16,37.333
		s1.333,11.667,16-4.333"/>
</g>
</svg>

</div>

3.CSSでアニメーションさせる

いよいよ最後の山場、CSSの指定です!

CSSで文字を書くアニメーションを実現するには、
「stroke-dasharray」と「stroke-dashoffset」
というCSSプロパティを利用します。

これらについて、簡単に説明しておくと、
まず「stroke-dasharray」が幅の広い破線を指定し、
次に「stroke-dashoffset」で指定した破線の開始位置を
CSS3アニメーションを利用してずらすことで
今回のアニメーションを実現させています。 

.case {
  width: 100px;
  height: 100px;
}

.path {
  stroke: #000;
  fill: none;
  stroke-width: 2.5;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: DASH 3.2s ease-in-out alternate 0s forwards;
  -webkit-animation: DASH 3.2s ease-in-out 0s forwards;
  animation: DASH 3.2s ease-in-out 0s forwards;
}

@keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

今回作成したSVGのHTMLにこのCSSを適用すると、
文字が一斉に描かれる動きが実現できます。

ですが、「まるで手書きのような」
アニメーションの為には、
一文字ずつ時間差で動作させる必要がありますね。 

.case {
  width: 100px;
  height: 100px;
}

.path {
  stroke: #000;
  fill: none;
  stroke-width: 2.5;
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: DASH 3.2s ease-in-out alternate 0s forwards;
  -webkit-animation: DASH 3.2s ease-in-out 0s forwards;
  animation: DASH 3.2s ease-in-out 0s forwards;
}

.path2 {
  animation-delay: 0.4s;
}

.path3 {
  animation-delay: 0.8s;
}

.path4 {
  animation-delay: 1.2s;
}

.path5 {
  animation-delay: 1.7s;
}

@keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-moz-keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes DASH {
  0% {
    stroke-dashoffset: 5000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

animationにディレイをかける「animation-delay」を追記して、
各文字のアニメーションに時間差を指定しました

これで、書き文字風のアニメーションのできあがりです!
HTML上でのSVGの扱いなど、
慣れないうちはなかなかややこしいですが、
仕組みが分かればカンタンですね。

CSS内のduration、timing-functionの値を変更すれば
文字が描かれるスピードや勢いを変更できますし、
jQueryを利用すれば文字が書かれるタイミングを
自由に制御することも可能です。

また、SVGであれば文字だけでなく
アイコンやイラストでも利用可能なテクですので、
アイディア次第で可能性はどんどん広がりそうですね!

コメント

タイトルとURLをコピーしました