0

TweenMaxのドキュメントには、 の 2 番目のパラメーターは次のように記載されていますto()。

duration:Number — 秒単位の期間 (またはフレームベースのトゥイーンの場合はフレーム単位)

次のスニペットの意味がわかりません。

var PARAM = 1;

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

が 1 に設定されている場合PARAM、トゥイーンは期待どおりに機能します (要素の色がスムーズに変化します)。0 に設定すると、滑らかな遷移はありませんが、座標 500 ですぐに遷移します。

この例では、このパラメーターは秒単位の期間を意味するのではなく、フレームを意味していると思います。これは事実ですか？そして、それは正確にはどういう意味ですか？

4

1 に答える 1

0

これがあなたの質問の簡単な部分です。

duration: ピクセル単位のトゥイーンのスクロール時間 (0 は自動再生を意味します)

ただし、ピンを使用している場合、これは別のことを意味します

ピン内でトゥイーンが発生する時間枠と考えてください。10000 を入れることができますが、値はトゥイーンではなくピン ピクセルに基づいているため、ピンにトゥイーンが 1 つあるだけでは大きな違いはありません。複数のトゥイーンを 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 を簡単な参照として使用しましたが、簡単で汚い計算は次のとおりです。ウェイト 2 のトゥイーンが 5 つ、ウェイト 1 のトゥイーンが 1 つ、合計 11 です。このタイムラインを 110 ピクセルのピンに配置すると、最初の 5 つのトゥイーンはそれぞれ 20 ピクセルにわたって発生し、最後のトゥイーンは 10 ピクセルにわたって発生します。0 を入れると、効果は瞬時になります。数字を 200 と 100 対 2 と 1 にすることもできました。基本的には、この効果がいつ発生するか、スーパースクロール ラマでこの効果が発生する時間の長さの比率であるため、違いはありませんでした。

于 2013-10-23T20:28:26.860 に答える