0

TweenMax的文档指出，第二个参数to()是：

duration:Number — 以秒为单位的持续时间（或基于帧的补间以帧为单位）

我不明白这对以下代码段意味着什么：

var PARAM = 1;

superscrollorama_controller.addTween (
     200,
     TweenMax.to(element, PARAM, {backgroundColor: '#0033bb'}),
     300,
     0
);

如果PARAM设置为 1，则补间按预期工作（元素平滑地更改其颜色）。如果我将其设置为 0，则没有平滑过渡，而是在坐标 500 处立即过渡。

我猜在这个例子中这个参数并不意味着以秒为单位的持续时间，而是意味着帧。是这样吗？那究竟意味着什么？

4

1 回答 1

0

这是您问题的快速部分。

持续时间：以像素为单位的补间滚动持续时间（0 表示自动播放）

但是，如果您使用的是别针，这意味着一些不同的东西

将其视为在 pin 内进行补间的时间框架。您可以输入 10000 并且在引脚中仅使用一个补间不会有太大区别，因为该值基于引脚像素而不是您的补间。如果您使用 timeLineLite 为多个补间动画制作动画，则该数字相对于另一个。请参见下面的示例。

var timeLine1 = new TimelineLite({align: "sequence"})
    .append([TweenMax.to($('#display-platform-list .frame-1'), 2, {css:{display:'block'}})])
    .append([TweenMax.to($('#display-platform-list .frame-2'), 2, {css:{display:'block'}})])
    .append([TweenMax.to($('#display-platform-list .frame-3'), 2, {css:{display:'block'}})])
    .append([TweenMax.to($('#display-platform-list .frame-4'), 2, {css:{display:'block'}})])
    .append([TweenMax.to($('#display-platform-list .frame-5'), 2, {css:{display:'block'}})])
    .append([TweenMax.fromTo( $('#platform .callout'), 1, {css:{opacity: 1}}, {css:{opacity: 0}})]);

我使用 2 和 1 作为自己的简单参考，但这里是快速而肮脏的数学，我有 5 个权重 2 的补间和 1 个权重 1 的补间，总共 11 个。如果我把这个时间线放在一个 110 像素的图钉中那么前 5 个补间将发生在 20 个像素以上，最后一个补间发生在 10 个像素以上。如果我输入 0，那么效果是瞬时的。我本可以将数字 200 和 100 与 2 和 1 进行比较。不会有任何区别，因为它基本上是这种效果发生时间和这种效果在 superscrollorama 中发生多长时间的比率。

于 2013-10-23T20:28:26.860 回答