javascript - GSAP 时间线动画

Question

我正在尝试使用 gsap 制作时钟动画。问题是我的实际脚本并不精确。我需要的是:

• 按下按钮
• 开始动画(整小时旋转)
• 然后再次按下按钮停止等待 2 秒并继续这样做
• 只需开始 -> 旋转 -> 停止(2 秒延迟)-> 重复

我的实际解决方案不起作用，因为一段时间后它不会在 12 小时停止分针(可能是它本身不同步，因为 setInterval 或 setTimeout 不太准确。

我如何用正确的解决方案解决这个问题。也许时间线以某种方式位于时间线内？

Link to CodePen

实际脚本:

var gsapClock = (function ($) {
var s;
return {
settings:      {
  $minuteHand: $('#minute-hand'),
  $hourHand:   $('#hour-hand'),
  $buttonTop:   $('#button-top')
},
init:function () {
  s = this.settings;
  this.bindUIActions();
},
bindUIActions: function () {

  var tl = new TimelineMax();
  function buttonPress(){
    TweenMax.to(s.$buttonTop, .1, {
      y: 4
    });
    TweenMax.to(s.$buttonTop, .1, {
      y: 0,
      delay: .1
    })
  }


  tl.add(
    TweenMax.to(s.$minuteHand, 2, {rotation: "360", repeat: -1, ease: Power0.easeNone, transformOrigin: '50% 100%'}),
    TweenMax.to(s.$hourHand, 48, {rotation: "360", repeat: -1, ease: Power0.easeNone, transformOrigin: '0% 50%'})
  );
  tl.pause();

  function animationControll() {
    buttonPress();
    tl.resume();
    setTimeout(function() {
      buttonPress();
      tl.pause();
    }, 2000);
  }

  animationControll();
  setInterval(function() {
    animationControll();
  }, 3500);
}
}
})(jQuery);

gsapClock.init();

Answer 1

我可能会这样做(有很多方法):

var gsapClock = (function ($) {
  var s;
  return {
    settings:      {
      $minuteHand: $('#minute-hand'),
      $hourHand:   $('#hour-hand'),
      $buttonTop:   $('#button-top')
    },
    init:function () {
      s = this.settings;
      this.bindUIActions();
    },
    bindUIActions: function () {

      var tl = new TimelineMax();

      //make it easier to play with the timing:
      var durations = {press:0.1, minute:2, hour:48, pause:2};

      //since we want to stop the hour hand motion each time the minute hand goes around, it's easiest to just put it in its own tween so we can pause()/resume(). This could easily be a timeline if you prefer. 
      var hour = TweenMax.to(s.$hourHand, durations.hour, {rotation: 360, repeat: -1, ease: Power0.easeNone, transformOrigin: '0% 50%'});

      //put the button press into its own repeating timeline
      var buttonPress = new TimelineMax({repeat:-1, repeatDelay:durations.minute - (durations.press * 2)});
      //when the button is fully depressed, pause the "hour" tween. We do a repeat:1, yoyo:true as a simple way to make the button return to its original position rather than using two tweens (down, then up)
      buttonPress.to(s.$buttonTop, durations.press, {y:4, repeat:1, yoyo:true, onRepeat:function() {hour.pause();}});

      //the 2nd time the button is depressed, resume() the hour timeline. 
      buttonPress.to(s.$buttonTop, durations.press, {y:4, repeat:1, yoyo:true, onRepeat:function() {hour.resume();}}, durations.pause);

      //main timeline - do the repeating minute hand animation that's repeated. Notice the repeatDelay is used for the appearance of pausing. 
      tl.to(s.$minuteHand, durations.minute, {rotation: "360", repeat: -1, repeatDelay:durations.pause, ease: Power0.easeNone, transformOrigin: '50% 100%'});

      //nest the buttonPress timeline at exactly the right spot.
      tl.add(buttonPress, durations.minute - durations.press);
    }
  }
})(jQuery);

gsapClock.init();

代码笔: http://codepen.io/GreenSock/pen/GWqddB?editors=0010

这就是你想要的效果吗？