;)
こんにちわ。！DOCTYPEのだりあ(@engineer_dahlia)です。
かっこいいサイトでよく見る、キービジュアルのテキストを手書き風にアニメーションする仕様を実装してみたいと思います。
完成形はこちら。
今回はIllustratorでテキストのSVGを作っていきます。
cssのアニメーションを作るのはVivus Instantというオンラインツールを使います。無料です。
目次
Illustratorでテキストとアニメーション用SVGを作成する
まずはアニメーションさせたいテキストをIllustratorで作成します。
手書き風アニメーションなので、手書き風のフォントを選ぶと良いですね。
テキストが完成したら、忘れずにアウトライン化しましょう。
Illustratorの曲線ツールを使ってテキストをなぞる(これがアニメーションになる)
曲線ツールを使ってテキストをなぞっていきます。
ここでなぞったパスが、後にアニメーションさせる部分になります。
上記のスクリーンショットの青い線が、私が曲線ツールで書いたパスです。
なぞっていくのには少しコツが必要なので、以下にポイントを書いておきますね。
【ポイント1】テキストのレイヤーは固定する
Illustratorのレイヤーパネル(？)の目のマークの横に鍵マークがありますので、クリックしてテキストを固定しておきましょう。
そうすることによって、テキストを意図せず変更せずに済みます。
曲線ツールは塗りはオフ、枠の色を指定して不透明にする
Illustrator左側の色の部分で、塗り無し、枠の色を利用します。
不透明度を落として、下に固定したテキストが見えるようにするとやりやすいですよ。
曲線ツールのパスは一筆書きにしておくと後で楽
パスは一筆書きにしておきましょう。(※時と場合による)
後でSVGをテキストエディタで開くとわかるのですが、一文字ずつパスを区切るとコードがカオスになってわかりにくいのです。。。
レイヤーごとにSVGを書き出す
元のテキストと、なぞった曲線ツールのレイヤーをそれぞれ別々にSVGとして書き出します。
上のスクリーンショットでは、青いアセットが曲線ツールのパス、黒いアセットが元のテキストです。
名前はアルファベットに変更しておきましょう。
『svg-text.svg』
『svg-mask.svg』
とかにしておくとわかりやすいですよ。
これでIllustratorでの作業は完了です！
Vivus Instantというツールを使ってアニメーション付きのcssを作成
まずはVivus Instantにアクセスしましょう。無料で使えるオンラインツールです。
このようなページになったら、右側の白いエリアに先程書き出したSVG画像(svg-mask.svgと名前をつけた方)をドラッグアンドドロップします。
Autostartのタブ内の値を変更することが可能です。
詳しくは割愛しますが、色々触ってみてください。
左下のUploadボタンを押すと、アニメーションをもう一度見ることができます。
設定が完了したら、Downloadボタンを押して、アニメーションが加わったSVGデータを取得しましょう。
svg-mask_animated.svg という名前になっているはずです。
ダウンロードしたSVGをテキストエディタで開き編集する
svg-mask_animated.svgをテキストエディタで開きます。
始めはインデントが無い状態になっていますので、整えておくと見やすいです。
インラインでcssが書かれています。そのまま使ってもよいのですが、今回は別のcssファイルに移しておきます。
不要なタグがいくつかあるので削除します。
<defs><tittle><g>が要らないです。これらを整理すると↓のようになりますね。
そこまでできたら、<svg>タグをまるごと表示させたいhtmlファイルに貼り付けましょう。
<path>を<mask>で囲む
次に、<path>タグを<mask>タグで囲ってあげます。
<mask>タグにはidを振りましょう。id名は何でも良いですが、今回はわかりやすくclipMaskとしておきます。
idを振る理由は後ほどサクッと説明します。
<mask>タグの外に<image>タグを設置
次に、<mask>タグの外側に<image>タグを設置します。
<img>タグではなく、<image>ですのでご注意ください。SVGを扱うときのタグらしいです。
参考：https://developer.mozilla.org/ja/docs/Web/SVG/Element/image
<image>タグの書き方は上記のスクリーンショットを参考にしてください。
<image xlink:href="./img/svg-text.svg" width="100%" height="100%" mask="url(#clipMask)"></image>こちらのコード↑をコピペして使ってもOKです。
xlink:href=” ” の中には静止画のSVGファイル(今回の場合はsvg-text.svg)への相対パスを書きます。
mask=”url( )” の中に、先程作った<mask>タグのidを入れてあげます。
『このimageタグにはmaskがあるけど、そのmaskは#clipMaskっていうidが振ってあるやつですよ』
と言った感じですね。
ここに関してはあんまり深堀りせずに、｢そういうもんか｣くらいで良いです。私も詳しくはわかりませんw
おまじない的なやつだなと思っておきましょう。
ここまでできたらもう完成です！
いざ、ブラウザで見てみる！
できました！！！！
少々アニメーションが早い気がするので、cssの値を弄ってみます。
animationの全体の秒数を3000msに、始まるタイミングを500ms遅らせてみました。
いい感じですね。
スピードをゆっくりにしてみると、ちょっと途中で見えちゃいけない所が見えちゃってる気もしますが、そこは大目に見てくださいw
Illustratorでマスク用のパスを作る時に、曲線ツールの太さを工夫すれば大丈夫なはずです。
まとめ
テキストを手書き風にアニメーションさせる方法をご紹介しました。
ポイントは以下の通り。
- Illustratorでテキストのレイヤーとマスク用のレイヤーをそれぞれ書き出す
- マスク用レイヤーをVivus Instantを使ってアニメーションさせる
- svgのコードをちょいちょい弄る
慣れるまで少し難しく感じるかもしれませんが、
JavaScriptも使用しないので、比較的初心者の方でも実装しやすい方法だと思います。
ぜひ試してみてください！
尚、この方法は!DOCTYPEもくもく会の時にメンバーのすーちゃん(@belltreeWeb)に教えてもらいました(^o^)
初めは自分でググった方法でやってみたのですが、思ったとおりに動いてくれず、すーちゃんに聞いた所すぐに解決できました。
オンライン･オフライン問わず、調べてもできなかったら分かる人に聞くとスキルアップのスピードも上がります。
!DOCTYPEでは不定期でオフラインもくもく会を開催していますので、もし一人で詰まっている時は参加してみてください。
