디자인 사진은 이렇습니다. 요소 중 하나를 클릭하면 턴테이블처럼 흰색 체인을 따라 호 모양으로 움직입니다. 그렇다면 어떻게 하면 더 간단하고 빠르게 구현할 수 있을까요? 아이디어.
사실 모바일 버전의 경우 이 작품은 전체라고 생각해서 선과 아이콘만 바꾸면 어렵지 않지만 필요한 건 아이콘도 그에 따라 움직입니다
PHP中文网2017-06-12 09:28:23
전체적으로 작은 뷰포트로 초대형 블록을 만듭니다. 클릭하면 슈퍼 블록이 회전할 수 있습니다. 이 초대형 블록은 고리와 작은 아이콘으로 이루어진 전체입니다(또는 고리와 작은 아이콘이 두 개의 전체로 만들어집니다. 두 블록의 너비와 높이, 고리의 디자인 직경이 동일해야 하므로 작은 아이콘의 크기는 블록이 회전해야만 링과 원활하게 연결될 수 있다는 것입니다)
我想大声告诉你2017-06-12 09:28:23
여러 클래스가 요소를 배치하고 클래스 이름을 배열에 저장합니다. 요소를 클릭하면 각 요소의 클래스가 차례로 전환됩니다. 애니메이션 효과를 원할 경우 각 클래스에 transition를 추가할 수 있습니다.
이것은 일반적인 아이디어이므로 시도해 볼 수 있습니다.
巴扎黑2017-06-12 09:28:23
논의만 할 수 있어요. . . 잘 모르겠으니까,
이 체인을 사용하여 이동한다면---CSS나 JS 애니메이션을 사용한다면 생각해보면 큰 요소 회전입니다. . . 성능을 알기 위해서는 시도해 봐야 합니다. 그런 다음 캔버스를 사용하여 그리는 것이 번거로울 것입니다. 큰 링을 고정하고 링의 각 사각형의 위치와 각도를 계산하고 싶습니다. . 이에 대한 프레임워크가 있는지도 모르고 내 캔버스에 익숙하지도 않습니다. 한마디로 매우 번거롭습니다.
이것은 단지 초보 아이디어입니다. . 다른 사람들의
를 확인해 보세요.
typecho2017-06-12 09:28:23
아이디어: 항목을 정렬하고 오프셋 값(절대 중간점, 하단 중앙)을 계산하고 항목을 클릭하여 색인에 해당하는 색인을 얻은 다음 색인과 오프셋 값을 비교하고 왼쪽은 시계 반대 방향, 오른쪽은 시계 방향, 애니메이션이 완료될 때마다 아이콘 정렬을 반복하세요.
참고:
이것은 무한 루프 스크롤과 동일한 구조를 가져야 하며 시계 방향과 시계 반대 방향 모두 완료할 수 있도록 앞, 가운데, 뒤 3개의 원본 데이터 세트가 필요합니다.
호환성을 위해 애니메이션은 전환으로만 사용하는 것이 좋습니다. 즉, 항목을 클릭하면 애니메이션이 완료되어 항목의 정렬을 동적으로 조정하고 목록을 다시 그리는 것입니다. 각 애니메이션은 배열 정렬 작업입니다.
기술 구현 계획:
css3을 사용하여 구현하세요. 어려움은 css3 회전 애니메이션에 있습니다.
