47,031viewsこんにちはアートディレクターの奥田です。最近はハンドドリップコーヒーにはまっています。手軽にペーパードリップですが思っていたより手間もかからず抽出している時間がいいリラックスタイムにもなってオススメです。コスパでいくと業務スーパーの「ラグジュアリッチコーヒー」がいいのですが味はハマヤのコーヒーが個人的には好きです。他のコーヒーも試してみたいですね。ウェブサイトにより強烈な印象を与えるにはアニメーションが欠かせませんが、よくあるSVGアニメーションではつまらなく感じることはありませんか?今回は少し個性的な印象を与えることができる手書き風アニメーションの実装方法をご紹介いたします。contents今回実装したいもの用意するものマスク用のレイヤーをつくるSVGでマスクを作るvivus.jsでアニメーションさせるさいごに今回実装したいものまずは今回の完成形をご紹介します。今回実装したいものファーストビューなどで訴求したいキャッチをアニメーションさせるとぐっと引き込まれる印象になりそうですね。用意するものはじめに手書き風アニメーションをさせたい文字をイラストレーターで用意します。筆記体など文字が繋がったものを選ぶといいと思います。この方法では文字内に交差する部分が多いとうまくいかない場合があるので注意が必要です。できたら文字のアウトラインを作成し、pngやsvgとして保存します。マスク用のレイヤーをつくる次にマスク用のレイヤーを作ります。先程作成したレイヤーをロックし、上の階層に新しいレイヤーを作成します。ペンツールで一筆ずつなぞっていきます。下の文字が隠れるように線の太さを調節してください。角などが隠れにくい場合は線オプションで角や先端を丸くするとうまくいくと思います。SVGでマスクを作る先程作成したマスクをマスクレイヤーのみにし、SVGとして保存します。これをエディターで開きます。下記のようにSVGはHTMLエレメントのように表記されています。このソースをアニメーションさせたいHTMLファイルにコピーします。svgタグのIDは適当に変えておいてください。Adobe...の行は必要ないので削除してください。コピーした後、styleタグが入っているので別cssかhead内に移動し、classが被らないようにsvgタグのIDを付与しておきます。1500;とstroke-dashoffset:1500;を追記しておきます。以下のような感じです。maskUnits=”objectBoundingBox”></mask>で囲います。maskUnits="objectBoundingBox">...</mask>最後にsvgタグ内にimageタグで最初に作成した画像を指定しておきます。mask="url(#clipmask)"></image>maskアトリビュートにmask=”url(#clipmask)”のようにしてmaskタグのIDを指定します。これでマスクされたSVGタグが完成しました。以下のような感じです。</mask></svg>vivus.jsでアニメーションさせるそれではアニメーションさせていきます。今回はvivus.jsというライブラリを使います。vivus.jsvivus.jsには色々なオプションがあるのですが、今回は手書きのようなアニメーションをさせたいので、’type’を’scenario-sync’にします。‘type’を’scenario-sync’にすることで前のアニメーションの完了前に次のアニメーションが始まるような動きを実現できます。animTimingFunction:Vivus.EASE})これでDemoのような手書き風アニメーションが実装できました。完成したものさいごにいかがだったでしょうか?今回は手書き風アニメーションをSVGで実装する方法をご紹介いたしました。IEやEdgeではSVGの高さを指定しないとズレが生じたりするので注意が必要です。みなさんも是非参考にしてみてください。menuWorksBlogInformation。