毎日のようにWebサイトの制作を行なっていて、そろそろ会社として人員追加を考え始めています。
ページのLoading機能や、いろいろな読み込み系の処理で、良く見かけるクルリンパ機能があります。（自分が勝手に呼んでいるだけです）
白い枠が円を描くようにアニメーションする機能です。
サンプルページ :
https://sunnydayscoffee.com/
こちらのサンプルページのこのサイトのトップバナーの左下にあるような白い線を描くアニメーションです。
このページではCanvasを使って描画されているんですが、これをcssだけでやろうと考えました。
デモ
白い輪っかを描く、ドーナツ上の表示はCSSだけでできてしまいます。
スライダで、
クルリンパします。
ソース
上記デモのソースコードは、次のhtml記述だけで実現できています。
<div class="donuts-1"></div>
<input type="range" name="donuts_1" min="0" max="360"> スライダで、<b>クルリンパ</b>します。
<style>
.donuts-1{
--size : 250px;
--line : 30px;
--angle : 70deg;
width : var(--size);
height: var(--size);
clip-path: circle();
background-image:conic-gradient(red var(--angle), black var(--angle));
mask-image: radial-gradient(transparent calc(var(--size) / 2 - var(--line)), black calc(var(--size) / 2 - var(--line)));
}
</style>
<script>
document.querySelector(`input[name="donuts_1"]`).addEventListener("input" , (e => {
const value = Number(e.target.value)
document.querySelector(`.donuts-1`).style.setProperty("--angle" , `${value}deg`)
}))
document.querySelector(`input[name="donuts_1"]`).value = 70
</script>
解説
操作をして円を動かしたいわけではなく、タイマーの様に一定の速度でアニメーションしてもらいたんですが、ブログでわかりやすくクルリンパを表現したくて、Javascriptを使っています。
単純に、ドーナツ上の形状を描きたい場合は、cssだけで実現できます。
CSSのポイントは３つあって
1. clip-pathを使って、外側の円形切り抜きを行なう。
2. mask-imageを使って、内側の円形くりぬきを行う。
3. background-imageのconic-gradient機能を使って、中心から角度のついた境目の色分けを行う。
上記のソースでは、--size（ドーナツの全体サイズ, --line（円の線の太さ）, --angle（プログレスの角度）、これらをcssのプロパティ変数でセットして、calcで計算して、サイズ変更などを簡単にできるようにしています。
@keyframeでbackground-imageをセットしてはいけない！
上記ソースで、Javascriptを取り除いて、cssのanimationを使って、--angleをアニメーションさせれば、手軽にカウントっぽい表現ができると思って次の様にしてみました。
<div class="donuts-2"></div><style>
.donuts-2{
--size : 250px;
--line : 30px;
--angle : 0deg;
width : var(--size);
height: var(--size);
clip-path: circle();
background-image:conic-gradient(red var(--angle), black var(--angle));
mask-image: radial-gradient(transparent calc(var(--size) / 2 - var(--line)), black calc(var(--size) / 2 - var(--line)));
animation : donuts-anim 1.0s linear 0s infinite forwards;
}
@keyframes donuts-anim{
0% {
--angle: 0deg;
}
50%{
--angle: 180deg;
}
100% {
--angle: 360deg;
}
}
</style>
あれ？
keyframeの箇所しか値が適用されていない・・・
アニメーションしない・・・
ネットで調べても、この症状について書かれていない・・・
・・・
いろいろ考察して、実験して、あーだこーだした結果、行き着いた結論は、
background-imageは、keyframe補完がされないプロパティであるという事。
同情するなら、Javascriptを使え！
上記のbackground-imageでアニメーションさせたかったら、Javascriptで行えばいいんです。
cssのプロパティ変数でセットしていた、--angleの値を変えてあげるだけでいいので、比較的楽な処理でできました。
あとがき
今回の処理作成では、CSSだけで、クルリンパを実現させたかったのですが、background-imageのcss仕様でつまづいて、思った通りの結果にはなりませんでした。
まあ、でも、よほどcssにこだわらなければ、比較的効率的なクルリンパが作れたので、ヨシとしましょう。（自己満足ですが）
とにかく、これで、仕事が進んで、良かった、良かった、ヨシタカユリコ！
0 件のコメント:
コメントを投稿