円錐形のグラデーション面を持つリアルタイム クロックの作成

グラデーションは、かなり前から CSS スペクトルの一部でした。 多くのプロジェクトで多くの放射状および線形グラデーションが見られますが、少し寂しいと思われるグラデーションのタイプが XNUMX つあります。 円錐勾配. このタイプのグラデーションを使用してウォッチフェイスを作成します。

円錐グラデーションの操作

作成しているのは、中心点を中心に回転する色の変化を伴うグラデーションで構成されており、複数の色の値を持つことができます。 このクロックを機能させるために、回転または開始点を定義する円錐グラデーションの角度値も使用します。 角度は、 from の値です。

background-image: conic-gradient(from 45deg, #6e7dab, #5762d5);

これについて興味深いのは、開始角度が CSS で負の値を持つことができることです。これは後で役立ちます。

円錐形グラデーションのシンプルでエレガントな例:

基本的な時計の作成

時計と針の HTML を追加することから始めましょう。

時計のデフォルトのスタイリングを作成しましょう。 これが適切に機能するために、後で JavaScript を使用して CSS 変数を更新するので、これらの変数を .clock セレクタ。 簡単に微調整するために、手の色も追加しましょう。

.clock {
  /* general clock vars */
  --hour-hand-color: #000;
  --hour-hand-degrees: 0deg;
  --minute-hand-color: #000;
  --minute-hand-degrees: 0deg;
  --second-hand-color: hotpink;
  --second-hand-degrees: 0deg;

  position: relative;
  min-width: 320px;
  width: 25vw;
  height: 25vw;
  min-height: 320px;
  border-radius: 50%;
  margin: 0 auto;
  border: 7px solid #000;
}

/* clock hands */
.hand {
  position: absolute;
  left: 50%;
  bottom: 50%;
  height: 45%;
  width: 4px;
  margin-left: -2px;
  background: var(--second-hand-color);
  border-radius: 6px;
  transform-origin: bottom center;
  transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
}
.second-hand {
  transform: rotate(var(--second-hand-degrees));
}
.hour-hand {
  height: 35%;
  border-radius: 40px;
  background-color: var(--hour-hand-color);
  transform: rotate(var(--hour-hand-degrees));
}
.minute-hand {
  height: 50%;
  background: var(--minute-hand-color);
  transform: rotate(var(--minute-hand-degrees));
}

これにより、時計に必要な一般的なスタイルが設定されます。 設定しました transform-origin 針が時計の文字盤の周りを適切に回転するようにします。 針の角度を設定するためのカスタム プロパティもいくつかあります。これを JavaScript で更新して、それぞれの針が秒、分、時間に適切にマッピングされるようにタイミングを調整します。

これまでのところ、次のようになっています。

よし、これらのカスタム プロパティの更新に移りましょう!

基本的な時計に JavaScript を追加する

まず、クロックをターゲットにして関数を作成します。

const clock = document.getElementById("clock");
function setDate() {
  // Code to set the current time and hand angles.
}
setDate();

関数内で、 Date() function 手の正しい角度を計算するには:

const now = new Date();
const secondsAngle = now.getSeconds() * 6; 
const minsAngle = now.getMinutes() * 6 + secondsAngle / 60;
const hourAngle = ((now.getHours() % 12) / 12) * 360 + minsAngle / 12;

この計算の仕組みは次のとおりです。

• 秒: 60 秒を掛けて 6、たまたま 360、完全な円の角度の完全な数。
• 分： 秒と同じですが、秒の角度を足して で割ります 60 より正確な結果を得るために、XNUMX 分以内に角度を少しだけ大きくします。
• 営業時間： まず、XNUMX 時間の残りを計算し、それを で割ります。 12. 次に、その余りを 12 もう一度、乗算できる小数値を取得します 360. たとえば、23 時になると、 23 / 12 = remain 11. これを 12 で割ると、 0.916 次に乗算されます 360 の総計 330. ここで、分で行ったのと同じことを行い、分の角度を追加します。 12、より正確な結果が得られます。

角度ができたので、あとは、関数の最後に次のコードを追加して、時計の変数を更新するだけです。

clock.style.setProperty("--second-hand-degrees", secondsAngle + "deg");
clock.style.setProperty("--minute-hand-degrees", minsAngle + "deg");
clock.style.setProperty("--hour-hand-degrees", hourAngle + "deg");

最後になりましたが、機能クロックを取得するために XNUMX 秒間隔で関数をトリガーします。

const clock = document.getElementById("clock");
function setDate() {
  // etc.
}
// Tick tick tick
setInterval(setDate, 1000);
setDate();

基本的なクロックの動作デモをご覧ください。

これを円錐グラデーションに適用する

よし、時計の針は動いている。 本当に必要なのは、時間の変化に応じて更新される円錐形のグラデーションにマップすることです。 「グラデーション」フェイスがアクティブな Apple Watch をお持ちの場合、同じ効果が見られたかもしれません。

これを行うには、まず更新することから始めましょう .clock 円錐グラデーションと、開始角度と終了角度を制御する XNUMX つのカスタム プロパティを持つ要素:

.clock {
  /* same as before */

  /* conic gradient vars */
  --start: 0deg;
  --end: 0deg;

  /* same as before */

  background: 
    conic-gradient(
      from var(--start),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.5) var(--end),
      rgb(255 255 255) 2deg,
      rgb(0 0 0 / 0.7)
  );
}

これを少しいじって、好きなようにスタイリングできます。 好みに合わせてグラデーションに色を追加しましたが、始点と終点があれば問題ありません。

次に、私たちは私たちを更新します setDate() 関数を使用して、円錐勾配の開始点と終了点の変数を更新します。 開始点は秒針になります。これは、分の角度と同じであるため、見つけやすいです。 これを時針で終わらせるには、終点を時針と同じにする必要があります。 hourAngle スクリプト内の変数ですが、そこから開始点を差し引きます。

let startPosition = minsAngle;
let endPosition = hourAngle - minsAngle;

これで、変数を JavaScript で再度更新できます。

clock.style.setProperty("--start", startPosition + "deg");
clock.style.setProperty("--end", endPosition + "deg");

この時点で完了できるように見えますが、落とし穴があります。 この計算は、分針が時針よりも角度が小さい限りうまく機能します。 分針がそれを通過した瞬間に、私たちの円錐勾配は乱雑になります。 これを修正するには、開始点として負の値を使用します。 幸いなことに、これが発生した場合は簡単に見つけることができます。 変数を更新する前に、以下を追加します。

if (minsAngle > hourAngle) {
  startPosition = minsAngle - 360;
  endPosition = hourAngle - startPosition;
}

引き算で 360 分の角度から、負の値を設定できます startposition 変数。 この負の開始点のため、開始位置を差し引いた時間角度によって終了位置を更新する必要があります。

これで、時針と分針がグラデーション角度に設定されました。

それでおしまい！ しかし、これをさらに進めることをやめさせないでください。 独自のスタイルを作成し、コメントで共有してください。チェックアウトできます。