javascript - jQuery 또는 Canvas 일체형 디스플레이 효과 아이디어 솔루션

Question

그림에 표시된 신용 점수 100은 Angular.js를 통해 바인딩된 데이터입니다. 이제 jQuery나 Canvas를 사용하여 신용 점수 페이지에 특수 효과를 만들어야 합니다. 사용자의 시작 신용은 100이고 작은 흰색 원이 표시됩니다. 가 맨 오른쪽에 있으면 사용자의 신용 점수가 100점 이상으로 증가하거나 감소합니다. 100점보다 크면 그림이 변경되지 않습니다. 작은 흰색 원이 시계 반대 방향으로 이동합니다

예를 들어 사용자의 신용 점수가 50점인 경우 작은 흰색 원이 반원 중앙에 있고 왼쪽 1/2 원은 여전히 ​​흰색이며 오른쪽 1/2은 다른 색상 효과를 나타냅니다. 점수는 75입니다. 이때 작은 흰색 원은 반원 오른쪽 3/4 지점에 위치하며 원의 왼쪽 3/4은 여전히 ​​흰색이고 오른쪽 1/4은 다른 색상 효과를 나타냅니다. 즉, 원 색상의 변화는 신용 점수의 변화를 따릅니다.
죄송합니다. 이런 종류의 특수 효과를 만들고 싶다면 jQuer나 Canvas 애니메이션을 사용해야 할까요? 위의 특수 효과를 구현하는 방법에 대한 아이디어를 제공해 주실 수 있나요? 다른 기술적 구현 방법이 있거나 유사한 플러그인이 더 좋습니다. 프로젝트를 따라잡기 위해 열심히 노력하고 있으며 마감일이 매우 촉박합니다. 상호 작용에 주의를 기울일 에너지가 없습니다. 한 사람은 앱의 프론트엔드를 담당하고 백엔드와 인터페이스하느라 바쁩니다)

Answer 1

고등학교 수학책 꺼내서 다시 sincos 내용 집어들고 관련 기능 추가하면 풀 수 있을 텐데 헤헤

Answer 2

마감일이 매우 촉박하다면 기성 차트 라이브러리를 사용하세요. 또는 유사한 효과를 얻을 수 있어야 하는 데이터를 쉽게 시각화할 수 있는 SVG 애니메이션 라이브러리를 찾을 수 있습니다.

Answer 3

이것을 보세요:

참깨 크레딧

Answer 4

캔버스를 이용하여 신용점수 100의 비율을 모니터링하여 글을 쓰고, 그 비율을 이용하여 현재 위치의 호 길이를 계산합니다. 그런 다음 호 길이를 기준으로 중심각을 찾을 수 있습니다. 그런 다음 requestanimationframe을 사용하여 초기 상태를 데이터 0으로 설정한 다음 각 렌더링을 통해 값을 균일하게 수정하여 페이지에 들어갈 때 원의 위치가 동적으로 변경되는 효과를 얻을 수도 있습니다.