시계의 초침을 앞으로만 움직이게 하는 방법은 무엇입니까?

Question

React를 사용하여 아날로그 시계를 만들었는데 초침에 문제가 생겼습니다. 초침은 시계 방향으로 시작하지만 59초 표시에 도달하면 1초 표시에 도달할 때까지 시계 반대 방향으로 움직입니다. 그 후 다시 시계방향으로 움직입니다. 시계 방향으로 연속적으로 움직이게 하려면 어떻게 해야 합니까?

으아악

CSS가 도움이 되는지 확실하지 않지만 여기에 있습니다.

으으으으

Answer 1

목표를 달성하기 위해 CSS에 js를 삽입하려고 할 때 스타일이 지정된 구성 요소를 사용하여 몇 가지 이점을 얻고 한 단계 더 발전시켜 CSS에서 js 변수를 사용하는 것이 좋습니다

코드의 주요 제한은 애니메이션이 영원히 계속되도록 지정할 수 없어 360도에 도달하면 다시 시작되도록 지정할 수 없다는 것입니다

이는 CSS 키프레임 및 애니메이션을 통해 달성할 수 있지만 스타일이 지정된 구성 요소를 사용하지 않으면 루프를 완료하는 데 필요한 초기 각도 및 초와 같은 일부 필수 매개변수를 키프레임 및 애니메이션에 전달하기 어렵습니다.

구성요소의 스타일을 지정하는 방법은 대략 다음과 같습니다

으아악

불필요한 논리를 삭제하고 추가한 내용에 대해 설명드리겠습니다

키프레임은 애니메이션이 회전하는 방식(초기 회전에서 초기 회전 + 360까지)을 정의하고 애니메이션 속성과 함께 사용할 수도 있으므로 이를 달성하는 데 매우 중요합니다. 이는 ClockStick에 도움이 될 수 있습니다
ClockStick은 초기 정도와 애니메이션이 루프를 완료하는 데 걸리는 시간(초)을 받는 스타일 구성 요소입니다
사용자가 애플리케이션을 실행할 때 특정 시간에 해당하는 초기 등급의 상태만 선언했습니다
그런 다음 각 스틱(ClockStick)이 루프를 완료하는 데 걸리는 시간(초)을 전달합니다(216000 => 시간, 3600 => 분, 60 => 초)

결과입니다

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

답변과 관련된 일부 링크

• https://styled-comComponents.com/
• https://developer.mozilla.org/en -US/docs/Web/CSS/CSS_animations/Using_CSS_animations
• https://medium.com/ @matt.readout/adding-css-animations-with-styled-comComponents-6c191c23b6ba