홈>2020-02-26 00:18

SVG 애니메이션 시퀀스를 반복하는 방법?

animationTransform 시퀀스가 있습니다 :

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/>

스크립트를 사용하지 않고이 시퀀스를 반복 할 수 있다면?

repeatCount="indefinite" 를 사용하여 개별 애니메이션을 반복하도록 설정할 수 있습니다 전체 시퀀스를 순서대로 반복하고 싶습니다.

animationsvgsmil

답변 # 1

이미 알아 냈습니다. 관심있는 사람들을위한 솔루션 :

<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s; anim2.end" dur="0.4s" fill="freeze"/>
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="anim1.end" dur="0.4s" fill="freeze"/>

답변 # 2
단일 animateTransform 내에서 반복 할 수도 있습니다 values 를 제공함으로써 세미콜론으로 구분 된 목록이있는 속성 :
```
<animateTransform attributeName="transform" type="rotate"
     values="0;30;0" begin="0s" dur="0.8s" fill="freeze"
     repeatCount="indefinite" />
```
다음은 Firefox 4.0 및 Chrome에서 확인 된 예입니다.

답변 # 3
(밀리 초) 추가/빼기 가능 :
```
 begin="anim2.end-500ms"
```

Python2.net

SVG 애니메이션 시퀀스를 반복하는 방법?

관련 자료