2019-12-13 / @syui

svg

svgアニメーションを作ってみた

この前、svgでロゴにアニメーション付けている人を見かけて、いいなーと思ったので、自分もやってみることにしました。

svgの仕様は、今回はハマらなかったのですが(たまたま)、場合によってはハマりそうだなって思いました。

重要なのは、d, pathです。あと、width, scaleとかもめんどくさそうですが、svgの中身を参考にすればいいと思います。

demo : https://syui.github.io/svg-animation-particle-circle.css

$ git clone https://github.com/syui/svg-animation-particle-circle.css
$ cd !$:t
$ open index.html

色とか透明度をアニメーションで調整してやると、いい感じになります。夢が広がりますね！

最終的には以下のような形で落ち着きましたけど、悩みました。特徴は、scale(1,0.9)と90%のfillです。パーティクルの色は、html-svgに書いてあるので変更できます。

// マウスクリックからの変更
$(".likeButton").hover(function() {
    $(this).toggleClass("clicked");
}

.likeButton .explosion {
  /* サークルのカラーはこのstrokeがいくつも重なって指定されている */
  stroke: #dd4688;
}
.likeButton .syui {
  /* デフォルトは朱色を選択 */
  fill: #EF454A;
}
.likeButton.clicked .syui {
  /* デフォルトは朱色を選択 */
  fill: #EF454A;
  /* アニメーション速度は重要 */
  -webkit-animation: syuioldAnime 400ms;
  animation: syuioldAnime 400ms;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@keyframes syuiAnime {
  /* 朱色を透明にした配色から動作を開始 */
  40% {
    fiil:#ef454a63;
    transform-origin:0 0 0;
    /* 下に抑えるように小さく */
    transform: scale(1,0.9) translate(-9%, 9%);
    -webkit-transform: scale(1,0.9) translate(-9%, 9%);
  }
  /* 朱色を透明に、かつ直前よりも濃くする */
  50% {
    fill:#ef454ab8;
    transform-origin:0 0 0;
    transform: scale(1,0.9) translate(-7%, 7%);
    -webkit-transform: scale(1,0.9) translate(-7%, 7%);
  }
  /* ここで動きを正している、一旦、標準より大きくかつ小さくブレる */
  60% {
    transform-origin:0 0 0;
    transform: scale(1) translate(-7%, 7%);
    -webkit-transform: scale(1) translate(-7%, 7%);
  }
  70% {
    transform-origin:0 0 0;
    transform: scale(1) translate(-5%,5%);
    -webkit-transform: scale(1) translate(-5%,5%);
  }
  80% {
    fill: #ef454a91;
    transform-origin:0 0 0;
    transform: scale(1) translate(-5%,5%);
    -webkit-transform: scale(1) translate(-5%,5%);
  }
  /* ここの配色は朱色から離れて、濃い黄色を選択。爆発の閃光のようなものを再現するため */
  90% {
    fill: #f4a316b3;
    transform-origin:0 0 0;
    transform: scale(1) translate(0%);
    -webkit-transform: scale(1) translate(0%);
  }
  /* 最終の色はもとに戻す */
  100% {
    transform-origin:0 0 0;
    -webkit-transform: scale(1, 1) translate(0%, 0%);
    transform: scale(1, 1) translate(0%, 0%);
    fill: #EF454A;
  } 
}

また、最終的にはhoverの色もそのままにしました。実は、hoverの色は濃くするか、リンク色の青に変更するかで悩みました。また、不動にするか、動きを付けるかで非常に悩みました。どちらも相当に魅力的でした。

/* 動きなし、syuiAnimeを引用しない */
.likeButton.clicked .syui {
  fill: #EF454A;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
/* hoverの色を青に変更 */
@keyframes syuiAnime {
  100% {
    transform-origin:0 0 0;
    -webkit-transform: scale(1, 1) translate(0%, 0%);
    transform: scale(1, 1) translate(0%, 0%);
    fill: #008ccf;
  } 
}

不動のパターンは、せっかくのアニメーションを導入する意味がないと考えたので却下し、hoverは、色の変化が激しすぎてシンプルじゃないと思ったので却下しました。これは、配色を薄い・濃いに変更しても同じように感じました。むしろどうせやるなら一気に配色を変更したほうがまだマシのようにも感じたので、hoverは却下しました。

後は、動きの調整と、パーティクルやサークルの色や動きを調整、そのあたりをやるかもしれませんが、もうこれでいいかなという気もしてます。

(ハマりだすと、時間が溶ける)

アニメーションの配色を考える

試行錯誤してみて思ったのは、たくさんの色で構築すると、一貫性がなく弱々しい感じになってしまい、反対に単色のみで構築すると、面白みがないので、ロゴのアニメーションは、2,3色で構築するのがいいと思うようになりました。

現在のアニメーションは、赤、紫、黄色で構築しています。何度もプレビューしてみましたが、現時点ではそこに落ち着きました。

もちろん、アニメーションを再生する過程で、透明度は考慮しますが、基本は、2色か3色で構成するのがシンプルかつ、見栄えも良くなるのではないかと感じています。

また、ブログで使用する色を限定していれば、そこに合わせるのもいいかもしれません。

私は、ブログのテーマカラーに合わせました。残りの2色はこのテーマカラーに近い、それをサポートするような配色を選択しています。

また、W3C標準の16進数ですが、短縮系があるものを使うほうがいいです。例えば、黒を表現する#000000なら#000です。もちろん、その配色を気に入ればの話ですが、特に問題がないなら、短縮系がある配色を選択したほうがいいと考えています。確かarchlinuxは#3ad, #07bとかだったはず、賢い。

とはいえ、配色は、本当に悩みます。

私は単に名前が似ているというだけで、朱色#ef454aをテーマカラーに決めて使っています。しかし、本当にこれでよかったのかは悩みどころです。

例えば、赤は見づらいという人も多くて、確かにそうかもと思うことはあります。また、個人的には青のほうが好きなので、名前的なつながりやアイコンつながりから、この色を選択して本当に良かったのかは、今でも悩みます。

ですが、テーマカラーを決めた以上、これで本当に良いのかはわかりませんが、これでいきます。

配色に関して、昔やってたMBA-HACK2というブログは、好きな色を使って構築していました。

別に昔は良かったと言うつもりはなくて、昔は昔で、アイコンとの兼ね合いが悪いと思っていて、アイコンは初代から赤でしたからね。そこらへんで悩みはありました。

逆に、今のブログはアイコンと統一されてきて、その点ではいい感じなのです。

それに、今回、アニメーションを作ってみて、ますます愛着が持てるようになりました。

これは何も技術ばかりでなく、「そのことについて考える」ことが重要なんだと思います。

配色についても、答えがあるわけでなく、しかし、機会があれば自分なりに配色を考えています。