TimelineMax 中 fromTo 的奇怪行为

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);

我做了这个fiddle来解释： http://jsfiddle.net/avOff/xorkh2rj/

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

第一次播放动画就成功了。但是如果我尝试使用 tweenFromTo 函数第二次播放它（我使用 setTimeout 来模拟），我的对象的 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 (or integer) - Controls how (and if) other tweens of the same target are overwritten. There are several modes to choose from, but "auto" is the default ...

在 here 上阅读更多相关信息。

更新：

话虽如此，如果我要补间颜色值，我不会想要将补间相互重叠（即您的 '-=0.5' 位置参数基本上负责将其 .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()); });

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

TimelineMax 中 fromTo 的奇怪行为

Strange behaviour with fromTo in TimelineMax

javascript

gsap