ムーグラフィックのブログコンテンツへスキップムーグラフィックのブログ﻿メニューとウィジェット検索:アーカイブ2018年1月2017年5月2016年12月2016年11月カテゴリーWeb制作イラストフリーランス近況このブログについてABOUT[css]SVGでアニメーションをつくってみた僕のポートフォリオサイトのトップページにアクセスすると、ローディングアニメーションが再生されるようになっています(マイクロバスが走っている様子)。これは当初、アニメーションGIFで作成して公開していましたが、閲覧環境によってはどうにも動きがガタついて見えてしまい、特にスマートフォンの場合それが顕著でした。レスポンシブ対応なのに・・・。これではいかんと言うことで、早速GIFではなく、SVGファイルに作り直し、これをCSS3のアニメーションで表現させてみました。イラストを分解してSVGにまずマイクロバスのイラストを、車体部分とタイヤ2本に分解して、3つの独立したsvgファイルとして書き出します。これらを、それぞれ別な動きをさせることで、あたかも走っているかのように見せていきたいと思います。IllustratorCCで作成しているので、これをそのまま「SVG形式」で書き出すことができます。HTMLファイルから、このsvgファイルを読み込んで、CSSで動きをつける、という流れになります。Graphics)とは、1998年に誕生したベクターイメージフォーマットで、画像ファイル形式の一つです。ラスターイメージと違い、画像を拡大表示しても画質が劣化せず、ファイルサイズも小さく抑えられるなどのメリットがあります。CSSで動きをつけるまずは、車体のsvgファイルに対して、以下の一連の動きをつけていきます。後部を斜め右下に回転させ、平行になるようにこれを連続でループさせます。この一連の動きを、CSS3でアニメーションさせるには、どうすれば良いのかというところですが、まずアニメーションを定義づけする必要があります。}123456#bus{animation-name:anime;animation-duration:0.5s;animation-timing-function:linear;animation-iteration-count:infinite;}上記のように、車体部分を”#bus”というIDでタグを付与し、”#bus”のアニメーションを指定します。それぞれのプロパティと値の解説は以下の通り。←アニメーションの名前をつける。この場合は”anime”とつけた。←一連の動き一回分に要する時間。この場合は0.5秒と設定。←アニメーションの進行の度合い。この場合は、一定のスピードで動く。←アニメーションのループ回数。これで車体部分のアニメーションの定義が完了しました。次に、上記でアニメーション定義した”anime”に実際の動きをつけます。;}}上記のコードの1行目を見てください。何やら”@keyframes”などという単語が出てきましたが、これは定義したアニメーションの動きを指定するためのプロパティです。キーフレームとはアニメーションにおいて、時間軸上の特定の位置(フレーム)の、要素(今回の場合はバスとタイヤですね)の状態や位置を決定する印です。CSSでキーフレームを指定する場合は、パーセンテージで指定することができます。0%はアニメーションの初期値。100%はアニメーションの終わりをあらわします。}上記の規則でCSSを指定していきます。細かい上記のコードの解説は以下の通り。←アニメーションの一番はじめ。←要素を3度回転させる。←要素を5px真上に移動させる。←回転を元に戻し、平行に。←要素を-3度回転させる。←要素を5px真下に移動させる。←アニメーションの一番最後。これらの一連の動きを0.5秒で動かします。無限ループで再生したアニメーションが以下です。あとは残りの二つのタイヤの動きだけとなります。タイヤの動きは、単純に上下に動かすだけです。タイヤの動きを加えた具体的な完成コードは以下の通り。“tanime02′′としてアニメーション定義を行いました。←アニメーションの名前をつける。この場合は”tanime01′′とつけた。←一連の動き一回分に要する時間。この場合は0.2秒と設定。←アニメーションの進行の度合い。←アニメーションのループ回数。コードの38行目をみてください。二つ目のタイヤのみ、CSSの動きに”animation-delay:0.1s;”と書いてありますが、これはアニメーションの動きを0.1秒遅らせることを意味しています。二つ目のタイヤだけこのような指定をしているかというと、二つのタイヤ、前輪と後輪の動きにズレを出すことによってより、車が走っているような表現を出すためです。これで今回のアニメーションは完成となります。以上で、SVGファイルをCSSでアニメーションさせる方法はおしまいです。ここまでお読みくださり、誠にありがとうございました。ARIA2』を購入しました。