ボタン要素をキランとさせる、
SVGアニメーション。

〽️ 「クリックせざるを得ない」デザイン。

SVGアニメーション、作り方。

静的コンテンツの枠を飛び出す。

CSSアニメーション、作り方。

webアニメーションを１から学ぼう♪

⬆︎SVGついてのまとめページ、CSSアニメーションの基本コーナーはこちら。

光源が通り過ぎる、LightSweep効果。

こんにちは、「ふ」です。
ここのところwebサイトでよく見かける動き。

ボタンの上を光が通り過ぎることで、「キラン」とさせるアニメーション。
Aeなど、モーショングラフィックの世界では「Light Sweep」効果と呼ばれているそうです。

SVGアニメーションおたくの「ふ」としては、この動きをSVGで表現せざるを得ません。
今回は、HTMLのbuttonなどの要素に対し、「キラン」とさせるSVGアニメーションの実装について紹介したいと思います。

ブロック要素に対する相対値に基づいて作成するので、要素の大きさが変わってもそのまま対応できるようになっています。

ちなみにテキストロゴなどに効果を与えたい場合は、こちら⬇︎の記事を参考にしてください。

SVG、グラデーションのアニメーション ①〜線形編。

2021.10.30
パターンの繰り返しとユニット切り替え。

仕組み。

仕組みは単純です。
HTMLのブロック要素に対し、全く同じ大きさのSVG領域を重ねます。

そこにこれまた領域いっぱいの長方形を配置し、光源っぽいグラデーションで塗りつぶし。
光源部分は色を付けて、その外側は透明にしておきます。

そしてグラデーションのベクトルを水平移動させることで「光が通り過ぎていく」を表現する作戦です。

これ、「長方形自体を移動させればいいのでは？」と思われるかもしれません。
しかし長方形の枠線にも何らかの効果を付けたい場合。長方形自体が移動してしまうと枠線も一緒に移動してしまいます。
そのため、グラデーションのベクトルのみを動かすことにしました。

レイアウトを構成。

それでは要素を配置していきましょう。

<button class = "kiran"> button </button>

.kiran { display:block; 「「１..@1@」」 margin:0 auto; width:10em; height:3em; font-size:2em; font-weight:bold; position:relative; 「「１..@2@」」 background-color:cadetblue; border-radius:10px; border:none; }

@1@ 「キラン」とさせる要素を<button>で作ります。
<button>要素はもともとインライン要素であるため、CSSでブロック要素にする必要があります。そうしないと<svg>要素をうまく配置することができません。

@2@ ここにSVG領域を重ねるため、positionを「relative」に指定しておきます。

先づはボタンができました。
内部にSVG領域を設け、そこに領域いっぱいの長方形を配置します。

<button class = "kiran"> button <svg width = "100%" height = "100%"> <rect width = "100%" height = "100%" rx = "10"/>「「１ ..@3@」」 </svg> </button>

@3@ <svg>や<rect>要素のサイズは基本、相対値の「100%」で指定しますが、ボタンの角丸（border-radius）と長方形の角丸（rx）だけは絶対値で合わせる必要があります。
viewBoxを指定しないSVGは、座標１つあたりが1pxで描画されます。したがって「rx = "10"」とすれば、10pxの角丸を描画することができます。

「「３/*ボタン要素に重ねる*/」」「「１ ..@4@」」 .kiran svg { position:absolute; top:0; left:0; }

@4@ <svg>要素は「position:absolute」で<button>にちょうど重なるようにします。

現在の状態⬆︎です。
長方形にはfill（塗り）を指定していないので、デフォルトの真っ黒で塗りつぶされています。
光源のグラデーションで塗りつぶしましょう。

グラデーションのイメージ。
光源部分は少し透過させた白（完全な不透明だとちょっと不自然なので）、周りは透明というものにしました。
グラデーションベクトルにはそれらしくなるよう、少し角度を付けています。

@5@ <svg>内でグラデーションを定義。
id名を「kougen」とし、参照できるようにしておきます。

@6@ グラデーションベクトルの始点と終点をxy値で指定します。終点のy値を「10%」にして、少し角度を付けました。

@7@ カラーストップの指定です。
光源である白い部分ですが、左右のぼかし具合に差を付けたいと思い、

・左の距離：0.1
・右の距離：0.01

としています。
また、不透明度を利用したい場合には、色はrgbaを使って指定します。

・光源である白の部分は「少し透過」で、alpha値を「0.8」に。
・まわりの完全な透明部分はalpha値を「0」にすれば、rgb値に関わらず透明になります。

@8@ 先ほどの真っ黒長方形の塗りに、定義したグラデーションを指定します。

配置が完了しました。あとはグラデーションを動かしていくだけです。

「キラン」とさせるアニメーション。

それでは光源をアニメーションさせましょう。
グラデーションベクトルの始点と終点の座標。y値はそのままに、x値のみを動かせば、光源が水平移動します。

@9@ <LinearGradient>の中に２つの<animate>要素を挿入し、アニメーションを指定します。

・attributeName（アニメーションさせる属性）：x1とx2
・dur（継続時間）：2s
・from、to（はじめと終わりの状態）：左右に300%
・repeatCount（繰り返し）：無限