GSAP SVG转换原因不良行为

时间:2017-06-09 16:47:38

标签: javascript svg transform greensock gsap

我试图让这个轨道从中心旋转(transfrom-origin:50%50%),但为什么它还在移动?

  // Show Premium
  function showPremuimPackage(el) {

 // if Premium is selected
  if(planetAdvance.hasClass('unselected') && planetEssential.hasClass('unselected')) {
    let tlArrange = new TimelineMax();

    tlArrange
    // move selected
    .to(premiumOrbit, .6,{transformOrigin:"center", rotation: '-50%', ease:Power1.easeOut})
    .to(planetPremium, .6,{rotation: 50,transformOrigin:"50% 50%", scale: '2', ease:Power1.easeOut},'-=1')
    // move unselected
      // Advanced
      .to(advanceOrbit, .6,{rotation: "50%", transformOrigin:"center", ease:Power1.easeOut},'-=.5')
//           .to(planetAdvance, .6,{scale: '.4.5', rotation: -50, 
transformOrigin:"50% 50%", ease:Power1.easeOut}, '-=.5')
//           // Essential
//           .to(essentialOrbit, .6,{rotation: '-50%', 
transformOrigin:"50% 50%", ease:Power1.easeOut},'-=.5')
//           .to(planetEssential, .6,{transformOrigin:"50% 50%", 
ease:Power1.easeOut},'-=.5')

    ;


  }
  }

https://codepen.io/G-ROS/pen/WOrMrb

为什么它不会在中间旋转。如果你继续点击其他行星就会弄得一团糟(需要取消注释才能看到它)。我需要做些什么来保持事物始终居中,而不是在旋转时四处走动。 非常感谢你们。

0 个答案:

没有答案