SVG-动画的Greensock时间轴

Question

What is the GSAP counterpart of the additive and accumulate animation attributes in SVG ? I am animating using click events so I want to continue animation from the last state of the object. Or is there a way to access those attributes.

I am just starting out, so any links to guides or tutorials is appreciated.

 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 268.736,168.5 283.288,193.5 268.736,218.5 " /> <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="239.634,268.5 225.083,243.5 239.634,218.5 268.736,218.5 283.288,243.5 268.736,268.5 " /> <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="195.634,243.5 181.083,218.5 195.634,193.5 224.737,193.5 239.288,218.5 224.737,243.5 " /> <polygon fill="#8CFFD5" stroke="#000000" stroke-miterlimit="10" points="282.635,243.5 268.083,218.5 282.635,193.5 311.736,193.5 326.288,218.5 311.736,243.5 " /> </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

I am not sure if I understand your question correctly but is this the kind of effect you are trying to reproduce using TweenMax ? Let me know.

Update #1:

Using TimelineMax :

• Keep adding new TweenMax tweens into an existing timeline instance by using the add() method of TimelineMax .
• Check to see if timeline is currently in a playing state, if not, play() it.

jsFiddle #1 .

Update #2:

• Increment the speed of timeline using timeScale() on a per-click basis.
• Set a cap on this timeScale() property.
• Add an onComplete callback to the timeline instance to clear() the timeline .

jsFiddle #2 .