Проблема анимации SVG по пути

Question

Я хочу, чтобы анимировать фигуру вдоль пути, мне удалось создать путь, который я хочу, но затем, когда я анимирую форму для перемещения по пути, она, кажется, обращается по первому часть пути. (простите, бит noob).

Это код;

<svg> 
    <rect x="-100" y="100" width="200" height="200" style="stroke: none; fill: #FFCC33;"> 
     <animateMotion path="M200,200 
         a-50,-50 0 0,0 0,-30 
         a-50,-50 0 0,1 0,-30" 
         begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"/> 
    </rect> 
</svg> 

Я сделал скрипку с ним, как хорошо, это может поставить его в контекст лучше http://jsfiddle.net/fcz69/

Answer 1

Существует не вопрос как таковой (его делать то, что я должен верить), так что на самом деле не решение. Но я попытаюсь подчеркнуть, что происходит, и где замешательство. Я думаю, что это происходит потому, что rotate = "auto" и x, y rect берутся как комбинированные преобразования, если вам нравится, когда они оживляют по пути. Если вы измените x, y на 0,0, это выделит это.

Чтобы попытаться сделать это немного яснее, я объединил несколько прямоугольников с разными значениями x, y. Его такой же эффект, как если бы преобразование сочеталось с вращением.

Вы увидите, как выглядит зеленый, наоборот, его дальнейший выход, когда происходит поворот.

http://jsfiddle.net/fcz69/4/ - быстрый пример, чтобы подчеркнуть, что происходит.

Описание элемента анимацииMotion можно найти здесь http://www.w3.org/TR/SVG/animate.html#RotateAttribute его стоит прочитать бит на «поворот» там, но может потребоваться некоторое время, чтобы опустить вокруг него голову, если она не используется для матриц.

<svg width="600" height="600"> 
    <path d="M200,200 
    a-50,-50 0 0,0 0,-30 
    a-50,-50 0 0,1 0,-30" fill="none" stroke="black"/> 

<rect x="0" y="0" width="200" height="200" 
    style="stroke: none; fill: #FFCC33;"> 
    <animateMotion 
      path="M200,200 
    a-50,-50 0 0,0 0,-30 
    a-50,-50 0 0,1 0,-30" 
      begin="0s" dur="3s" repeatCount="indefinite" 
      rotate="auto" 
     /> 
</rect> 
<rect x="-100" y="100" width="200" height="200" 
    style="stroke: none; fill: #FF0000;"> 
    <animateMotion 
      path="M200,200 
    a-50,-50 0 0,0 0,-30 
    a-50,-50 0 0,1 0,-30" 
      begin="0s" dur="3s" repeatCount="indefinite" 
      rotate="auto" 
     /> 
</rect> 
    <rect x="-200" y="200" width="200" height="200" 
    style="stroke: none; fill: #00FF00;"> 
    <animateMotion 
      path="M200,200 
    a-50,-50 0 0,0 0,-30 
    a-50,-50 0 0,1 0,-30" 
      begin="0s" dur="3s" repeatCount="indefinite" 
      rotate="auto" 
     /> 
</rect> 

</svg> 

Answer 2

Отличный вопрос. Когда я впервые использовал animateMotion, я был очень озадачен, так как мои прямоугольники загадочно исчезли из представления и вернулись в исходное положение только после окончания анимации (к счастью, я не использовал fill = "freeze"). Проблема в том, что во всех учебниках и примерах для анимированных объектов используются x = «0» и y = «0», что мало помогает.

Что действительно происходит: когда вы анимируете объект вдоль пути, тогда его положение x и y относится к системе координат . Его начало (точка 0,0) скользит вдоль пути, а его оси (по умолчанию) параллельны глобальным - ось x горизонтальна, а ось y вертикальна. Когда вы укажете rotate = «auto», оси будут вращаться так, чтобы ось x была касательной к пути. Фактически, анимированный объект вращается не только, но и по совершенно другому пути. Смотрите этот эскиз: