【打倒Retinaその3】SVG入門〜すぐに使える簡単アニメーション〜

2014年9月2日

Pocket

0904

これが使いたかった!!SVGアニメーション!!!
SVG第三弾 いよいよアニメーションです。
SVGを利用するとスムーズでリッチなアニメーションの実現が可能です。
基本ではありますが、これを覚えれば今後役に立つことでしょう。
それでは、SVGでどんどんアニメーションを作っていきましょう。
 
 
 
SVGでのアニメーションはanimateタグを使います。
アニメーションしたい要素の中にanimateタグを記述していきます。

<svg width="200" height="200">
   <circle cx="100" cy="100">
      <animate 属性記述/>
   </circle>
</svg>

animateタグで使用する基本的な属性

attributeName アニメーションの対象となる属性の名前
from アニメーションの開始時の値
to アニメーションの終了時の値
by アニメーションの終了時の値を開始時の値からの相対で指定
dur アニメーション時間
h:時間、min:分、s:秒、ms:ミリ秒で表記
fill アニメーション終了時、開始時の値に戻るかを指定
“remove”:開始時に戻る、”freeze”:終了時のまま止まる
begin アニメーションの開始時間
h:時間、min:分、s:秒、ms:ミリ秒で表記
repeatCount リピート数
数字:表記回数分リピート、”indefinite”:無限リピート

拡大アニメーション

byで指定toで指定

<svg width="400" height="200">
   <circle cx="100" cy="100" r="20" fill="red">
      <animate attributeName="r" from="20" by="30" dur="2s" repeatcount="indefinite"/>
   </circle>
   <text x="75" y="190" font-size="15" fill="gray">byで指定</text>

   <circle cx="250" cy="100" r="20" fill="blue">
      <animate attributeName="r" from="20" to="50" dur="2s" repeatcount="indefinite"/>
   </circle>
   <text x="225" y="190" font-size="15" fill="gray">toで指定</text>
</svg>

左はby属性を使用してアニメーションしています。byは相対な値なので、20
からプラス30大きくなり、拡大後のサイズが50になります。
左はto属性を使用してアニメーションしています。toは絶対な値なので、20
から50に大きくなり、拡大後のサイズが50になります。
 

■valuesを使って書く

<svg width="200" height="200">
   <circle cx="100" cy="100" r="20" fill="red">
      <animate attributeName="r" values="20; 50; 20" dur="4s" repeatcount="indefinite"/>
   </circle>
</svg>

values=”開始時の値; 終了時の値; 戻る値”
としたら往復するアニメーションが作れます

線アニメーション

<svg width="300" height="200">
   <line x1="50" y1="50" x2="60" y2="50" stroke-width="10" stroke="black" stroke-linecap="round">
      <animate attributeName="x2" from="50" to="250" dur="2s" begin="0s" repeatcount="indefinite"/>
   </line>
   <line x1="50" y1="100" x2="60" y2="100" stroke-width="10" stroke="black" stroke-linecap="round">
      <animate attributeName="x2" from="50" to="250" dur="2s" begin="1s" repeatcount="indefinite"/>
   </line>
</svg>

beginで開始時間をずらしています。
上は0秒
下は1秒後にアニメーションを開始します。

色アニメーション

<svg width="200" height="200">
   <circle cx="100" cy="100" r="50" fill="pink">
      <animate id="animate1" attributeName="fill" from="pink" to="yellow" dur="3s" begin="0s; animate2.end" fill="freeze"/>
      <animate id="animate2" attributeName="fill" from="yellow" to="skyblue" dur="3s" begin="animate1.end" fill="freeze"/>
   </circle>
</svg>

animate要素にidをふって、begin属性に ”id” + ”.end” と記述するとそのidのアニメーションが終了後にアニメーションが実行されます。
※fill=”freeze”を記述しないと初期値に戻ってしまいます。

グラデーションアニメーション

<svg width="200" height="200">
   <defs>
      <radialGradient id="anime_grad" gradientUnits="userSpaceOnUse" cx="100" cy="100" r="50" spreadMethod="repeat">
         <stop offset="0" stop-color="blue">
            <animate id="anim" attributeName="offset" dur="3s" values="0; 1; 0" repeatCount="indefinite"/>
         </stop>
         <stop offset="1" stop-color="#ccc" /> 
      </radialGradient>
   </defs>
   <circle cx="100" cy="100" r="50" fill="url(#anime_grad)"/>
</svg>

移動アニメーション

<svg width="300" height="100">
   <circle cx="50" cy="50" r="10" fill="blue">
      <animate attributeName="cx" dur="3s" values="50; 250; 50" repeatCount="indefinite"/>
   </circle>
</svg>

パス上移動アニメーション

<svg width="1000" height="300">
   <path id="line2"
      d="M 120 100 L 300 100 Q 300 100 320 100 T340 120
      L340 220 Q 340 220 340 240 T320 260 
      L140 260 Q 140 260 120 260 T100 240
      L100 140 Q 100 140 100 120 T120 100" 
      fill="none" stroke="black" stroke-width="2"/>
   <circle cx="0" cy="0" r="10" fill="black">
      <animateMotion dur="5s" repeatcount="indefinite">
         <mpath xlink:href="#line2"/>
      </animateMotion>
   </circle>
</svg>

pathにidをふり、
animateMotionタグを使い、xlink:hrefにパスのidを指定します。

イージング

<svg width="200" height="200">
   <circle cx="100" cy="20" r="10" fill="red">
      <animate id="f" attributeName="cy" calcMode="spline" keyTimes="0;1" keySplines="0.6 0 1.0 1.0" from="20" to="180" begin="0s; s.end" dur="2s" 
fill="freeze"/>
      <animate id="s" attributeName="cy" calcMode="spline" keyTimes="0;1" keySplines="0.0 0.0 0.5 1.0" from="180" to="20" begin="f.end" dur="2s" 
fill="freeze"/>
   </circle>
</svg>

バウンド

最後に応用してバウンドしたボールのようなアニメーションを作ってみました

<svg width="300" height="300">
   <ellipse cx="100" cy="30" rx="20" ry="20" fill="black">
      <animate id="first" attributeName="cy" calcMode="spline" keyTimes="0;1" keySplines="0.6 0 1.0 1.0" from="30" to="250" dur="1s" begin="0s; second.end" fill="freeze" />
      <animate id="second" attributeName="cy" calcMode="spline" keyTimes="0;1" keySplines="0.0 0.0 0.5 1.0" from="250" to="30" dur="1s" begin="bound_first.end" fill="freeze" />
      <animate id="bound_first" attributeName="ry" from="20" to="10" dur="0.2s" begin="first.end" fill="freeze" />
      <animate id="bound_second" attributeName="ry" from="10" to="20" dur="0.3s" begin="bound_first.end" fill="freeze" />
   </ellipse>
</svg>

 
 
 
3弾に渡ってSVGの解説をしましたが、まだまだ基本で応用したら色々できると思います。
拡大縮小に耐えられる美しいサイト制作を目指していきましょう!
 
 
【打倒Retinaその1】劣化知らず!伸縮自在のベクター画像『SVG』
【打倒Retinaその2】SVG入門〜いろいろなスタイル指定〜

続きを読む

【打倒Retinaその2】SVG入門〜いろいろなスタイル指定〜

Pocket

svg2

前回はSVGでの簡単な図形の描画方法について説明しました。
簡単な図形でしたが、複雑な図形を描くには、曲線のコマンドをうまく使うのが大変そうですね。
Illustratorで描いたパスをSVG形式で保存して描くこともできるので、Illustratorと応用したらかなり高度なデザインができそうです。
 
それでは、引き続きSVG第二弾をお送りします。
 
今回はグラデーションやテキスト、transformなどスタイルについてのレポートです。
 
 

グループ

<svg width="400" height="150">
   <g fill="blue">
      <rect x="50" y="50" width="50" height="50"/>
      <rect x="150" y="50" width="50" height="50" fill="red"/>
      <rect x="250" y="50" width="50" height="50"/>
   </g>
</svg>

gタグでくくった中身がグループ化されます。
一度にスタイルを設定したりする時に便利です。

スタイル

<style type="text/css">
   #group1{
      fill: yellow;
      stroke: red;
   }
   .groupclass{
      fill: green;
   }
</style>
<svg width="400" height="200">
   <rect id="group1" x="50" y="50" width="50" height="50"/>
   <rect id="group1" x="150" y="50" width="50" height="50" fill="red"/>
   <rect class="groupclass" x="250" y="50" width="50" height="50"/>
</svg>

idやclassをふってスタイルを付けれます。

グラデーションタグ

linearGradient 線形グラデーション
radialGradient 放射形グラデーション

 

linearGradient座標

yx011

グラデーション開始点(0,0)、終了点(1,1)
x1=”0″ y1=”0″ x2=”1″ y2=”1″
linearGradientでは、グラデーションの開始位置と終了位置を指定して、グラデーションの方向を指定します。

線形グラデーション

(1,0)→(1,1)(0,1)→(1,1)

<svg width="400" height="200">
   <defs>
      <linearGradient id="linear_grad1" x1="1" y1="0" x2="1" y2="1">
         <stop offset="0" stop-color="skyblue"/>
         <stop offset="1" stop-color="yellow"/>
      </linearGradient>
      <linearGradient id="linear_grad2" x1="0" y1="1" x2="1" y2="1">
         <stop offset="0.5" stop-color="salmon"/>
         <stop offset="1" stop-color="green"/>
      </linearGradient>
   </defs>
   <rect x="50" y="50" width="100" height="100" fill="url(#linear_grad1)"/>
   <rect x="200" y="50" width="100" height="100" fill="url(#linear_grad2)"/>
</svg>

linearGradientタグにidをふって、グラデーションを適用したいfill属性にurl(id名)を設定します。
offsetを変更するとグラデーション開始位置を変更できます。
左はグラデーション開始(1,0)、終了(1,1)の上から下にグラデーションをかけています。
右はグラデーション開始(0,1)、終了(1,1)の左から右にグラデーションをかけています。
開始(0,0)、終了(1,1)とすると左上から右下に斜めにグラデーションをかけることもできます。
 
今回新しく出てきたタグ

defs 定義 : スタイルやグラデーションなど、定義を書く

 

radialGradient座標

offset10 中心(cx,cy)

radialGradientでは、cx、cyで指定したグラデーションの開始位置から放射線状に外側にグラーデーションをかけます。

放射形グラデーション

中心点 (0.5,0.5)中心点 (0.3,0.3)

<svg width="400" height="200">
   <defs>
      <radialGradient id="radial_grad1" cx="0.5" cy="0.5" r="0.5">
         <stop offset="0" stop-color="skyblue"/>
         <stop offset="1" stop-color="yellow"/>
      </radialGradient>
      <radialGradient id="radial_grad2" cx="0.3" cy="0.3" r="0.5">
         <stop offset="0" stop-color="salmon"/>
         <stop offset="1" stop-color="green"/>
      </radialGradient>
   </defs>
   <circle cx="100" cy="100" r="50" fill="url(#radial_grad1)" />
   <circle cx="250" cy="100" r="50" fill="url(#radial_grad2)" />
</svg>

左は、グラデーション開始位置cx=0.5、cy=0.5の円の中心に指定しています。
右は、グラデーション開始位置cx=0.3、cy=0.3の円の左上に指定しています。

テキスト

SVGでテキストを挿入することもできます。
TEXT TEST1TEXT TEST2

<svg width="300" height="150">
   <text x="50" y="50" font-size="30" fill="black">TEXT TEST1</text>
   <text x="50" y="100" font-size="30" fill="yellow" stroke="red" stroke-width="1">TEXT TEST2</text>
</svg>

Illustratorと考え方は同じで、fillが塗り、strokeが枠線です。

パステキスト

texttesttexttest

<svg width="300" height="150">
   <defs>
      <path id="text_path" d="M 50 100 Q 120 50 190 100" stroke="black" fill="none"/>
   </defs>
   <text font-size="30" fill="black">
      <textPath xlink:href="#text_path">texttesttexttest</textPath>
   </text>
</svg>

テキストを乗せたいpathを定義しidをふっておき、textPathタグのリンクにidを指定します。

Transform

css指定するTransform属性も使えます。

■回転

<svg width="200" height="200">
   <rect x="50" y="50" width="100" height="100" fill="blue"
transform="rotate(30,100,100)"/>
</svg>

「rotate」:回転
rotate(回転角度,回転中心X,回転中心Y)

■拡大

<svg width="200" height="200">
   <rect x="25" y="35" width="50" height="50" fill="blue" transform="scale(2,1.5)"/>
</svg>

「scale」:拡大
scale(拡大値X,拡大値Y)
scale(2,1.5)では、X軸2倍、Y軸1.5倍に拡大しています。

■変形

<svg width="200" height="200">
   <rect x="30" y="50" width="100" height="100" fill="blue" transform="skewX(20)"/>
</svg>

「skewX」:X軸変形
「skewY」:Y軸変形
skewX(移動値)

 
 
 
他にもいろいろスタイル指定方法がありますが、とりあえず基本を押さえました。
ここまで、できるとだいぶデザインが自由になってきたのではないでしょうか!
次回は、SVGでのアニメーションについてリポートしたいと思います。
 
 
【打倒Retinaその1】劣化知らず!伸縮自在のベクター画像『SVG』
【打倒Retinaその3】SVG入門〜すぐに使える簡単アニメーション〜

続きを読む

【打倒Retinaその1】劣化知らず!伸縮自在のベクター画像『SVG』

2014年8月29日

Pocket

svg1

MacBook Pro Retinaモデルがアップデートされ、MacBook AirのRetinaモデルやiMacの4Kモデルの発売が噂されている中、PCのRetina対策がされたwebサイトはまだまだ少ないです。
スマホでもPCでもRetina対策をするためにはどんな方法があるでしょうか?
 
 

【打倒Retinaその1】SVG画像
 
先日、4年愛用していた『13インチMacBook Pro』が完全に死亡したので『13インチMacBook Pro Retinaディスプレイモデル』を購入しました。
iPhoneとiPad miniのRetinaディスプレイモデルはすでに持っていてRetinaの解像度は知っていたのですが、13インチのRetinaは目が疲れるほど高解像度です。
そして何よりも驚いたのが、、、今まで愛していたwebサイトたちが汚い!画像が荒れまくっているのです。
 
参考:
https://www.apple.com/jp/macbook-pro/features-retina/#retina ←こんなんです。
 
それ以来、PC版のwebサイトで画像を使うのが怖くなってしまいました。

これはマズいので、早速対応策を考えました。
第一の救世主は、『SVG』
 
“Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。”
wikipedia内『Scalable Vector Graphics』より引用
 
ベクターイメージとは、ざっくりと言ってしまえば、引き延ばしても画質が劣化しない画像形式です。
 
今回、SVGの基本的な使い方を紹介します!
 
SVGはHTMLの中に記述します。 
SVGタグを表示したい場所に配置し、タグの中に要素を書いていくだけです。 

<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
   描きたい要素を書く
</svg>
</body>
</html>

SVGタグに「width」と「height」で描画領域を指定します。 
 
JavaScriptを使用しないでも、(個人的にはJavaScripより簡単に)アニメーションの実装もできます。 
SVGでのアニメーションはまた今度、記述していきます。 
今回はSVG入門ということで、図形の描画方法をまとめてみました。
 

基本的なタグ

SVGでは図形を描画する用のタグが用意されています。

rect 四角形を描画
circle 円形を描画
ellipse 楕円形を描画
line 直線を描画
polyline 折れ線を描画
polygon 多角形を描画
path パスを描画

 

基本的な属性

x svgタグを基準としたX座標の位置を指定
y svgタグを基準としたY座標の位置を指定
width 幅指定
height 高さ指定
fill 塗りつぶしの色を指定
stroke 線の色を指定
stroke-width 線幅を指定

 
描画タグに属性を記述しいていき、図形の色やサイズなどを指定行きます。 
cssの記述方法に似ているかな〜って思います。 

四角

<svg width="200" height="200">
   <rect x="50" y="50" width="100" height="100" fill="none" stroke="black" stroke-width="3"/>
</svg>

SVG描画領域の左端から、x軸に(右に)図形の左端が50、
SVG描画領域の上端から、y軸に(下に)図形の上端50の位置に
幅100、
高さ100
の四角を描画しています。

<svg width="200" height="200">
   <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="3"/>
</svg>

「cx」:円の中心点のX座標
「cy」:円の中心点のY座標
「r」:円の半径
 
四角は図形の左上端が座標の点でしたが、円の場合は四角と違い円の中心が座標の点になります。
SVG描画領域の左端から、x軸に(右に)円の中心(半径)が100、
SVG描画領域の上端から、y軸に(下に)円の中心(半径)が100の位置に
半径50
の円を描画しています。

楕円

<svg width="200" height="200">
   <ellipse cx="100" cy="100" rx="60" ry="30" fill="none" stroke="black" stroke-width="3"/>
</svg>

「rx」:X軸に向かう円の半径
「ry」:Y軸に向かう円の半径

 
 
四角や円などの記述ならcssでかくのとあんまり変わらなくないか?と思いますが、SVGのいいところは線や曲線をパスで描画できることがいいところだと私は思います。 
以下はかなり簡単ですがパスを引いて図形を描いてみました。 

<svg width="200" height="200">
   <line x1="50" y1="50" x2="150" y2="150" stroke-width="3" stroke="black"/>
</svg>

「x1,y1」:開始点
「x2,y2」:終了点
 
線を描画する時は点と点を結んでいく感じで、
x軸50、y軸50の位置から、x軸150、y軸150の位置を結ぶ線を描きます。

折れ線

<svg width="200" height="200">
   <polyline points="50 100 80 130 110 100 140 130 170 100" stroke="black" stroke-width="3" fill="none"/>
</svg>

「points」:x y の順に表記。各点をつないでいく

三角

<svg width="200" height="200">
   <polygon points="100 50 50 100 150 100" stroke="black" stroke-width="3" fill="none"/>
</svg>

開始点から終了点を結ぶ図形を描画

矢印

<svg width="200" height="200">
   <path d="M 100 50 l 50 50 l -35 0 l 0 50 l -30 0 l 0 -50 l -35 0 z" stroke="black" stroke-width="3" fill="none"/>
</svg>

「d」:コマンド x y の順に表記。各点をつないでパスを描いていく

角丸四角

<svg width="200" height="200">
   <path
      d="M 50 50 L 130 50 Q 130 50 150 50 T 170 70
      L 170 120 Q 170 120 170 140 T 150 160
      L 70 160 Q 70 160 50 160 T 30 140
      L 30 90 Q 30 90 30 70 T 50 50" 
      fill="none" stroke="black" stroke-width="3"/>
</svg>

基本的なコマンド

M,m 開始位置
L,l 直線
H,h 水平線
V,v 垂直線垂直線
C,c,S,s,Q,q,T,t 曲線
A,a 円弧
Z,z 開始位置までの直線

大文字は絶対位置
小文字は相対位置

補足

SVGは引き延ばしても劣化しない素晴らしい画像形式ですが、
写真などには向いておらず、基本的にべた塗りの画像(この記事のサムネのような)に向いています。
 
 
【打倒Retinaその2】SVG入門〜いろいろなスタイル指定〜
【打倒Retinaその3】SVG入門〜すぐに使える簡単アニメーション〜

続きを読む

このサイトについて


『意識低い系女と高い系男の一年戦争』はクリエイティブ会社エアゼの代表2人が運営するブログです。エアゼは、アプリ・Web・IoT・インタラクティブコンテンツのデザイン・開発を手がけています。

エアゼ ホームページ