2

Друзья, всем привет!

Нужна ваша помощь. Никак не могу разобраться с анимацией. Квадрат двигается по траектории, которая образует треугольник. Нужно сделать так, чтобы в двух нижних точках квадрат задерживался на 3 секунды. Т.е. квадрат прочерчивает одну грань, задерживается в конечной точке на 3 секунды, затем прочерчивает еще одну грань, с остановкой в конечной точке на 3 секунды, затем квадрат прочерчивает третью грань треугольника (возвращается в пераоначальную точку старта).

Вот мой код. Паузы не могу сделать.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg version = "1.1" baseProfile="full"

xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"

height = "600px"  width = "800px">
     <g>
           
          <animateTransform id="Down" begin="0s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150"/>
              
          <animateTransform id="Left" begin="Down.end" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150"/>
          
          <animateTransform id="Up" begin="Left.end" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0"/>

         <rect id = "romb" x="200" y="100" fill="green" width="20" height="20"/>
     </g>        
</svg>

1 ответ 1

5

В begin добавьте Условие для паузы: begin="Down.end +2s"

<animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" 
 type="translate" from="100,150" to="-100,150" fill="freeze"/>    

update
Цитата из комментария автора вопроса

Делал также с +2s, но у меня почему-то квадрат на эти 2 секунды возвращался в начальную позицию. А приведённый код работает как нужно.

Это происходит из-за то, что анимационная картинка по окончании анимации возвращается к первому кадру анимации.
Чтобы "заморозить" последний кадр анимации и перейти с этого же места расположения к другой анимации перемещения необходимо добавить: fill="freeze"

<svg version = "1.1" baseProfile="full"

xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"

height = "600px"  width = "800px" >
     <g>
           
          <animateTransform id="Down" begin="0s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
              
          <animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
          
          <animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />

         <rect id = "romb" x="200" y="100" fill="green" width="20" height="20"/>
     </g>        
</svg>

Если нужно зациклить анимацию, то для первой анимации id="Down" условие запуска будет begin="0s;Up.end+2s"

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg version = "1.1" baseProfile="full"

xmlns = "http://www.w3.org/2000/svg"
xmlns:xlink = "http://www.w3.org/1999/xlink"

height = "600px"  width = "800px" >
     <g>
           
          <animateTransform id="Down" begin="0s;Up.end+2s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
              
          <animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
          
          <animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />

         <rect id = "romb" x="200" y="100" fill="green" width="20" height="20"/>
     </g>        
</svg>

Время анимации и пазы между ними установите по своему вкусу

UPDATE

При желании можно добавить вращение прямоугольнику.

Для этого добавляется ещё одна анимация:

 <rect id = "romb" x="200" y="100" fill="green" width="20" height="20">
    <animateTransform id="an_rotate" begin="0s" dur="0.8s" 
      attributeName="transform" type="rotate" from="0" to="360" 
       repeatCount="indefinite" />
 </rect>

#romb {
transform-origin:center;
transform-box:fill-box;
}
<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"
   height = "600px"  width = "800px" >
     <g>
        <animateTransform id="Down" begin="0s;Up.end+2s" dur="2s" attributeName="transform" type="translate" from="0,0" to="100,150" fill="freeze"/>
          <animateTransform id="Left" begin="Down.end +2s" dur="2s" attributeName="transform" type="translate" from="100,150" to="-100,150" fill="freeze"/>
          <animateTransform id="Up" begin="Left.end +2s" dur="2s" attributeName="transform" type="translate" from="-100,150" to="0,0" fill="freeze" />

         <rect id = "romb" x="200" y="100" fill="green" width="20" height="20">
             <animateTransform id="an_rotate" begin="0s" dur="0.8s" attributeName="transform" type="rotate" from="0" to="360" repeatCount="indefinite" />
         </rect>
     </g>        
</svg>

1
  • 1
    Огромное спасибо! Делал также с +2s, но у меня почему-то квадрат на эти 2 секунды возвращался в начальную позицию. А приведённый код работает как нужно. Ещё раз спасибо за помощь!
    – Alex R
    14 ноя 2021 в 21:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.