Greensock Timeline для SVG анимации

Question

Что такое GSAP аналогом additive и accumulate атрибутами анимации в SVG? Я анимация с использованием событий click, поэтому я хочу продолжить анимацию из последнего состояния объекта. Или есть способ получить доступ к этим атрибутам.

Я только начинаю, поэтому приветствуются любые ссылки на руководства или учебные пособия.

var svgNS = "http://www.w3.org/2000/svg"; 
 

 
function anim(evt) { 
 
    if (window.svgDocument == null) 
 
    svgDoc = evt.target.ownerDocument; 
 

 
    rot('shape', 120); 
 
} 
 

 
function rot(target_id, angle) { 
 
    var my_element = svgDoc.getElementById(target_id); 
 
    var a = svgDoc.createElementNS(svgNS, "animateTransform"); 
 

 
    var bb = my_element.getBBox(); 
 
    var cx = bb.x + bb.width/2; 
 
    var cy = bb.y + bb.height/2; 
 

 
    a.setAttributeNS(null, "attributeName", "transform"); 
 
    a.setAttributeNS(null, "attributeType", "XML"); 
 
    a.setAttributeNS(null, "type", "rotate"); 
 
    a.setAttributeNS(null, "dur", "1s"); 
 
    a.setAttributeNS(null, "repeatCount", "1"); 
 
    a.setAttributeNS(null, "fill", "freeze"); 
 
    a.setAttributeNS(null, "additive", "sum"); 
 
    a.setAttributeNS(null, "accumulate", "sum"); 
 
    a.setAttributeNS(null, "from", "0 " + cx + " " + cy); 
 
    a.setAttributeNS(null, "to", angle + " " + cx + " " + cy); 
 

 
    my_element.appendChild(a); 
 
    a.beginElement(); 
 
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"> 
 
    <g id="shape"> 
 
    <circle fill="#FFA557" stroke="#000000" stroke-miterlimit="10" cx="254.186" cy="247.288" r="107.203" /> 
 
    <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="239.634,218.5 225.083,193.5 239.634,168.5 
 
\t \t 268.736,168.5 283.288,193.5 268.736,218.5 \t " /> 
 
    <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="239.634,268.5 225.083,243.5 239.634,218.5 
 
\t \t 268.736,218.5 283.288,243.5 268.736,268.5 \t " /> 
 
    <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="195.634,243.5 181.083,218.5 195.634,193.5 
 
\t \t 224.737,193.5 239.288,218.5 224.737,243.5 \t " /> 
 
    <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="282.635,243.5 268.083,218.5 282.635,193.5 
 
\t \t 311.736,193.5 326.288,218.5 311.736,243.5 \t " /> 
 
    </g> 
 
    <g onclick="anim(evt)"> 
 
    <rect x="123.5" y="391.5" fill="#6E005D" stroke="#000000" stroke-miterlimit="10" width="268" height="77" /> 
 
    <text transform="matrix(1 0 0 1 184.0811 439.5081)" fill="#FFFFFF" font-family="'ComicSansMS'" font-size="36">Click Me</text> 
 
    </g> 
 
</svg>

Answer 1

Я не уверен, если я правильно понимаю ваш вопрос, но this вид эффекта, который вы пытаетесь воспроизвести с помощью TweenMax? Дай мне знать.

Обновление # 1:

Использование TimelineMax:

• Продолжайте добавлять новые TweenMax анимацию в существующий timeline например, с помощью метода add()TimelineMax.
• Проверьте, есть ли timeline в настоящее время в нормальном состоянии, если нет, play() it.

jsFiddle #1.

Update # 2:

• Increment скорость timeline с использованием timeScale() на основе за клик.
• Установите колпачок на этом timeScale().
• Добавить onComplete Обратный вызов timeline экземпляра clear()timeline.

jsFiddle #2.