我是TweenMax.js的新手，我在这里尝试为元素的不透明度和位置设置动画。我想让元素在0.5秒内显示，而元素的水平移动应在2秒内完成。
到目前为止，这是我已经完成的工作。
var tl = new TimelineMax();
tl.to('.elem', 2,{autoAlpha:1,x:0,ease:Power4.easeInOut});
我尝试过此代码，但是水平运动动画仅在不透明度动画之后开始
var tl = new TimelineMax();
tl.to('.elem', 2, {x:0,ease:Power4.easeInOut})
.to('.elem', 0.5, {autoAlpha:1});
如何通过修改现有代码使元素以不同的速度动画？
var tl = new TimelineMax();
var e = document.querySelectorAll('.text');
e.forEach(function(elem) {
elem.innerHTML = elem.innerHTML.replace(/\S/g, '<span class="elem">$&</span>');
})
tl.to('.elem', 3, {
autoAlpha: 1,
x: 0,
ease: Power4.easeInOut
});span {
display: inline-block;
font-size: 30px;
opacity: 0;
}
span:nth-child(1) {
transform: translateX(-15px);
}
span:nth-child(2) {
transform: translateX(-10px);
}
span:nth-child(3) {
transform: translateX(-5px);
}
span:nth-last-child(3) {
transform: translateX(5px);
}
span:nth-last-child(2) {
transform: translateX(10px);
}
span:nth-last-child(1) {
transform: translateX(15px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="text">Hello World</div>经过数小时的搜索，我终于找到了解决方案。
https://greensock.com/forums/topic/10133-how-can-i-run-multiple-tweens-in-parallel-in-a-timeline/
要使补间并行运行，您需要在时间轴的同一时间点插入补间。
通过位置参数控制将补间插入到时间线中的位置。在我的例子，我可以在同一时间作为第一吐温的第二次补间开始在0时加入它像这样
tl.to('.letter', 2,{autoAlpha:1,ease:Power4.easeInOut})
.to('.letter', 4, {x:0,ease:Power2.easeIn}, 0)
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句