我有以下GASP动画:
$(function () {
var tmax_options = {
repeat: -1
};
var tmax_tl = new TimelineMax(tmax_options),
tween_options_to = {
css: {
rotation: 360,
transformOrigin: 'center center'
},
ease: Cubic.Linear,
force3D: true
};
// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
tmax_tl.to($('svg > path'), 10, tween_options_to, 0)
.to($('svg > #XMLID_26_'), 5, tween_options_to, 0)
.to($('svg > #XMLID_23_'), 70, tween_options_to, 0)
.to($('svg > #XMLID_20_'), 65, tween_options_to, 0);
});
现在我想在上面的动画中发生的是最外面的多边形应该旋转(它们总共可以找到)。所有4应以不同的速度旋转,并应连续旋转而不停止。
截至目前,我的动画代码如下所示:
tmax_tl.to($('svg > path'), 10, tween_options_to, 0)
.to($('svg > #XMLID_26_'), 5, tween_options_to, 0)
.to($('svg > #XMLID_23_'), 70, tween_options_to, 0)
.to($('svg > #XMLID_20_'), 65, tween_options_to, 0);
正如您所看到的,持续时间不同:10,5,70,65
。现在最长的动画不会停止,但较短的动画会停止,然后在某个时刻重新开始。我怎么能阻止这个?即,如何制作动画,使所有圆圈的旋转连续不停?
答案 0 :(得分:5)
问题是,如果TimelineMax
对象中的所有动画都已停止,GSAP将仅重启循环。因此,每个档位需要一个TimelineMax
个物件:
$(() => {
const tweenOptions = {
css: {
rotation: 360,
transformOrigin: "center center"
},
ease: Linear.easeNone,
force3D: true
};
const timelines = [];
for (let i = 0; i < 4; ++i) {
timelines.push(new TimelineMax({
repeat: -1
}));
}
timelines[0].to($("svg > path"), 10, tweenOptions, 0);
timelines[1].to($("svg > #XMLID_26_"), 5, tweenOptions, 0)
timelines[2].to($("svg > #XMLID_23_"), 70, tweenOptions, 0)
timelines[3].to($("svg > #XMLID_20_"), 65, tweenOptions, 0);
});
此外,如果您希望动画的速度保持不变,请务必使用Linear.easeNone
。
您可以查看演示here。
答案 1 :(得分:4)
要获得连续性的视觉效果,请选择ease: Power0.easeNone,
。它只是旋转齿轮。
对于不同的速度,您应该设置4个不同的TweenMax
动画。每个齿轮一个。每个参数都应该是repeat:-1
。
$(function() {
var
tween_options_to = {
css: {
rotation: 360,
transformOrigin: 'center center'
},
ease: Power0.easeNone,
force3D: true,
repeat:-1
};
TweenMax.to($('svg path'), 2, tween_options_to, 0);
TweenMax.to($('svg > #XMLID_26_'), 10, tween_options_to, 0);
TweenMax.to($('svg > #XMLID_23_'), 7, tween_options_to, 0);
TweenMax.to($('svg > #XMLID_20_'), 4, tween_options_to, 0);
});
以下是一个工作示例:https://jsfiddle.net/gvczqhpo/4/
为什么 4个不同的TweenMax
&#39;
时间表是一个很好的时间表。想象一下,line
有一个起点和终点。它命令其中的元素在某个特定时间点以某种方式工作。
你想要完成的不是一系列事件,而是一个无限的动画。所以我认为,使用时间表在这里是多余的。只需使用4种不同的动画;)