SVG 모션 애니메이션. 무작위 시작 위치

Question

나는 원자의 애니메이션 구성표를 만들려고합니다. 전자의 애니메이션을 구현했지만 항상 Path 요소의 첫 번째 지점에서 애니메이션을 시작합니다.

여기

참조 예 : http://localhostr.com/3CVziiftCJmm

어떻게 경로의 곡선을 따라 임의의 점에서 애니메이션을 시작하려면? 또한 수용 가능한 다른 해결책 : 경로 곡선의 회전. 어쨌든이 원자 구조를 좀더 현실적으로 만들고 싶습니다.

Answer 1

비록 아직 proposed이지만 svg에는 선언적 임의성이 없습니다. 제공된 예제를 보면 svg에서 선언적 임의성을 사용할 수있는 자바 스크립트 라이브러리를 찾을 수 있습니다 (하지만 자바 스크립트가 작동해야 함을주의하십시오).

무작위성이 필요한 또 다른 옵션은 자바 스크립트를 사용하여 motionPath> 요소의 keyTimes and keyPoints 속성을 조정하는 등 필요한 경로 오프셋을 생성하는 것입니다.

아마도 자바 스크립트로 구동되는 애니메이션을 실행하는 데 좀 더 호환 될 수 있지만 웹킷에는 동적으로 수정 된 애니메이션 요소에 문제가 있습니다.