syui/hugo
1
0
Fork 0
Code
65b51b11df
hugo/content/blog/2019-12-13-svg.md
syui 42fb775f9d
update
2024-04-23 22:21:26 +09:00

359 lines
25 KiB
Markdown
Raw Blame History

+++
date = "2019-12-13"
tags = ["svg"]
title = "svgアニメーションを作ってみた"
slug = "svg"
+++
この前、svgでロゴにアニメーション付けている人を見かけて、いいなーと思ったので、自分もやってみることにしました。
svgの仕様は、今回はハマらなかったのですが(たまたま)、場合によってはハマりそうだなって思いました。
重要なのは、`d, path`です。あと、`width, scale`とかもめんどくさそうですが、svgの中身を参考にすればいいと思います。
demo : https://syui.github.io/svg-animation-particle-circle.css
```sh
$ git clone https://github.com/syui/svg-animation-particle-circle.css
$ cd !$:t
$ open index.html
```
色とか透明度をアニメーションで調整してやると、いい感じになります。夢が広がりますね！
最終的には以下のような形で落ち着きましたけど、悩みました。特徴は、`scale(1,0.9)`と`90%のfill`です。パーティクルの色は、html-svgに書いてあるので変更できます。
<style>
.likeButton .syuiold {
fill: #EF454A;
}
.likeButton.clicked .syuiold {
fill: #EF454A;
-webkit-animation: syuioldAnime 400ms;
animation: syuioldAnime 400ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes syuioldAnime {
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;
}
}
</style>
<a href="#">
<svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton" >
<circle class="explosion" r="150" cx="250" cy="250"></circle>
<g class="particleLayer">
<circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/>
<circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"/>
<circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"/>
<circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"/>
<circle fill="#CC8EF5" cx="89" cy="292.5" r="10.5"/>
<circle fill="#9BDFBA" cx="414" cy="282.5" r="10.5"/>
<circle fill="#9BDFBA" cx="115" cy="149.5" r="10.5"/>
<circle fill="#9FC7FA" cx="250" cy="80.5" r="10.5"/>
<circle fill="#9FC7FA" cx="78" cy="261.5" r="10.5"/>
<circle fill="#96D8E9" cx="182" cy="402.5" r="10.5"/>
<circle fill="#CC8EF5" cx="401.5" cy="166" r="13"/>
<circle fill="#DB92D0" cx="379" cy="141.5" r="10.5"/>
<circle fill="#DB92D0" cx="327" cy="397.5" r="10.5"/>
<circle fill="#DD99B8" cx="296" cy="392.5" r="10.5"/>
</g>
<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
<path class="syuiold" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"/>
</g>
</svg>
</a>
```js:script.js
// マウスクリックからの変更
$(".likeButton").hover(function() {
$(this).toggleClass("clicked");
}
```
```css:style.class="syui"
.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の色は濃くするか、リンク色の青に変更するかで悩みました。また、不動にするか、動きを付けるかで非常に悩みました。どちらも相当に魅力的でした。
<style>
.likeButton .syuiblue {
fill: #EF454A;
}
.likeButton.clicked .syuiblue {
fill: #EF454A;
-webkit-animation: syuiblueAnime 400ms;
animation: syuiblueAnime 400ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes syuiblueAnime {
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.0.4) translate(-5%,5%);
-webkit-transform: scale(1.0.4) translate(-5%,5%);
}
80% {
fill: #ef454a91;
transform-origin:0 0 0;
transform: scale(1.0.4) translate(-5%,5%);
-webkit-transform: scale(1.0.4) 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: #008ccf;
}
}
.likeButton .syuioldd {
fill: #999;
}
.likeButton.clicked .syuioldd {
fill: #ccc;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
</style>
<a href="#">
<svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton" >
<circle class="explosion" r="150" cx="250" cy="250"></circle>
<g class="particleLayer">
<circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/>
<circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"/>
<circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"/>
<circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"/>
<circle fill="#CC8EF5" cx="89" cy="292.5" r="10.5"/>
<circle fill="#9BDFBA" cx="414" cy="282.5" r="10.5"/>
<circle fill="#9BDFBA" cx="115" cy="149.5" r="10.5"/>
<circle fill="#9FC7FA" cx="250" cy="80.5" r="10.5"/>
<circle fill="#9FC7FA" cx="78" cy="261.5" r="10.5"/>
<circle fill="#96D8E9" cx="182" cy="402.5" r="10.5"/>
<circle fill="#CC8EF5" cx="401.5" cy="166" r="13"/>
<circle fill="#DB92D0" cx="379" cy="141.5" r="10.5"/>
<circle fill="#DB92D0" cx="327" cy="397.5" r="10.5"/>
<circle fill="#DD99B8" cx="296" cy="392.5" r="10.5"/>
</g>
<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
<path class="syuioldd" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"/>
</g>
</svg>
</a>
<a href="#">
<svg width="77pt" height="77pt" viewBox="0 0 512 512" class="likeButton" >
<circle class="explosion" r="150" cx="250" cy="250"></circle>
<g class="particleLayer">
<circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/>
<circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"/>
<circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"/>
<circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"/>
<circle fill="#CC8EF5" cx="89" cy="292.5" r="10.5"/>
<circle fill="#9BDFBA" cx="414" cy="282.5" r="10.5"/>
<circle fill="#9BDFBA" cx="115" cy="149.5" r="10.5"/>
<circle fill="#9FC7FA" cx="250" cy="80.5" r="10.5"/>
<circle fill="#9FC7FA" cx="78" cy="261.5" r="10.5"/>
<circle fill="#96D8E9" cx="182" cy="402.5" r="10.5"/>
<circle fill="#CC8EF5" cx="401.5" cy="166" r="13"/>
<circle fill="#DB92D0" cx="379" cy="141.5" r="10.5"/>
<circle fill="#DB92D0" cx="327" cy="397.5" r="10.5"/>
<circle fill="#DD99B8" cx="296" cy="392.5" r="10.5"/>
</g>
<g transform="translate(0,512) scale(0.1,-0.1)" fill="#000000" class="icon_syui">
<path class="syuiblue" d="M3660 4460 c-11 -11 -33 -47 -48 -80 l-29 -60 -12 38 c-27 88 -58 92 -98 11 -35 -70 -73 -159 -73 -169 0 -6 -5 -10 -10 -10 -6 0 -15 -10 -21 -22 -33 -73 -52 -92 -47 -48 2 26 -1 35 -14 38 -16 3 -168 -121 -168 -138 0 -5 -13 -16 -28 -24 -24 -13 -35 -12 -87 0 -221 55 -231 56 -480 56 -219 1 -247 -1 -320 -22 -44 -12 -96 -26 -115 -30 -57 -13 -122 -39 -200 -82 -8 -4 -31 -14 -50 -23 -41 -17 -34 -13 -146 -90 -87 -59 -292 -252 -351 -330 -63 -83 -143 -209 -143 -225 0 -10 -7 -23 -15 -30 -8 -7 -15 -17 -15 -22 0 -5 -13 -37 -28 -71 -16 -34 -36 -93 -45 -132 -9 -38 -24 -104 -34 -145 -13 -60 -17 -121 -17 -300 1 -224 1 -225 36 -365 24 -94 53 -175 87 -247 28 -58 51 -108 51 -112 0 -3 13 -24 28 -48 42 -63 46 -79 22 -85 -11 -3 -20 -9 -20 -14 0 -5 -4 -9 -10 -9 -5 0 -22 -11 -37 -25 -16 -13 -75 -59 -133 -100 -58 -42 -113 -82 -123 -90 -9 -8 -22 -15 -27 -15 -6 0 -10 -6 -10 -13 0 -8 -11 -20 -25 -27 -34 -18 -34 -54 0 -48 14 3 25 2 25 -1 0 -3 -43 -31 -95 -61 -52 -30 -95 -58 -95 -62 0 -5 -5 -8 -11 -8 -19 0 -84 -33 -92 -47 -4 -7 -15 -13 -22 -13 -14 0 -17 -4 -19 -32 -1 -8 15 -15 37 -18 l38 -5 -47 -48 c-56 -59 -54 -81 9 -75 30 3 45 0 54 -11 9 -13 16 -14 43 -4 29 11 30 10 18 -5 -7 -9 -19 -23 -25 -30 -7 -7 -13 -20 -13 -29 0 -12 8 -14 38 -9 20 4 57 8 82 9 25 2 54 8 66 15 18 10 23 8 32 -13 17 -38 86 -35 152 6 27 17 50 34 50 38 0 16 62 30 85 19 33 -15 72 -2 89 30 8 15 31 43 51 62 35 34 38 35 118 35 77 0 85 2 126 33 24 17 52 32 61 32 9 0 42 18 73 40 30 22 61 40 69 40 21 0 88 -26 100 -38 7 -7 17 -12 24 -12 7 0 35 -11 62 -25 66 -33 263 -84 387 -101 189 -25 372 -12 574 41 106 27 130 37 261 97 41 20 80 37 85 39 6 2 51 31 100 64 166 111 405 372 489 534 10 20 22 43 27 51 5 8 12 22 15 30 3 8 17 40 31 70 54 115 95 313 108 520 13 200 -43 480 -134 672 -28 58 -51 108 -51 112 0 3 -13 24 -29 48 -15 24 -34 60 -40 80 -19 57 3 142 50 193 10 11 22 49 28 85 6 36 16 67 21 68 18 6 31 53 25 83 -4 18 -17 33 -36 41 -16 7 -29 15 -29 18 1 10 38 50 47 50 5 0 20 11 33 25 18 19 22 31 17 61 -3 20 -14 45 -23 55 -16 18 -16 20 6 44 15 16 21 32 18 49 -3 15 1 34 8 43 32 43 7 73 -46 55 l-30 -11 0 85 c0 74 -2 84 -18 84 -21 0 -53 -33 -103 -104 l-34 -48 -5 74 c-7 102 -35 133 -80 88z m-870 -740 c36 -7 75 -14 88 -16 21 -4 23 -9 16 -37 -3 -18 -14 -43 -24 -57 -10 -14 -20 -35 -24 -46 -4 -12 -16 -32 -27 -45 -12 -13 -37 -49 -56 -79 -20 -30 -52 -73 -72 -96 -53 -60 -114 -133 -156 -189 -21 -27 -44 -54 -52 -58 -7 -4 -13 -14 -13 -22 0 -7 -18 -33 -40 -57 -22 -23 -40 -46 -40 -50 0 -5 -19 -21 -42 -38 -47 -35 -85 -38 -188 -15 -115 25 -173 20 -264 -23 -45 -22 -106 -46 -136 -56 -48 -15 -77 -25 -140 -50 -70 -28 -100 -77 -51 -84 14 -2 34 -10 45 -17 12 -7 53 -16 91 -20 90 -9 131 -22 178 -57 20 -16 52 -35 70 -43 18 -7 40 -22 49 -32 16 -18 15 -22 -24 -88 -23 -39 -47 -74 -53 -80 -7 -5 -23 -26 -36 -45 -26 -39 -92 -113 -207 -232 -4 -4 -37 -36 -73 -71 l-66 -64 -20 41 c-58 119 -105 240 -115 301 -40 244 -35 409 20 595 8 30 21 66 28 80 7 14 24 54 38 89 15 35 35 75 46 89 11 13 20 31 20 38 0 8 3 14 8 14 4 0 16 16 27 36 24 45 221 245 278 281 23 15 44 30 47 33 20 20 138 78 250 123 61 24 167 50 250 61 60 7 302 -1 370 -14z m837 -661 c52 -101 102 -279 106 -379 2 -42 0 -45 -28 -51 -16 -4 -101 -7 -187 -8 -166 -1 -229 10 -271 49 -19 19 -19 19 14 49 22 21 44 31 65 31 41 0 84 34 84 66 0 30 12 55 56 112 19 25 37 65 44 95 11 51 53 111 74 104 6 -2 25 -32 43 -68z m-662 -810 c17 -10 40 -24 53 -30 12 -7 22 -16 22 -20 0 -4 17 -13 38 -19 20 -7 44 -18 52 -24 8 -7 33 -21 55 -31 22 -11 42 -23 45 -26 11 -14 109 -49 164 -58 62 -11 101 -7 126 14 15 14 38 18 78 16 39 -2 26 -41 -49 -146 -78 -109 -85 -118 -186 -219 -61 -61 -239 -189 -281 -203 -17 -5 -73 -29 -104 -44 -187 -92 -605 -103 -791 -21 -42 19 -47 24 -37 41 5 11 28 32 51 48 22 15 51 38 64 51 13 12 28 22 33 22 17 0 242 233 242 250 0 6 5 10 10 10 6 0 10 6 10 14 0 25 50 55 100 62 59 8 56 6 115 83 50 66 74 117 75 162 0 14 7 40 16 57 18 38 52 41 99 11z"/>
</g>
</svg>
</a>
```css:style.class="syui"
/* 動きなし、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](https://mbahack2.syui.cf/)というブログは、好きな色を使って構築していました。
別に昔は良かったと言うつもりはなくて、昔は昔で、アイコンとの兼ね合いが悪いと思っていて、アイコンは初代から赤でしたからね。そこらへんで悩みはありました。
逆に、今のブログはアイコンと統一されてきて、その点ではいい感じなのです。
それに、今回、アニメーションを作ってみて、ますます愛着が持てるようになりました。
これは何も技術ばかりでなく、「そのことについて考える」ことが重要なんだと思います。
配色についても、答えがあるわけでなく、しかし、機会があれば自分なりに配色を考えています。
View Git Blame Copy Permalink