Как закодировать определенную временную последовательность анимации SVG?

Итак, я ищу бесконечную петлю анимации анимации svg. Heres мой код:Как закодировать определенную временную последовательность анимации SVG?

<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="4750ms;" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="8000ms;" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim3" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="9750ms" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim4" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="13000ms" dur="0.5s" fill="freeze"/>

После быстрой Google, я обнаружил, что я думал, что я искал в этом SO answer, увы он был близок, но не выполнил то, что мне нужно было полностью.

Чувствуете разницу с проблемой и Тереза является то, что у меня есть определенное время, я хочу анимации, чтобы вступили в силу (4750ms, 8000ms, 9750ms и 13000ms), в то время как в SO ответ был только установленное время.

Другой google привел меня к этому answer, но казалось, что OP не суетился о таймингах.

источник

2015-09-02 Diginate

Если вы предоставите то, что анимация может работать против как jsfiddle, например, я могу проверить мой ответ. –

Похоже, вы хотите, чтобы для этих значений были значения и ключевые моменты. Например.

<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" values="0;0;180;180;0;0;180;180;0" keyTimes="0;4750ms;5250ms;8000ms;8500ms;9750ms;10250ms;13000ms;13500ms" fill="freeze"/>

источник

2015-09-02 17:49:00

Я пробовал это, и это не сработало. Теперь посмотрим на сортировку кода. Спасибо, в любом случае. – Diginate

Как насчет этого? How to make SVG Loop Animation?

Пример кода:

<svg> 
    <rect> 
    <animate id="o1" begin="0;o1.end" dur="10s" 
    attributeName="visibility" from="hide" to="hide"/> 
    </rect> 
    <circle fill="orange" cx="-50" cy="100" r="20"> 
    <animate begin="o1.begin" 
    attributeName="cx" from="250" to="50" dur="5.05s"/> 
    </circle> 
    <circle fill="blue" cx="150" cy="100" r="50" /> 
    <circle fill="orange" cx="-50" cy="100" r="20"> 
    <animate begin="o1.begin+5s" 
    attributeName="cx" from="50" to="250" dur="5.05s"/> 
    </circle> 
</svg>

источник

2015-09-04 23:11:39

Как закодировать определенную временную последовательность анимации SVG?

ответ

Смежные вопросы