javascript - 클래스 원형 회전 메뉴 구현?

Question

디자인 사진은 이렇습니다. 요소 중 하나를 클릭하면 턴테이블처럼 흰색 체인을 따라 호 모양으로 움직입니다. 그렇다면 어떻게 하면 더 간단하고 빠르게 구현할 수 있을까요? 아이디어.

-------보충---------

사실 모바일 버전의 경우 이 작품은 전체라고 생각해서 선과 아이콘만 바꾸면 어렵지 않지만 필요한 건 아이콘도 그에 따라 움직입니다

Answer 1

图标不动 圆环转动 可行？

Answer 2

전체적으로 작은 뷰포트로 초대형 블록을 만듭니다. 클릭하면 슈퍼 블록이 회전할 수 있습니다. 이 초대형 블록은 고리와 작은 아이콘으로 이루어진 전체입니다(또는 고리와 작은 아이콘이 두 개의 전체로 만들어집니다. 두 블록의 너비와 높이, 고리의 디자인 직경이 동일해야 하므로 작은 아이콘의 크기는 블록이 회전해야만 링과 원활하게 연결될 수 있다는 것입니다)

Answer 3

여러 클래스가 요소를 배치하고 클래스 이름을 배열에 저장합니다. 요소를 클릭하면 각 요소의 클래스가 차례로 전환됩니다. 애니메이션 효과를 원할 경우 각 클래스에 transition를 추가할 수 있습니다.

이것은 일반적인 아이디어이므로 시도해 볼 수 있습니다.

Answer 4

논의만 할 수 있어요. . . 잘 모르겠으니까,

이 체인을 사용하여 이동한다면---CSS나 JS 애니메이션을 사용한다면 생각해보면 큰 요소 회전입니다. . . 성능을 알기 위해서는 시도해 봐야 합니다. 그런 다음 캔버스를 사용하여 그리는 것이 번거로울 것입니다. 큰 링을 고정하고 링의 각 사각형의 위치와 각도를 계산하고 싶습니다. . 이에 대한 프레임워크가 있는지도 모르고 내 캔버스에 익숙하지도 않습니다. 한마디로 매우 번거롭습니다.

그럼 각 아이콘. . 이는 CSS나 js를 사용하여 수행할 수 있습니다. . 핵심은 이벤트가 포함된다는 것입니다. . 저는 캔버스 요소가 이벤트와 어떻게 관련되어 있는지 연구하지 않았습니다. . .

이것은 단지 초보 아이디어입니다. . 다른 사람들의

를 확인해 보세요.

Answer 5

아이디어: 항목을 정렬하고 오프셋 값(절대 중간점, 하단 중앙)을 계산하고 항목을 클릭하여 색인에 해당하는 색인을 얻은 다음 색인과 오프셋 값을 비교하고 왼쪽은 시계 반대 방향, 오른쪽은 시계 방향, 애니메이션이 완료될 때마다 아이콘 정렬을 반복하세요.

참고:

• 이것은 무한 루프 스크롤과 동일한 구조를 가져야 하며 시계 방향과 시계 반대 방향 모두 완료할 수 있도록 앞, 가운데, 뒤 3개의 원본 데이터 세트가 필요합니다.

• 호환성을 위해 애니메이션은 전환으로만 사용하는 것이 좋습니다. 즉, 항목을 클릭하면 애니메이션이 완료되어 항목의 정렬을 동적으로 조정하고 목록을 다시 그리는 것입니다. 각 애니메이션은 배열 정렬 작업입니다.

기술 구현 계획:

• css3을 사용하여 구현하세요. 어려움은 css3 회전 애니메이션에 있습니다.

캔버스로 그리기, 키 프레임 원리;
svg로 제작되었으며 그래픽이 벡터라는 점을 제외하면 원리는 캔버스와 유사합니다.
mp4 비디오를 사용하세요. https://www.apple.com/cn/mac-...을 참조하세요. ;
더 복잡한 키 프레임 애니메이션을 사용하세요.
구체적인 구현은 여전히 ​​번거롭지만 관련 호 배열 플러그인, CSS3 애니메이션 등을 검색할 수 있습니다. 개인적으로는 canvas와 svg가 더 안정적이라고 생각합니다. 몇 가지 아이디어를 던져보고 마스터를 기대해 보겠습니다.

Answer 6

으아악

코드를 업로드하고 사진을 변경하면 끝
참고용으로 아주 간단합니다