[英]GSAP timeline animation
I am trying do clock animation using gsap. 我正在尝试使用gsap进行时钟动画。 the thing is that my actual script is not precise.
问题是我的实际脚本不精确。 What i need is:
我需要的是:
My actual solution not working because after some time its not stopping minute hand on 12 hour (probably its desynchronising itself because setInterval or setTimeout is not so accurate. 我的实际解决方案无法正常工作,因为过了一段时间,它在12个小时后仍未停止分针运转(可能是因为setInterval或setTimeout不太准确而使其自身不同步)。
How i can solve this with proper solution. 我如何才能通过适当的解决方案解决这个问题。 Maybe timeline inside timeline somehow?
也许时间轴内部的时间轴以某种方式?
Actual script: 实际脚本:
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();
Here's how I'd probably do it (there are many ways): 这是我可能的操作方式(有很多方法):
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();
Codepen: http://codepen.io/GreenSock/pen/GWqddB?editors=0010 Codepen: http ://codepen.io/GreenSock/pen/GWqddB?editors = 0010
Is that the effect you were after? 那是你所追求的效果吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.