(86) 【SVG画像】テキストのアウトラインをアニメーションさせる。

投稿者: | 2020年2月18日
0件のコメント

1,796 views

この記事は最終更新から 1669日 が経過しています。

1. やりたいこと

テキストの縁を描画するアニメーションを作りたい。

2. やってみる

1) ベクタ画像エディタでテキストを作る。

ここでは Adobe社の Illustratorを使う。フリーの Inkspaceなどでも同じことが出来る。

(1) 文字を書く。

(2) 文字のアウトラインを作成する。

すると…
こんな風に文字の縁にパスが作成される。

(3) SVGファイル形式で保存する。

SVG画像ファイルは、ベクタ画像データが書き込まれたテキストファイルだ。

2) WEBブラウザ上でアニメーションさせる。

(1) シンプルにアウトラインをアニメーションさせる。

下記の HTMLソース内に、上記1)で作成した SVGを <svg> タグとして埋め込んでいる。
更に <style> タグ内にテキストのアウトラインをアニメーションさせるための CSSを書き足した。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00086 demo1</title>

</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.65 59.63">
  <defs>
    <style>
      .cls-1{
        stroke: #000;
        fill: transparent;
        animation: text_anim_kf 5s linear;
        stroke-width: 1;
        stroke-dasharray: 200%;
      }
      @keyframes text_anim_kf {
          0% { stroke-dashoffset: 200%; }
        100% { stroke-dashoffset: 0%; }
      }
    </style>
  </defs>
  <title>remoterpaアセット 1</title>
  <g id="レイヤー_2" data-name="レイヤー 2">
    <g id="レイヤー_1-2" data-name="レイヤー 1">
      <path class="cls-1" d="M13.22,59.06,0,59.34,3.94.84,15.47.56l-2,28.13,16-.56L31.22.28H43.31Q41.9,19.69,41.63,31.22q-.29,8.72-.29,27.28H28.13L29,37.69c-4.5.56-7.22.94-8.16,1.12a61.7,61.7,0,0,0-7.59,2.53Z"/>
      <path class="cls-1" d="M50.06,2.25,86.91.56l-.28,10.69L60.47,14.06,59.34,27.84l20.82-1.12V36l-21.1,2.81L58.78,47l25.88-.84V57.38L47,59.34q.27-15.73.84-27.56Q48.38,19.41,50.06,2.25Z"/>
      <path class="cls-1" d="M104.91.84,102.66,45l22.5-.28-.28,12.94L90.56,59.34,93.38.56Z"/>
      <path class="cls-1" d="M143.16.84,140.91,45l22.5-.28-.28,12.94-34.32,1.68L131.63.56Z"/>
      <path class="cls-1" d="M184.78,59.63a15.23,15.23,0,0,1-13.5-7.32q-5.91-9-3.37-25.59,2.52-17.43,11.81-23.91a15.11,15.11,0,0,1,9-2.81A16.78,16.78,0,0,1,198,2.53q6.47,4.22,8.16,14.63a65.8,65.8,0,0,1-.28,18Q204.46,45.84,199.69,52A17.69,17.69,0,0,1,184.78,59.63Zm-5.34-21.38q0,9.86,5.34,10.69t7.6-5.91a61.9,61.9,0,0,0,2.81-17.72c.18-6.37-.28-10.87-1.41-13.5s-3-3.65-5.62-3.09q-4.23,1.13-6.47,9.28A77,77,0,0,0,179.44,38.25Z"/>
    </g>
  </g>
</svg>

</body>
</html>

別Windowで開く

(2) 左から一文字ずつアニメーションさせる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00086 demo2</title>

</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.65 59.63">
  <defs>
    <style>
      .cls-1{
        stroke: transparent;
        fill: transparent;
        stroke-width: 1;
      }
      .text_anim{
        stroke: #000;
        animation: text_anim_kf 1s linear forwards;
        stroke-dasharray: 200%;
      }
      @keyframes text_anim_kf {
          0% { stroke-dashoffset: 200%; }
        100% { stroke-dashoffset: 0%; }
      }
    </style>
  </defs>
  <title>remoterpaアセット 1</title>
  <g id="レイヤー_2" data-name="レイヤー 2">
    <g id="レイヤー_1-2" data-name="レイヤー 1">
      <path class="cls-1" d="M13.22,59.06,0,59.34,3.94.84,15.47.56l-2,28.13,16-.56L31.22.28H43.31Q41.9,19.69,41.63,31.22q-.29,8.72-.29,27.28H28.13L29,37.69c-4.5.56-7.22.94-8.16,1.12a61.7,61.7,0,0,0-7.59,2.53Z"/>
      <path class="cls-1" d="M50.06,2.25,86.91.56l-.28,10.69L60.47,14.06,59.34,27.84l20.82-1.12V36l-21.1,2.81L58.78,47l25.88-.84V57.38L47,59.34q.27-15.73.84-27.56Q48.38,19.41,50.06,2.25Z"/>
      <path class="cls-1" d="M104.91.84,102.66,45l22.5-.28-.28,12.94L90.56,59.34,93.38.56Z"/>
      <path class="cls-1" d="M143.16.84,140.91,45l22.5-.28-.28,12.94-34.32,1.68L131.63.56Z"/>
      <path class="cls-1" d="M184.78,59.63a15.23,15.23,0,0,1-13.5-7.32q-5.91-9-3.37-25.59,2.52-17.43,11.81-23.91a15.11,15.11,0,0,1,9-2.81A16.78,16.78,0,0,1,198,2.53q6.47,4.22,8.16,14.63a65.8,65.8,0,0,1-.28,18Q204.46,45.84,199.69,52A17.69,17.69,0,0,1,184.78,59.63Zm-5.34-21.38q0,9.86,5.34,10.69t7.6-5.91a61.9,61.9,0,0,0,2.81-17.72c.18-6.37-.28-10.87-1.41-13.5s-3-3.65-5.62-3.09q-4.23,1.13-6.47,9.28A77,77,0,0,0,179.44,38.25Z"/>
    </g>
  </g>
</svg>

<script>
var ary_text_obj = document.getElementsByClassName('cls-1');
function anim_text(){
                         ary_text_obj[0].classList.add('text_anim');
  setTimeout(function(){ ary_text_obj[1].classList.add('text_anim'); }, 1000);
  setTimeout(function(){ ary_text_obj[2].classList.add('text_anim'); }, 2000);
  setTimeout(function(){ ary_text_obj[3].classList.add('text_anim'); }, 3000);
  setTimeout(function(){ ary_text_obj[4].classList.add('text_anim'); }, 4000);
};
anim_text();
</script>

</body>
</html>

別Windowで開く

(3) 出来上がった文字に色を塗っていく。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00086 demo3</title>

</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 206.65 59.63">
  <defs>
    <style>
      .cls-1{
        stroke: transparent;
        fill: transparent;
        stroke-width: 1;
      }
      .text_anim{
        stroke: #000;
        animation: text_anim_kf 1s linear forwards;
        stroke-dasharray: 200%;
      }
      @keyframes text_anim_kf {
          0% { stroke-dashoffset: 200%; }
        100% { stroke-dashoffset: 0%; }
      }
      .text_fill_anim{
        animation: text_fill_anim_kf 0.5s linear forwards;
      }
      @keyframes text_fill_anim_kf {
          0% { fill: transparent; }
        100% { fill: #ff0; }
      }
    </style>
  </defs>
  <title>remoterpaアセット 1</title>
  <g id="レイヤー_2" data-name="レイヤー 2">
    <g id="レイヤー_1-2" data-name="レイヤー 1">
      <path class="cls-1" d="M13.22,59.06,0,59.34,3.94.84,15.47.56l-2,28.13,16-.56L31.22.28H43.31Q41.9,19.69,41.63,31.22q-.29,8.72-.29,27.28H28.13L29,37.69c-4.5.56-7.22.94-8.16,1.12a61.7,61.7,0,0,0-7.59,2.53Z"/>
      <path class="cls-1" d="M50.06,2.25,86.91.56l-.28,10.69L60.47,14.06,59.34,27.84l20.82-1.12V36l-21.1,2.81L58.78,47l25.88-.84V57.38L47,59.34q.27-15.73.84-27.56Q48.38,19.41,50.06,2.25Z"/>
      <path class="cls-1" d="M104.91.84,102.66,45l22.5-.28-.28,12.94L90.56,59.34,93.38.56Z"/>
      <path class="cls-1" d="M143.16.84,140.91,45l22.5-.28-.28,12.94-34.32,1.68L131.63.56Z"/>
      <path class="cls-1" d="M184.78,59.63a15.23,15.23,0,0,1-13.5-7.32q-5.91-9-3.37-25.59,2.52-17.43,11.81-23.91a15.11,15.11,0,0,1,9-2.81A16.78,16.78,0,0,1,198,2.53q6.47,4.22,8.16,14.63a65.8,65.8,0,0,1-.28,18Q204.46,45.84,199.69,52A17.69,17.69,0,0,1,184.78,59.63Zm-5.34-21.38q0,9.86,5.34,10.69t7.6-5.91a61.9,61.9,0,0,0,2.81-17.72c.18-6.37-.28-10.87-1.41-13.5s-3-3.65-5.62-3.09q-4.23,1.13-6.47,9.28A77,77,0,0,0,179.44,38.25Z"/>
    </g>
  </g>
</svg>

<script>
var ary_text_obj = document.getElementsByClassName('cls-1');
function anim_text(){
                         ary_text_obj[0].classList.add('text_anim');
  setTimeout(function(){ ary_text_obj[1].classList.add('text_anim'); ary_text_obj[0].classList.add('text_fill_anim'); }, 1000);
  setTimeout(function(){ ary_text_obj[2].classList.add('text_anim'); ary_text_obj[1].classList.add('text_fill_anim'); }, 2000);
  setTimeout(function(){ ary_text_obj[3].classList.add('text_anim'); ary_text_obj[2].classList.add('text_fill_anim'); }, 3000);
  setTimeout(function(){ ary_text_obj[4].classList.add('text_anim'); ary_text_obj[3].classList.add('text_fill_anim'); }, 4000);
  setTimeout(function(){                                             ary_text_obj[4].classList.add('text_fill_anim'); }, 5000);
};
anim_text();
</script>

</body>
</html>

別Windowで開く

3. 所感

・凝れば凝っただけ面白い物が作れそうだ！
・ベクタ画像アニメーション作りでは、技術力よりも、どう動かしたいかという芸術的なセンスが大事だと思う。

4. 謝辞

有用な情報をありがとうございます！
https://qiita.com/duka/items/4ced752bb257884736f9

カテゴリー: SVG

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）