结合Superscrollorama，TweenMax.to中第二个参数是什么意思？答案

【问题标题】：In combination with Superscrollorama, what is the meaning of the 2nd parameter in TweenMax.to?结合Superscrollorama，TweenMax.to中第二个参数是什么意思？
【发布时间】：2013-08-27 15:53:51
【问题描述】：

documentation for TweenMax 声明to() 的第二个参数是：

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

我不明白这对以下 sn-p 意味着什么：

var PARAM = 1;

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

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

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

【问题讨论】：

标签： javascript gsap superscrollorama

【解决方案1】：

这是您问题的快速部分。

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

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

将其视为在 pin 内进行补间的时间范围。您可以输入 10000 并且在 pin 中仅使用一个补间不会产生太大影响，因为该值基于 pin 像素而不是您的补间。如果您使用 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 中发生的时间的比率。

【讨论】：