SVGを動かす [cssアニメーション/クリッピングマスク/波/線を描く]

投稿日:2017年6月12日

eye-catch-wide
最近SVGを使用してコーディングすることが多くなりました。
SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)、つまり伸縮自在のベクター情報で作られた画像のことです。
一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。
また、テキストエディタで開いて修正ができるので、別の色の画像が必要になった場合も、中の色コードを変えるだけで簡単に複製することが可能です。

今回は、SVGのpathを直接変更できる点を利用して、アニメーションのサンプルをいくつか作成してみました。

Contents

  1. ①imgタグを読み込み
  2. ②svgタグを直接書き込む
  3. ③imgタグを読み込み、desvg.jsを使用する
  4. パーツ別にアニメーションを付ける
  5. クリッピングマスクのアニメーション
  6. 波のアニメーション
  7. 線を描くアニメーション

①imgタグを読み込み

動きを付けずにただ画像を表示するだけであれば、imgタグとして読み込み(もしくはcssのbackground-imageで読み込み)でOKです。
どのサイズでも綺麗に表示されていますね。

②svgタグを直接書き込む

上記の場合はアニメーションは効きませんので、動きを付けたい場合はhtmlにインラインで直接svgタグを記述します。
下のサンプルは、ホバー時にsvg内のpathに対しfillを指定して色を変えています。

\オンマウス or タップ/

③imgタグを読み込み、desvg.jsを使用する

desvg.js
しかし、インラインでsvgタグを書くとソースがごちゃっとしますので、あんまりやりたくありません。
imgタグで読み込んで、且つアニメーションも付けられるのが一番!
ということで、desvg.jsというスクリプトを使用します。
これを使用するとimgタグで読み込んだsvgファイルをsvgタグに置換してくれるので、cssでのスタイリングが可能になります。
imgタグにclassを設定し、それをjsに記述します。

\オンマウス or タップ/

パーツ別にアニメーションを付ける

パーツごとに動きを変える場合は、効果を当てるパーツごとにidやclassを付けます。
最初からイラストレーターなどでレイヤー名を付けておいて書き出しするか、テキストエディタでsvgを開いて編集します。
イラストレーターでレイヤー名を付けた場合はidとして設定されるようですね。
tips01

svg内にインラインでスタイルの記述があるかもしれませんが、邪魔になる場合は削除しちゃいましょう。
そして、作成したid・classに対してcssで個別のスタイルを適用させます。

一定の間隔をおいてアニメーションさせるには、keyframesのパーセントと”animation-duration”(アニメーション1回分の時間の長さ)を利用します。
下のサンプルの文字部分では、3秒かけて1回アニメーションしますが、その内の10%の時点でアニメーションは終了していて、100%まで静止状態となります。

\オンマウス or タップ/

参考:SVGをcss/jsで操作するときに知っておきたいこと

クリッピングマスクのアニメーション

サンプル
たまに見かける、写真の枠がうねうね動くアニメーション。
切り抜きにsvgを使用することで実装できます。
こちらはcssは使わず、svg内のclipPathanimateを利用しています。

作成手順はこちら。(イラストレーターCCを使用)
tips02

ポイント
  • ★シェイプのアンカー(頂点)の数は同じである必要があります。
  • ★始点と終点を滑らかにつなげるために、1つめのパス情報を最後にも記述します。
  • dur:アニメーション1回分の時間を設定します。5秒の場合は5s、500ミリ秒だったら500ms。
  • repeatCount:アニメーションを繰り返す回数を設定します。無限の場合は indefinite です。

波のアニメーション

サンプル
こちらは波のようなアニメーション。
コンテンツのつなぎ目などを飾れば、印象的なサイトになりますね。
クリッピングマスクの時と同じく、animateタグに複数のパス情報を記述することで作成できます。

線を描くアニメーション

縁の線を描いていくアニメーションも、cssで表現することができます。
ホバー時に動くように作成しましたが、スクロールして画像が出てきた時に動き出すようにするとよさそうです。

\オンマウス or タップ/

いかがでしたでしょうか。
意外と簡単に作成できるので、ちょっとしたクオリティアップに役立ちそうですね。
気になるアニメーションを取り入れているサイトを見つけたら、参考に研究してみるのも楽しいです。

川端

関連記事

カテゴリー: WEB, デザイン
  • LINEスタンプ販売中!「カフィーノ♪」 BRISKオリジナル
社内写真