SVG - Greensock动画时间轴

时间:2015-07-16 19:33:54

标签: javascript svg greensock tweenmax gsap

SVG additiveaccumulate动画属性的 GSAP 对应是什么?我正在使用点击事件制作动画,所以我想从对象的最后一个状态继续动画。或者有没有办法访问这些属性。

我刚刚开始,所以感谢指南或教程的任何链接。



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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我不确定我是否正确理解了您的问题,但this您尝试使用TweenMax重现的效果是什么?让我知道。

更新#1:

使用TimelineMax

  • 继续将新的TweenMax补间添加到现有timeline 实例使用TimelineMax。{/ li>的add()方法
  • 检查timeline当前是否处于播放状态,如果不是,play()

<强> jsFiddle #1

更新#2:

  • 提高timeline使用的速度 每次点击timeScale()
  • 在此timeScale()媒体资源上设置上限。
  • onComplete实例添加timeline回调,以clear() timeline

<强> jsFiddle #2