CSSアニメーションで揺らぐ円を描いてみる
円の外側がゆらゆらしている円を描いてみます。
想定
理想形(結果)はこれです。
See the Pen ShakingBall by YamaOK (@yamaok) on CodePen.
素材
- html
- css
- css-animation
- Vue
仮説
ゆらゆらしている円を描くにはどうしたらいいのか？を考えてみます。
- 外側がそれっぽく波を打っていればいい?
- 波を打つ = 凸凹を表現してあげればよい?
- 角の丸み(border-radius)が異なるdivを適当な数、重ねて配置して回転すればよい？
- 重ねたときに水っぽく見えるように色の透過度を調整してあげる必要がありそう
実践
円を重ねる
複数のdivを作成し、重ねます。
0. サイズの指定は適当に・・・揺らぎの幅を少なくしたい=正方形/大きくしたい=長方形
1. 表示位置を絶対指定にすることで重なるよう調整します。
2. 真ん中寄せにして必ず画面中央にします。
3. 色の透過度を指定する
.ball{
// 0.
width:30em;
height:30em;
// 1.
position:absolute;
// 2.
left:0px;
top:0px;
margin:0auto;
// 3.
background-color:rgba()
}
異なる角度の丸みを設定する
ここでVueを使います。
すべてhtmlで描くこともできますが、後々の設定変更に柔軟に対応できそうなのでVue側で制御してしまいます。
- 描画する円の数は、Vueで指定します(後々、どれくらいの円を描けばちょうどよいか調整するため)
- 描画する際の角の丸みについては、あまり角張るといけないのでこちらでいくつか定義します
- 回転のスピードにも ばらつきをもたせる ことで揺らぎをそれっぽくさせてみます
<html>
<body>
<div id="content">
<div id="animationBlock">
<div id="contentName"><span>Hello World</span></div>
<!--1. これで、ballCount(int)の数分だけdivを描画できます-->
<template v-for="count of ballCount">
<!--2. 可変にしたいスタイルの定義はVueで定義したメソッドで出力します-->
<div class="ball" :style="getCss(count)"></div>
</template>
</div>
</body>
</html>
const balls = new Vue({
el:'#animationBlock',
data:{
//1. とりあえず10個あればいいと思いましたが、各自でちょうど良い数を定義してください
ballCount:10,
//2. 丸み付けのパターンをいくつか定義します
// 丸みは正方形の場合、一辺の半分で円になってしまいます
// したがって、半分未満の長さを指定します
features:[
{radius:13},
{radius:13.5},
{radius:14}
],
},
methods: {
getCss:function(wave){
//2.
let feature = this.features[wave % this.features.length]
//3.
let duration = Math.floor(Math.random() * 10 % 5 + 2)
return `border-radius:${feature.radius}em;animation-duration:${duration}s`
}
},
})
まとめ
応用させれば似たような揺らぎをもたせることはできそうだなあと思います。
今回は定義しませんでしたが、アニメーションの開始をずらす Or 開始位置をずらすなどしても面白いかもしれません。
できるかぎり可変にはしたつもりなので、皆さんの美的センスに合わせて改良してください。
例に描いたものはすべて自分のセンスですので・・・笑
皆さんのお役に立てれば幸いです。