時計の秒針を前進のみにするにはどうすればよいですか?

Question

React を使用してアナログ時計を構築しましたが、秒針に問題があります。秒針は時計回りに動き始めますが、59 秒のマークに達すると、1 秒のマークに達するまで反時計回りに動きます。その後、再び時計回りに動きます。時計回りに連続的に動かすにはどうすればよいでしょうか? importReact,{useEffect,useState}from'react';import'./AnalogClock.css';constAnalogClock=()=>{const[time,setTim

P粉221046425 · Answer

目標を達成するために CSS に JS を挿入しようとする場合は、スタイル付きコンポーネントを使用して利点を得るとともに、それを次のレベルに引き上げ、CSS で JS 変数を使用することをお勧めします。

コードの主な制限は、アニメーションを永久に継続し、360 度に達したときに再開するように指定できないことです。

これは CSS キーフレームとアニメーションを通じて実現できますが、スタイル付きコンポーネントを使用しないと、初期次数やループを完了するまでの秒数など、いくつかの必要なパラメーターをキーフレームやアニメーションに渡すのは困難です

これは、多かれ少なかれコンポーネントのスタイルを設定する方法です

リーリー

不要なロジックをいくつか削除しました。追加した内容のいくつかを説明します

キーフレームは、アニメーションの回転方法 (初期回転から初期回転 360 度まで) を定義し、アニメーションプロパティでも使用できるため、この目標を達成するために不可欠です。これは ClockStick で役立ちます。

私は、初期度がユーザーがアプリケーションを実行した特定の時間に対応する状態を宣言しただけです
次に、各スティック (ClockStick) がループを完了するのにかかる秒数を渡します (216000 => 時間、3600 => 分、60 => 秒)

https://codesandbox.io/s/dawn-rgb-qn58t6

回答に関連するいくつかのリンク

https://styled-components.com/