こんにちは朱夏です。
今回は、HTMLとCSSを使って作られたテキストアニメーションを分解して、動きの仕組みを理解していきたいと思います。
対象はこちらのサイトから参照しました。
このサイトの「Animated wave clipped by text」を見ていきたいと思います。
ページを行ったり来たりすると面倒なので、上記サイトからコードを引用してきました。
先ずTHMLから。
<body>
<svg viewbox="0 0 100 20">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="#326384"/>
<stop offset="95%" stop-color="#123752"/>
</linearGradient>
<pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
<path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)">
<animateTransform
attributeName="transform"
begin="0s"
dur="1.5s"
type="translate"
from="0,0"
to="40,0"
repeatCount="indefinite" />
</path>
</pattern>
</defs>
<text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)" fill-opacity="0.6">LOADING</text>
<text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.1">LOADING</text>
</svg>
</body>
それでは順次開設していきたいと思います。
<svg>
SVG形式の画像を文字化したものです。
ここでは、HTML内に直接描画するためのコードを書いています。
他にも、別ファイル(sample.svg or sample.svgz(gzip))として書き出して、<img>タグで呼び出すことも可能な様です。
viewbox=”0 0 100 20″
描画範囲を指定しています。
スペース区切りで以下の値を指定しています。
“(始点のx座標) (始点のy座標) (横幅) (縦幅)”
<defs>
描画内容を<defs>タグ内に書くことで、別の場所でも呼び出して使う事が出来るようになります。
他に影響を及ぼすことは無い様なので、使いまわさなかったとしても書いておいても良いと思います。
<linearGradient>
グラデーションさせる時に使用するタグです。
今回は本来の使い方と違い、途中に色の境界を作るために使っています。
id=”gradient”
idを指定しています。
これは普段使用しているので説明不要ですね。
x1=”0″ x2=”0″ y1=”0″ y2=”1″
グラデーションの方向を指定しています。
x1とy1はグラデーションの始点の座標、x2とy2はグラデーションの終点を指定します。
<stop>
ここでグラデーションの色指定をしています。
今回は、始点の色と終点の色で2色指定しています。
offset=”5%”
offset=”95%”
グラデーションの開始位置を全体の何％から開始するかを指定しています。
始点からグラデーションの開始位置までの間は、色の変化は無しになります。
stop-color=”#326384″
stop-color=”#123752″
グラデーションの色を指定している部分です。
<pattern>
同じ図形を繰り返し表示する場合に使われるタグです。
id=”wave”
waveというidをつけています。
x=”0″ y=”0″
描画の始点座標を指定しています。
width=”120″ height=”20″
描画範囲を指定しています。
ここはsvgの描画範囲と一緒にしておくと良いと思います。
範囲が違うと、意図せず描画が崩れる可能性が高いです。
patternUnits=”userSpaceOnUse”
<pattern>で指定した座標をどこで使うかを指定しているものです。
今回指定している”userSpaceOnUse”は、描画領域の座標系として使用する指定の様です。
もう一つ指定があるのですが、”objectBoundingBox”というものになります。
これの説明としては「描画要素の座標を比率で指定する」です。
この指定についてはいまのところ理解が追い付いていないので、とりあえず保留しています。
<path>
図形を描画するためのパスです。
id=”wavePath”
wavePathというidをつけています。
d=”M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z”
この部分が図形を表示するためのコードになります。
MやQなどがどんな線を描くか、数値がそれに対するパラメーターになります。
詳細はちょっと時間がかかりそうなので今回は割愛します。
mask=”url(#mask)”
マスクをかける時に使います。
しかし、今回はどのように機能しているのか解りませんでした。
この部分を削って表示しても結果は変わらなかったので、必要ない部分かも知れません。
fill=”url(#gradient)”
オブジェクト内部の塗りを指定しています。
今回はid=”gradient”を指定しているので、グラデーション表示になります。
<animateTransform>
アニメーションの動きを指定しています。
attributeName=”transform” → 名前を付けます
begin=”0s” → 開始タイミングの指定します。
dur=”1.5s” → 完了までの時間です。ループの場合は一周するまでの時間。
type=”translate” → 変化のタイプを指定します。
from=”0,0″ → 変化前
to=”40,0″ → 変化後
repeatCount=”indefinite” → アニメーションの反復回数を指定します。今回は無限。
<text>
テキスト表示用のタグです。
今回は「LOADING」というテキストを表示しています。
<text>が２つあるのは、グラデーションの表示とウェーブの表示の2つを重ねているからの様です。
text-anchor=”middle”
テキストを表示する際の基準値をどこにするかを指定します。
ここではテキストの中央を基準にして表示する指定になっています。
センター表示する時にはこれが良い様です。
x=”50″ y=”15″
文字位置のリストを指定しています。xは横位置、yは縦位置です。
font-size=”17″
フォントサイズ指定です。
fill=”url(#wave)”
fill=”url(#gradient)”
塗りつぶしの指定です。
一つは波線の描画指定、もう一つはグラデーションの描画指定をしています。
fill-opacity=”0.6″
fill-opacity=”0.1″
fillの不透明度を指定してます。
0(透明)～1の間での指定になります。
CSSについては、ほんとにスタイルを定義していただけで、テキストのエフェクトはHTMLの記述だけで完結していました。
というわけで、テキストアニメーションを分解して仕組みを調べてみました。
全てを理解できたわけではありませんが、自分が使いたいと思った時に、どこを変えればどうなるのかが理解できれば、とりあえずのところは問題ないかと思います。
今回はここまでです。
次回もよろしくお願いします。
