DRYな備忘録

Don't Repeat Yourself.

CSSアニメーションで水面の波紋を表現

背景

某これウィジェット*1のローディングインジケータに、水面の波紋のアニメーションGIFを使ってたんですが、アニメーションGIFをインターネッツで漁ったりライセンス確認しなきゃならんうえにカスタマイズできないのがしんどくなったので、CSSで作れないかなと思った次第。

方針

  1. 丸いdivをつくる
  2. 大きさを keyframe animation する
  3. box-shadow inset とかで波っぽくする
  4. 外に行くにつれて薄くすれば消えていく感じになるかな
  5. それらを複数、ずらして重ねればよさそう
  6. 楕円にして水面表現する
  7. その他のチューニング

うるせえ動くもの見せろ

これです

あと読まなくていいです。

1. 丸いdivをつくる

div.circle {
  width:  80%;
  height: 80%;
  border: solid thin #303030;
  border-radius: 50%;
}

f:id:otiai10:20180902000244p:plain

2. 大きさを keyframe animation する

div.circle {
  /* 略 */
  animation: wave 2s infinite;
}

@keyframes wave {
  from {
    width:  0%;
    height: 0%;
  }
  to {
    width:  100%;
    height: 100%;
  }
}

f:id:otiai10:20180902001043g:plain

Chromeのデフォルトのtiming-functionが都合よくうごいてる。

3. box-shadow inset とかで波っぽくする

@keyframes wave {
  from {
    /* 略 */
    box-shadow: 0 0 100px inset #3f3f3f;
  }
  to {
    /* 略 */
  }
}

f:id:otiai10:20180902001939g:plain

だいぶそれっぽいやんけ。

4. 外に行くにつれて薄くすれば消えていく感じになるかな

@keyframes wave {
  from {
    /* 略 */
  }
  to {
    /* 略 */
    opacity: 0;
  }
}

f:id:otiai10:20180902001758g:plain

かなりそれっぽいやんけ。

5. それらを複数、ずらして重ねればよさそう

      <div class="box">
        <div class="circle layer-0"></div>
        <div class="circle layer-1"></div>
        <div class="circle layer-2"></div>
        <div class="circle layer-3"></div>
      </div>
.box {
    /* 略 */
    position: relative;
}

.circle {
    /* 略 */
    position: absolute;
}

div.circle.layer-0 {
  animation-delay: 0s;
}
div.circle.layer-1 {
  animation-delay: 0.2s;
}
div.circle.layer-2 {
  animation-delay: 0.4s;
}
div.circle.layer-3 {
  animation-delay: 0.6s;
}

f:id:otiai10:20180902002930g:plain

できてるやん。

6. 楕円にして水面表現する

これ、サイズが相対なので、transform使うまでもねえわ。

.box {
    height: 10vw;
    /* 略 */
}

f:id:otiai10:20180902004633g:plain

もうほぼ水面やんけ。

水滴が4つ落ちるのではなく、1滴に対して4種類の波が発生するべき

今、4つの水滴が逐次的に落ちて、それぞれ同じ波が4つ生まれているけど、自然には、1つの水滴が落ちて、複数の種類の波が発生すべきなので、ずらし方を改善する。

f:id:otiai10:20180902004509g:plain

いい感じやんけ。

色をちゃんとする

色のセンス無いんだわ〜

f:id:otiai10:20180902005414g:plain

横波をつけてみる

まず沈み込んで、盛り上がって、もっかい沈み込んで、で平常状態に戻る、みたいな感じかな。

f:id:otiai10:20180902010901g:plain

それっぽくなったけど、典型的な「がんばった結果もっさいデザイン」になった気がする。shadowいらないんじゃないかな。

雑感

  • opacityは多く使うのはパフォーマンス的に難あるかもしれない
  • ミニマムな実装としてはこれで満たしてるから、あとはチューニング
  • 他にも方法あったらおしえてください
  • わりとちゃんと働いてがっつり給料もらえる職場があれば紹介してください

DRYな備忘録として