Question

对新项目使用 TimelineMax ，我面临一种奇怪的行为。

var tl = new TimelineMax({ paused: true });
tl.add('step0')
  .fromTo('#colorize', 2, { color: '#ff0000' }, { color: '#00ff00' }, 'step0')
  .to('#colorize', 0.5, { color: '#f0f0f0' }, '-=0.5')
  .add('step1');

setTimeout(function() { tl.tweenFromTo('step0', 'step1'); }, 1000);
setTimeout(function() { tl.tweenFromTo('step0', 'step1'); }, 4000);

我让这个小小的小提琴解释： http://jsfiddle.net/avOff/xorkh2rj/

文本首先应为红色（在fromTo中初始化），然后补间为绿色，最后为灰色且重叠为0.5秒。

我第一次播放动画时有效。但是，如果我尝试使用setTimeout函数再次播放它（我使用tweenFromTo模拟），我的对象的from状态不受尊重，它不会初始化为红色在走向绿色和灰色之前。

如果我删除了时间轴的to块，则按预期工作。我错过了什么吗？

感谢您的帮助。

Answer 1

为您找到解决方案， overwrite 是神奇的：）

请看下面的代码段：

var tl = new TimelineMax({ paused: true });
tl.add('step0')
  .fromTo('#colorize', 2, { color: '#ff0000' }, { color: '#00ff00', overwrite: 0 }, 'step0')
  .to('#colorize', 0.5, { color: '#f0f0f0', overwrite: 0 }, '-=0.5')
  .add('step1');

TweenMax.delayedCall(1, function () { tl.tweenFromTo('step0', 'step1'); });
TweenMax.delayedCall(4, function () { tl.tweenFromTo('step0', 'step1'); });

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
<p id="colorize">Test color paragraph</p>

来自文档：

overwrite：String（或整数） - 控制如何（以及如果）覆盖同一目标的其他补间。有几种模式可供选择，但“auto”是默认模式......

在 here 上了解详情。

<强>更新

尽管如此，如果我补间颜色值，我会不想要将补间重叠在一起（即你的'-=0.5'位置参数基本上负责重叠它的{{} 1}}补间到之前的.to()补间动画，我只想让它们一个接一个地动画。

以下是一个示例摘录：

.fromTo()

var element = document.getElementById('colorize');
var tl = new TimelineMax({ paused: true });
tl.set('#colorize', { backgroundColor: '#cc0' });
tl.to(element, 2, { backgroundColor: '#0cc' });
tl.to(element, 0.5, { backgroundColor: '#ccc' });
TweenMax.delayedCall(1, function () { tl.tweenFromTo(0, tl.totalDuration()); });
TweenMax.delayedCall(4, function () { tl.tweenFromTo(0, tl.totalDuration()); });

使用fromTo在TimelineMax

1 个答案: