svg animateTransform запускает несколько анимаций одновременно

В следующем примере мне нужно, чтобы все анимации выполнялись одновременно. Но работает только последний.

<g>
    <animateTransform attributeName="transform" attributeType="XML"
    type="rotate" values="2 100 100; -1 100 100; 1 100 100; -0.5 100 100 0.5 100 100" begin="indefinite" dur="0.35s" fill="freeze" />

    <animateTransform attributeName="transform" attributeType="XML"
                      type="scale" values="1; 1.2; 1" begin="indefinite" dur="0.35s" fill="freeze" />

    <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" values="0 0; -100 -100; 0; 0" begin="indefinite" dur="0.35s" fill="freeze" />

    <image x="0" y="0" width="200" height="200"  xlink:href="<?php  echo $cck->getValue('project_icon'); ?>" />
</g>

Действие было вызвано js:

var animations = $( $this ).find( 'animateTransform' );
animations[0].beginElement();
animations[1].beginElement();
animations[2].beginElement();

svg svg-animate
person Sergey Onishchenko    schedule 19.05.2014    source источник
comment
Добавьте атрибут animate=sum ко всем вашим animateTransforms. Я поставил это как ответ, но какой-то энергоемкий монитор удалил его.   -  person john ktejik    schedule 16.01.2015

Ответы (1)


arrow_upward
16
arrow_downward

У вас есть несколько ошибок в вашем скрипте:

начать = "неопределенный"

должно быть:

RepeatCount = "неопределенный"

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

Чтобы выполнить несколько преобразований, вам нужно суммировать результаты путем добавления (не нужно добавлять это к первому преобразованию)

добавка = "сумма"

Итак, ваш код должен выглядеть так:

<g>
   <animateTransform attributeName="transform" attributeType="XML"
       type="rotate" values="2 100 100;-1 100 100;1 100 100;-0.5 100 100;0.5 100 100" repeatCount="indefinite" dur="0.35s" fill="freeze" />

   <animateTransform attributeName="transform" attributeType="XML"
                      type="scale" values="1;1.2;1" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/>

   <animateTransform attributeName="transform" attributeType="XML"
                      type="translate" values="0 0;-100 -100;0 0" repeatCount="indefinite" dur="0.35s" fill="freeze" additive="sum"/>

   <image x="0" y="0" width="200" height="200"  xlink:href="<?php  echo $cck->getValue('project_icon'); ?>" />
</g>

Кстати, поворот изображения на 0,5 градуса незаметен, так зачем беспокоиться?!

здесь вы можете прочитать об этом подробнее: руководство по анимации SVG-SMIL

person CodeGems    schedule 06.07.2014