2016-09-09 3 views
1

나는 Flash/Animate에서 웹 페이지에 SVG로 내보낼 애니메이션을 생성해야한다. SVG 애니메이션의 의도 된 기능은 자동으로 멈추는 몇 가지 포인트가 있으며 사용자는 탐색 버튼을 클릭하여이 포인트로 이동할 수 있다는 것입니다. 이렇게하면 시간에 따라 애니메이션이 앞뒤로 움직입니다.특정 지점에서 SVG 애니메이션을 중지하는 방법은 무엇입니까?

그래서 stop()이있는 것처럼 애니메이션을 멈추고 싶습니다. 함수 호출은 애니메이션이 멈추어야하는 프레임에서 호출합니다.

이 방법이 있습니까? 그렇지 않으면

, 가능한 솔루션은 정지 점 사이의 애니메이션을 분할하는 것입니다,하지만 자신의 문제를 제시한다

애니메이션은 애니메이션의 첫 번째 정류장, A. 사용자에 있었다 말을 애니메이션을 클릭하여 C를 가리키면 애니메이션이 A에서 B로 이동 한 다음 B 부분의 끝에서 B에서 C로 애니메이션이 진행된다는 것을 의미합니다. 이것은 자바 스크립트 마법에 의해 달성 될 수 있다고 생각하지만, 약간의 반창고입니다.

+0

어떤 종류의 애니메이션입니까? SMIL의 경우 [pauseAnimations] (https://www.w3.org/TR/SVG/struct.html#__svg__SVGSVGElement__pauseAnimations) –

+0

어떤 종류의 애니메이션을 의미합니까? 한 예로 pauseAnimations를 발견했지만 사용자가 일시 중지 단추를 클릭 한 다음 재생으로 다시 시작해야한다는 점에서. 필자가 원하는 것은 pauseAnimations가 독자적으로 발생하는 애니메이션의 특정 부분에서 어떻게 든 이정표를 설정할 수 있다는 것입니다. – Dralamir

+0

여러 가지 방법으로 애니메이션을 만들 수 있습니다. SMIL, CSS 전환, 원시 자바 스크립트. SMIL을 사용하면 2 개의 애니메이션 만 가질 수 있습니다. 어떤 종류의 방아쇠로 두 번째를 시작할 수 있습니다. –

답변

0

이것은 직접 svg를 사용할 수 없습니다. 그러나 당신이 말했듯이, 당신은 여러 정지 점을 사용할 수 있습니다. onclick 이벤트를 사용할 수 있습니다. 하나의 애니메이션 ID를 클릭하면 선택한 애니메이션이 시작되고 다른 애니메이션은 다른 애니메이션에 숨겨집니다.

+0

답장을 보내 주셔서 감사합니다. 덜 귀찮은 탐색 방법을 변경하는 사례를 만들 것입니다. – Dralamir

관련 문제