반복 할 때 SVG에서 애니메이션 이징/지연을 방지하는 방법은 무엇입니까?

Question

예를 들어, SVG 로더 애니메이션을 만들고 싶습니다. 애니메이션이 완료되면 그 점 사라 나던 : 반복 할 때

좀 전환/완화/지연을 가지고

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 100"> 
 
    <circle id="a1" cx="70" cy="70" r="20"/> 
 
    <circle id="a2" cx="120" cy="70" r="20"/> 
 
    <circle id="a3" cx="170" cy="70" r="20"/> 
 
    <circle id="a4" cx="220" cy="70" r="20"/> 
 
    <circle id="a5" cx="270" cy="70" r="20"/> 
 
    <circle id="a6" cx="320" cy="70" r="20"/> 
 
    <circle id="a7" cx="370" cy="70" r="20"/> 
 
    <circle id="a8" cx="420" cy="70" r="20"/> 
 
    <circle id="a9" cx="470" cy="70" r="20"/> 
 
    <circle id="a10" cx="520" cy="70" r="20"/> 
 
    <animate xlink:href="#a1" attributeName="visibility" from="hidden" to="visible" begin="0.1s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a2" attributeName="visibility" from="hidden" to="visible" begin="0.2s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a3" attributeName="visibility" from="hidden" to="visible" begin="0.3s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a4" attributeName="visibility" from="hidden" to="visible" begin="0.4s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a5" attributeName="visibility" from="hidden" to="visible" begin="0.5s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a6" attributeName="visibility" from="hidden" to="visible" begin="0.6s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a7" attributeName="visibility" from="hidden" to="visible" begin="0.7s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a8" attributeName="visibility" from="hidden" to="visible" begin="0.8s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a9" attributeName="visibility" from="hidden" to="visible" begin="0.9s" dur="1s" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a10" attributeName="visibility" from="hidden" to="visible" begin="1s" dur="1s" repeatCount="indefinite" /> 
 
</svg>

이 데모에서

봐는 (미안 전화 무엇을 잘 모릅니다).

(현재 데모 실행에 대한 4 점을 보여주고있다)

난 그냥 도트 (한 점)을 실행 보여주고 싶은

내가 어떻게해야 어떻게, 내가 무엇을 놓치고?

Answer 1

아하, 나는 내가 value

예 사용하여 거 같아요 : (10 단계)

values="visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 590 100"> 
 
    <circle id="a1" cx="70" cy="70" r="20"/> 
 
    <circle id="a2" cx="120" cy="70" r="20"/> 
 
    <circle id="a3" cx="170" cy="70" r="20"/> 
 
    <circle id="a4" cx="220" cy="70" r="20"/> 
 
    <circle id="a5" cx="270" cy="70" r="20"/> 
 
    <circle id="a6" cx="320" cy="70" r="20"/> 
 
    <circle id="a7" cx="370" cy="70" r="20"/> 
 
    <circle id="a8" cx="420" cy="70" r="20"/> 
 
    <circle id="a9" cx="470" cy="70" r="20"/> 
 
    <circle id="a10" cx="520" cy="70" r="20"/> 
 
    <animate xlink:href="#a1" attributeName="visibility" begin="0s" dur="1.3s" values="visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a2" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a3" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a4" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a5" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a6" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a7" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a8" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a9" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;hidden;" calcMode="linear" repeatCount="indefinite" /> 
 
    <animate xlink:href="#a10" attributeName="visibility" begin="0s" dur="1.3s" values="hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;hidden;visible;" calcMode="linear" repeatCount="indefinite" /> 
 
</svg>