我不確定這是怎么回事。但是，這是一個(gè)故事。本文更多地是關(guān)于一個(gè)概念，該概念將幫助您以不同的方式思考動(dòng)畫(huà)。碰巧的是，這個(gè)特定的示例具有無(wú)限的滾動(dòng) - 特別是無(wú)需復(fù)制任何一個(gè)卡片的“完美”無(wú)限滾動(dòng)。

我為什么在這里？好吧，這一切都始于一條推文。一條推文讓我思考了布局和側(cè)滾動(dòng)內(nèi)容。

我接受了這個(gè)概念，并在我的網(wǎng)站上使用了它。而且它在寫(xiě)作時(shí)仍在行動(dòng)。

然后，我開(kāi)始考慮畫(huà)廊的觀點(diǎn)和側(cè)滾動(dòng)概念。我們跳上了一個(gè)直播，決定嘗試制作類(lèi)似舊的蘋(píng)果“覆蓋流”圖案之類(lèi)的東西。還記得嗎？

我對(duì)此做出的第一個(gè)想法，假設(shè)我會(huì)做到這一點(diǎn)，這樣就可以在沒(méi)有JavaScript的情況下使用，就像上面的演示中一樣，它使用“漸進(jìn)式增強(qiáng)”。我抓住了Greensock和Scrolltrigger，我們走了。我離開(kāi)了這項(xiàng)工作，這讓我失望了。我有一些東西，但不能完全滾動(dòng)滾動(dòng)以操作我想要的方式。 “下一個(gè)”和“以前”按鈕不想打球。您可以在這里看到它，并且需要水平滾動(dòng)。

因此，我在Greensock論壇上打開(kāi)了一個(gè)新線程。我?guī)缀醪恢牢乙_(kāi)放一些認(rèn)真的學(xué)習(xí)！我們用按鈕解決了問(wèn)題。但是，成為我，我不得不問(wèn)是否可能還有其他事情。有沒(méi)有一種“干凈”的方法來(lái)進(jìn)行無(wú)限的滾動(dòng)？我在溪流上嘗試了一些東西，但沒(méi)有運(yùn)氣。我很好奇。我嘗試了這支筆在Scrolltrigger版本中創(chuàng)建的類(lèi)似技術(shù)。

最初的答案是，要做有點(diǎn)棘手：

關(guān)于滾動(dòng)上無(wú)限事物的困難部分是，滾動(dòng)條是有限的，而您想要的效果不是。因此，您必須像此演示（在Scrolltrigger演示部分中找到）一樣循環(huán)滾動(dòng)位置，或直接掛在與卷軸相關(guān)的導(dǎo)航事件（例如車(chē)輪事件）中，而不是實(shí)際使用實(shí)際的滾動(dòng)位置。

我認(rèn)為就是這種情況，很高興將其“原樣”。幾天過(guò)去了，當(dāng)我開(kāi)始挖掘它時(shí)，杰克（Jack）放棄了我的想法。現(xiàn)在，經(jīng)過(guò)一大堆經(jīng)過(guò)，我在這里與您分享該技術(shù)。

動(dòng)畫(huà)任何東西

GSAP通常會(huì)忽略的一件事是，您幾乎可以用它來(lái)動(dòng)畫(huà)。這通常是因?yàn)橐曈X(jué)事物在思考動(dòng)畫(huà)時(shí)會(huì)想到什么 - 事物的實(shí)際身體運(yùn)動(dòng)。我們的第一個(gè)想法并不是要將該過(guò)程帶到元級(jí)別并從退后一步。

但是，考慮動(dòng)畫(huà)的工作，然后將其分解為層。例如，您玩動(dòng)畫(huà)片?？ㄍㄊ且幌盗凶髌?。每個(gè)構(gòu)圖都是場(chǎng)景。然后，您有能力擦洗與遙控器的構(gòu)圖集，無(wú)論是在YouTube上，使用電視遙控器還是其他任何內(nèi)容。正在發(fā)生的事情幾乎有三個(gè)層次。

這是我們創(chuàng)建不同類(lèi)型的無(wú)限循環(huán)所需的技巧。這是這里的主要概念。我們用時(shí)間軸為時(shí)間表的播放頭部位置動(dòng)畫(huà)。然后，我們可以用滾動(dòng)位置擦洗該時(shí)間表。

不用擔(dān)心這聽(tīng)起來(lái)令人困惑。我們將分解它。

去“元”

讓我們從一個(gè)示例開(kāi)始。我們將創(chuàng)建一個(gè)補(bǔ)間，將一些盒子從左到右移動(dòng)。這里是。

十箱不斷向右到右。 Greensock非常簡(jiǎn)單。在這里，我們使用“從圖”和重復(fù)來(lái)保持動(dòng)畫(huà)的運(yùn)行。但是，我們?cè)诿看蔚拈_(kāi)始時(shí)都有差距。我們還在使用同路大車(chē)來(lái)擺脫運(yùn)動(dòng)，這將在我們繼續(xù)時(shí)發(fā)揮重要作用。

 gsap.fromto（'。box'，{
  XPercent：100
}，{
  Xpercent：-200，
  交錯(cuò)：0.5，
  持續(xù)時(shí)間：1，
  重復(fù)：-1，
  輕松：'無(wú)'，
}））

現(xiàn)在是有趣的部分。讓我們暫停補(bǔ)間，并將其分配給變量。然后，讓我們創(chuàng)建一個(gè)播放它的補(bǔ)間。我們可以通過(guò)對(duì)補(bǔ)間的總時(shí)間進(jìn)行補(bǔ)充來(lái)做到這一點(diǎn)，這使我們可以在考慮重復(fù)和重復(fù)延遲的同時(shí)獲得或設(shè)置Tween的播放頭。

 const shift = gsap.fromto（'。box'，{
  XPercent：100
}，{
  暫停：是的，
  Xpercent：-200，
  交錯(cuò)：0.5，
  持續(xù)時(shí)間：1，
  重復(fù)：-1，
  輕松：'無(wú)'，
}））

固定持續(xù)時(shí)間= shift.duration（）

gsap.to（shift，{
  總時(shí)間：持續(xù)時(shí)間，
  重復(fù)：-1，
  持續(xù)時(shí)間：持續(xù)時(shí)間，
  輕松：'無(wú)'，
}））

這是我們的第一個(gè)“元”補(bǔ)間。它看起來(lái)完全相同，但我們正在添加另一個(gè)控制級(jí)別。我們可以在此層上更改內(nèi)容而不會(huì)影響原始層。例如，我們可以將補(bǔ)間更改為power4.in。這完全改變了動(dòng)畫(huà)，但不會(huì)影響基礎(chǔ)動(dòng)畫(huà)。我們有點(diǎn)以后備為保護(hù)自己。

不僅如此，我們可能會(huì)選擇僅重復(fù)時(shí)間表的某個(gè)部分。我們可以與另一個(gè)從這樣做的事情來(lái)做到這一點(diǎn)：

代碼將是這樣的。

 gsap.fromto（shift，{
  總時(shí)間：2，
}，{
  總時(shí)間：持續(xù)時(shí)間-1，
  重復(fù)：-1，
  持續(xù)時(shí)間：持續(xù)時(shí)間，
  輕松：'無(wú)'
}））

你看到這要去哪里了嗎？看那個(gè)補(bǔ)間。盡管它一直在循環(huán)，但每次重復(fù)的數(shù)字都會(huì)翻轉(zhuǎn)。但是，盒子處于正確的位置。

實(shí)現(xiàn)“完美”循環(huán)

如果我們回到原始示例，則每個(gè)重復(fù)之間存在明顯的差距。

這是訣竅。解鎖一切的部分。我們需要建立一個(gè)完美的循環(huán)。

讓我們從重復(fù)三次轉(zhuǎn)移開(kāi)始。它等于使用重復(fù)：3。請(qǐng)注意，我們?nèi)绾蝿h除重復(fù)：-1。

 const getShift =（）=> gsap.fromto（'。box'，{
  XPercent：100
}，{
  Xpercent：-200，
  交錯(cuò)：0.5，
  持續(xù)時(shí)間：1，
  輕松：'無(wú)'，
}））

const loop = gsap.timeline（）
  .add（getShift（））
  .add（getShift（））
  .add（getShift（））

我們將最初的補(bǔ)間變成了返回補(bǔ)間的函數(shù)，然后將其添加到新的時(shí)間軸中。這給了我們以下內(nèi)容。

好的。但是，仍然存在差距?，F(xiàn)在，我們可以提出添加和定位這些二聚體的位置參數(shù)。我們希望它是無(wú)縫的。這意味著在前一個(gè)結(jié)束之前插入每組兩組。這是基于交錯(cuò)和元素?cái)?shù)量的價(jià)值。

常量性交錯(cuò)= 0.5 //在我們的轉(zhuǎn)移之間使用
const box = gsap.utils.toarray（'。box'）
const loop = gsap.timeline（{{
  重復(fù)：-1
}））
  .add（getShift（），0）
  .add（getShift（），boxes.length * stagger）
  .add（getShift（），boxes.length * stagger * 2）

如果我們更新時(shí)間表以重復(fù)并觀看（同時(shí)調(diào)整交錯(cuò)以查看它如何影響事物）…

您會(huì)注意到中間有SA窗口會(huì)產(chǎn)生一個(gè)“無(wú)縫”循環(huán)?；叵肫鹞覀儾倏v時(shí)間的早期技能嗎？這就是我們?cè)谶@里需要做的：循環(huán)循環(huán)“無(wú)縫”的時(shí)間窗口。

我們可以嘗試通過(guò)循環(huán)的那個(gè)窗口對(duì)總時(shí)間進(jìn)行補(bǔ)充。

 const loop = gsap.timeline（{{
  暫停：是的，
  重復(fù)：-1，
}））
.add（getShift（），0）
.add（getShift（），boxes.length * stagger）
.add（getShift（），boxes.length * stagger * 2）

gsap.fromto（loop，{
  總時(shí)間：4.75，
}，，
{
  總時(shí)間：'= 5'，
  持續(xù)時(shí)間：10，
  輕松：'無(wú)'，
  重復(fù)：-1，
}））

在這里，我們說(shuō)的是總時(shí)間為4.75，并將周期的長(zhǎng)度添加到此。一個(gè)周期的長(zhǎng)度為5。這是時(shí)間軸的中間窗口。我們可以使用GSAP的nifty =做到這一點(diǎn)，這給了我們這一點(diǎn)：

花點(diǎn)時(shí)間消化那里發(fā)生的事情。這可能是將您的頭纏住的最棘手的部分。我們正在計(jì)算時(shí)間表的時(shí)間窗口。很難可視化，但我已經(jīng)走了。

這是一款手表的演示，只有12秒鐘的手走一次。它是無(wú)限地循環(huán)的，重復(fù)：-1，然后我們使用從給定持續(xù)時(shí)間的特定時(shí)間窗口進(jìn)行動(dòng)畫(huà)。如果您減少說(shuō)2和6??的時(shí)間窗口，然后將持續(xù)時(shí)間更改為1，雙手重復(fù)時(shí)將從2點(diǎn)鐘到6點(diǎn)。但是，我們從未改變過(guò)基本動(dòng)畫(huà)。

嘗試配置值以查看其如何影響事物。

在這一點(diǎn)上，最好為我們的窗戶位置建立一個(gè)公式。我們還可以在每個(gè)盒子過(guò)渡的持續(xù)時(shí)間內(nèi)使用變量。

固定持續(xù)時(shí)間= 1
const cycle_duration = boxes.length *交錯(cuò)
const start_time = cycle_duration（持續(xù)時(shí)間 * 0.5）
const end_time = start_time cycle_duration

我們可以在三倍的元素上循環(huán)循環(huán)，而不是使用三個(gè)堆疊的時(shí)間表，在那里我們獲得了不需要計(jì)算位置的好處。不過(guò)，將其視為三個(gè)堆疊的時(shí)間表是一種巧妙的方式，可以理解這一概念，這是一種很好的方法。

讓我們更改我們的實(shí)現(xiàn)，從一開(kāi)始就創(chuàng)建一個(gè)重要的時(shí)間表。

恒量交錯(cuò)= 0.5
const box = gsap.utils.toarray（'。box'）

const loop = gsap.timeline（{{
  暫停：是的，
  重復(fù)：-1，
}））

const shifts = [...盒子，...盒子，...盒子]

shifts.foreach（（框，索引）=> {
  loop.fromto（box，{
    XPercent：100
  }，{
    Xpercent：-200，
    持續(xù)時(shí)間：1，
    輕松：'無(wú)'，
  }，索引 *交錯(cuò)）
}））

這更容易組合在一起，并為我們提供相同的窗口。但是，我們不需要考慮數(shù)學(xué)?，F(xiàn)在，我們循環(huán)瀏覽三組盒子，并根據(jù)交錯(cuò)定位每個(gè)動(dòng)畫(huà)。

如果我們調(diào)整交錯(cuò)，那看起來(lái)會(huì)怎樣？它會(huì)將盒子擠在一起。

但是，它破了窗口，因?yàn)楝F(xiàn)在總時(shí)間已經(jīng)過(guò)去了。我們需要重新計(jì)算窗口?，F(xiàn)在是插入我們之前計(jì)算出的公式的好時(shí)機(jī)。

固定持續(xù)時(shí)間= 1
const cycle_duration =交錯(cuò) * boxes.length
const start_time = cycle_duration（持續(xù)時(shí)間 * 0.5）
const end_time = start_time cycle_duration

gsap.fromto（loop，{
  總時(shí)間：start_time，
}，，
{
  總時(shí)間：end_time，
  持續(xù)時(shí)間：10，
  輕松：'無(wú)'，
  重復(fù)：-1，
}））

固定的！

如果我們想更改起始位置，我們甚至可以引入“偏移”。

恒量交錯(cuò)= 0.5
const偏移= 5 *交錯(cuò)
const start_time =（Cycle_duration（差異 * 0.5））偏移

現(xiàn)在，我們的窗口從不同的位置開(kāi)始。

但是，這并不是很棒，因?yàn)樗趦啥硕冀o了我們這些尷尬的堆棧。為了擺脫這種效果，我們需要考慮一個(gè)框的“物理”窗口?；蚩紤]他們?nèi)绾芜M(jìn)入和退出現(xiàn)場(chǎng)。

我們將使用Document.Body作為我們的示例的窗口。讓我們更新框，以作為單個(gè)時(shí)間表，盒子在Enter上和退出時(shí)向下擴(kuò)展。我們可以使用Yoyo并重復(fù)：1進(jìn)入進(jìn)入和退出。

 shifts.foreach（（框，索引）=> {
  const box_tl = gsap
    .timeline（）
    .fromto（
      盒子，
      {
        Xpercent：100，
      }，，
      {
        Xpercent：-200，
        持續(xù)時(shí)間：1，
        輕松：'無(wú)'，
      }，0
    ）
    .fromto（
      盒子，
      {
        比例：0，
      }，，
      {
        比例：1，
        重復(fù)：1，
        Yoyo：是的，
        輕松：'無(wú)'，
        持續(xù)時(shí)間：0.5，
      }，，
      0
    ）
  loop.Add（box_tl，索引 *交錯(cuò)）
}））

為什么我們使用時(shí)間軸持續(xù)時(shí)間為1？它使事情更容易遵循。我們知道盒子位于中點(diǎn)時(shí)的時(shí)間為0.5。值得注意的是，放松將沒(méi)有我們通常在這里想到的效果。實(shí)際上，放松實(shí)際上將在盒子的定位方式中發(fā)揮作用。例如，一個(gè)輕松的插件會(huì)在右邊的盒子上束縛，然后再移動(dòng)。

上面的代碼為我們提供了。

幾乎。但是，我們的盒子在中間消失了一段時(shí)間。為了解決此問(wèn)題，讓我們介紹即時(shí)屬性。它的作用類(lèi)似于Animation-Fill模式：CSS中無(wú)。我們告訴GSAP，我們不想保留或預(yù)記錄任何盒子上的任何樣式。

 shifts.foreach（（框，索引）=> {
  const box_tl = gsap
    .timeline（）
    .fromto（
      盒子，
      {
        Xpercent：100，
      }，，
      {
        Xpercent：-200，
        持續(xù)時(shí)間：1，
        輕松：'無(wú)'，
        直系程序：false，
      }，0
    ）
    .fromto（
      盒子，
      {
        比例：0，
      }，，
      {
        比例：1，
        重復(fù)：1，
        zindex：boxes.length 1，
        Yoyo：是的，
        輕松：'無(wú)'，
        持續(xù)時(shí)間：0.5，
        直系程序：false，
      }，，
      0
    ）
  loop.Add（box_tl，索引 *交錯(cuò)）
}））

那個(gè)小的變化為我們解決了！請(qǐng)注意我們還如何包括z index：boxes.length。這應(yīng)該保護(hù)我們免受任何z指數(shù)問(wèn)題。

我們有它！我們的第一個(gè)無(wú)縫無(wú)縫循環(huán)。沒(méi)有重復(fù)的元素和完美的延續(xù)。我們正在彎曲時(shí)間！如果您走了這么遠(yuǎn)，請(qǐng)輕拍自己的后背！ ？

如果我們想一次看到更多的盒子，我們可以修補(bǔ)時(shí)機(jī)，交錯(cuò)和輕松。在這里，我們的交錯(cuò)為0.2，我們還將不透明度引入了混合。

這里的關(guān)鍵部分是我們可以利用retoperdelay，以便不透明度過(guò)渡比刻度更快。在0.25秒內(nèi)褪色。等待0.5秒。淡出0.25秒以上。

 .fromto（
  盒子， {
    不透明度：0，
  }，{
    不透明度：1，
    持續(xù)時(shí)間：0.25，
    重復(fù)：1，
    repoydelay：0.5，
    直系程序：false，
    輕松：'無(wú)'，
    Yoyo：是的，
  }，0）

涼爽的！我們可以對(duì)那些進(jìn)出過(guò)渡的人做任何想做的事情。這里的主要內(nèi)容是，我們有時(shí)間窗口為我們提供無(wú)限的循環(huán)。

將其連接到滾動(dòng)

現(xiàn)在我們有了一個(gè)無(wú)縫的循環(huán)，讓我們將其連接到滾動(dòng)中。為此，我們可以使用GSAP的Scrolltrigger。這需要額外的補(bǔ)間來(lái)擦洗我們的循環(huán)窗口。請(qǐng)注意，我們現(xiàn)在也設(shè)置了現(xiàn)在要暫停的循環(huán)。

 const loop_head = gsap.fromto（loop，{
  總時(shí)間：start_time，
}，，
{
  總時(shí)間：end_time，
  持續(xù)時(shí)間：10，
  輕松：'無(wú)'，
  重復(fù)：-1，
  暫停：是的，
}））

const scrub = gsap.to（loop_head，{
  總時(shí)間：0，
  暫停：是的，
  持續(xù)時(shí)間：1，
  輕松：'無(wú)'，
}））

這里的訣竅是使用Scrolltrigger通過(guò)更新擦洗的總時(shí)間來(lái)擦洗循環(huán)的播放頭。我們可以通過(guò)多種方式來(lái)設(shè)置此滾動(dòng)。我們可以水平或綁定到容器。但是，我們要做的就是將盒子包裹在.boxes元素中，然后將其固定在視口上。 （這可以修復(fù)其在視口上的位置。）我們還將堅(jiān)持垂直滾動(dòng)。檢查演示以查看.box的樣式，以將事物設(shè)置為視口的大小。

從'https://cdn.skypack.dev/gsap/scrolltrigger'導(dǎo)入scrolltrigger'
gsap.registerplugin（scrolltrigger）

scrolltrigger.create（{{
  開(kāi)始：0，
  結(jié)束：'= 2000'，
  水平：錯(cuò)誤，
  PIN：'.boxes'，
  onupdate：self => {
    scrub.vars.totaltime = loop_head.duration（） * self.progress
    scrub.invalidate（）。restart（）
  }
}））

重要的部分是在update內(nèi)部。那就是我們根據(jù)滾動(dòng)進(jìn)度設(shè)置補(bǔ)間的總時(shí)間。無(wú)效的呼叫將沖洗磨砂膏的任何內(nèi)部記錄的位置。然后，重新啟動(dòng)將位置設(shè)置為我們?cè)O(shè)置的新總時(shí)間。

嘗試一下！我們可以在時(shí)間軸中來(lái)回來(lái)回更新位置。

那有多酷？我們可以滾動(dòng)以擦洗一個(gè)時(shí)間表，該時(shí)間表擦洗時(shí)間線，該時(shí)間表是時(shí)間表的窗口。消化一秒鐘，因?yàn)槟鞘沁@里發(fā)生的事情。

無(wú)限滾動(dòng)時(shí)間旅行

到目前為止，我們一直在操縱時(shí)間?，F(xiàn)在我們要去旅行！

為此，我們將使用其他一些GSAP實(shí)用程序，并且我們將不再擦洗LOOP_HEAD的總時(shí)間。相反，我們將通過(guò)代理進(jìn)行更新。這是進(jìn)行“ meta” GSAP的另一個(gè)很好的例子。

讓我們從標(biāo)記播放頭位置的代理對(duì)象開(kāi)始。

 const playhead = {位置：0}

現(xiàn)在，我們可以更新磨砂膏以更新位置。同時(shí)，我們可以使用GSAP的包裝實(shí)用程序，該實(shí)用程序?qū)⑽恢弥蛋贚oop_head持續(xù)時(shí)間周?chē)?。例如，如果持續(xù)時(shí)間為10，并且我們提供值11，我們將返回1。

 const position_wrap = gsap.utils.wrap（0，loop_head.duration（））

const scrub = gsap.to（playhead，{
  位置：0，
  onupdate ：（）=> {
    loop_head.totaltime（position_wrap（playhead.position））
  }，，
  暫停：是的，
  持續(xù)時(shí)間：1，
  輕松：'無(wú)'，
}））

最后但并非最不重要的一點(diǎn)是，我們需要修改Scrolltrigger，以便更新磨砂膏上的正確變量。那是位置，而不是總時(shí)間。

 scrolltrigger.create（{{
  開(kāi)始：0，
  結(jié)束：'= 2000'，
  水平：錯(cuò)誤，
  PIN：'.boxes'，
  onupdate：self => {
    scrub.vars.position = loop_head.duration（） * self.progress
    scrub.invalidate（）。restart（）
  }
}））

在這一點(diǎn)上，我們已經(jīng)轉(zhuǎn)到了代理，我們看不到任何更改。

滾動(dòng)時(shí)，我們想要無(wú)限的循環(huán)。我們的第一個(gè)想法可能是當(dāng)我們完成滾動(dòng)進(jìn)度時(shí)滾動(dòng)開(kāi)始。這將做到這一點(diǎn)，向后滾動(dòng)。盡管這就是我們想做的，但我們不希望播放頭向后擦洗。這是總時(shí)間到來(lái)的地方。還記得嗎？它根據(jù)總體策略獲得或設(shè)置播放頭的位置，其中包括任何重復(fù)和重復(fù)延遲。

例如，假設(shè)循環(huán)頭的持續(xù)時(shí)間為5，我們到達(dá)那里，我們不會(huì)擦洗0。相反，我們將繼續(xù)將循環(huán)頭擦洗至10。如果我們繼續(xù)前進(jìn)，它將達(dá)到15，等等。同時(shí)，我們將跟蹤迭代變量，因?yàn)檫@告訴我們我們?cè)谀ド案嘀械奈恢谩Ｎ覀冞€將確保只有在達(dá)到進(jìn)度閾值時(shí)才更新迭代。

讓我們從迭代變量開(kāi)始：

讓迭代= 0

現(xiàn)在，讓我們更新我們的Scrolltrigger實(shí)現(xiàn)：

 const trigger = scrolltrigger.create（{{
  開(kāi)始：0，
  結(jié)束：'= 2000'，
  水平：錯(cuò)誤，
  PIN：'.boxes'，
  onupdate：self => {
    const scroll = self.scroll（）
    如果（滾動(dòng)> self.end -end -1）{
      //及時(shí)前進(jìn)
      包裹（1，1）
    } else if（scroll <p>請(qǐng)注意，我們現(xiàn)在如何將迭代考慮到位置計(jì)算中。請(qǐng)記住，這與洗滌器包裹在一起。我們還檢測(cè)到何時(shí)達(dá)到滾動(dòng)的極限，這就是我們包裝的重點(diǎn)。此功能設(shè)置適當(dāng)?shù)牡挡⒃O(shè)置新的滾動(dòng)位置。</p><pre rel="JavaScript" data-line=""> const wrap =（iterationdelta，scrollto）=> {
  迭代= iterationdelta
  trigger.scroll（scrollto）
  trigger.update（）
}

我們有無(wú)限的滾動(dòng)！如果您有一只帶有滾動(dòng)輪的花哨的老鼠，您可以放松一下，那就去吧！很有趣！

這是一個(gè)顯示當(dāng)前迭代和進(jìn)度的演示：

滾動(dòng)折斷

我們?cè)谀抢?。但是，在使用這樣的功能時(shí)，總會(huì)有“很高興的人”。讓我們從滾動(dòng)扣子開(kāi)始。 GSAP使它變得容易，因?yàn)槲覀兛梢允褂胓sap.utils.snap而無(wú)需任何其他依賴(lài)。這樣可以處理捕捉到我們提供點(diǎn)的時(shí)間。我們聲明了0和1之間的步驟，并且在示例中有10個(gè)盒子。這意味著快照為0.1對(duì)我們有用。

 const snap = gsap.utils.snap（1 / boxes.length）

這返回了我們可以使用的函數(shù)來(lái)捕捉我們的位置值。

卷軸結(jié)束后，我們只想捕捉。為此，我們可以在Scrolltrigger上使用事件偵聽(tīng)器。滾動(dòng)結(jié)束時(shí)，我們將滾動(dòng)到某個(gè)位置。

 scrolltrigger.addeventlistener（'scrollend'，（）=> {
  卷軸（scrub.vars.position）
}））

這是卷軸的：

 const scrollToposition = posity => {
  const snap_pos = snap（位置）
  const進(jìn)度=
    （snap_pos -loop_head.duration（） *迭代） / loop_head.duration（）
  const scroll = progressToscroll（progress）
  觸發(fā)器（滾動(dòng)）
}

我們?cè)谶@里做什么？

1. 計(jì)算時(shí)間點(diǎn)以下點(diǎn)
2. 計(jì)算當(dāng)前進(jìn)度。假設(shè)loop_head.duration（）為1，我們已捕獲到2.5。這使我們的進(jìn)度為0.5，導(dǎo)致迭代為2，其中2.5-1 * 2/1 ==== 0.5。我們計(jì)算進(jìn)度，以便始終在1到0之間。
3. 計(jì)算滾動(dòng)目的地。這是我們的Scrolltrigger可以覆蓋的距離的一小部分。在我們的示例中，我們?cè)O(shè)定了2000年的距離，我們想要其中的一小部分。我們創(chuàng)建一個(gè)新的函數(shù)progressToscroll來(lái)計(jì)算它。

 const progressTosCroll = progress =>
  gsap.utils.clamp（1，trigger.end -1，gsap.utils.wrap（0，1，progress） * trigger.end）

此功能采用進(jìn)度值并將其映射到最大的滾動(dòng)距離。但是我們使用夾具來(lái)確保該值永遠(yuǎn)不會(huì)為0或2000。這很重要。我們正在維護(hù)對(duì)這些價(jià)值觀的捕捉，因?yàn)檫@將使我們陷入無(wú)限的循環(huán)。

那里有一點(diǎn)要接。查看此演示，該演示顯示了每個(gè)快照上的更新值。

為什么事情變得更加挑剔？擦洗持續(xù)時(shí)間和輕松已改變。較小的持續(xù)時(shí)間和強(qiáng)力輕松使我們的快照。

 const scrub = gsap.to（playhead，{
  位置：0，
  onupdate ：（）=> {
    loop_head.totaltime（position_wrap（playhead.position））
  }，，
  暫停：是的，
  持續(xù)時(shí)間：0.25，
  輕松：'power3'，
}））

但是，如果您玩了該演示，您會(huì)注意到存在問(wèn)題。有時(shí)，當(dāng)我們?cè)诳煺罩邪鼤r(shí)，播放頭會(huì)跳動(dòng)。我們需要通過(guò)確保在捕捉時(shí)包裝來(lái)解決這個(gè)問(wèn)題 - 但是，只有在必要時(shí)才。

 const scrollToposition = posity => {
  const snap_pos = snap（位置）
  const進(jìn)度=
    （snap_pos -loop_head.duration（） *迭代） / loop_head.duration（）
  const scroll = progressToscroll（progress）
  if（progress> = 1 ||進(jìn)度<p>現(xiàn)在，我們有無(wú)限滾動(dòng)的滾動(dòng)！</p><h3>接下來(lái)是什么？</h3><p>我們已經(jīng)完成了實(shí)心無(wú)限滾動(dòng)器的基礎(chǔ)。我們可以利用它來(lái)添加內(nèi)容，例如控件或鍵盤(pán)功能。例如，這可能是一種連接“下一個(gè)”和“以前”按鈕和鍵盤(pán)控件的方法。我們要做的就是操縱時(shí)間，對(duì)嗎？</p><pre rel="JavaScript" data-line=""> const next =（）=> scrollToposition（scrub.vars.position-（1 / boxes.length））
const prev =（）=> scrollToposition（scrub.vars.position（1 / boxes.length））

//左右箭頭加A和D
document.addeventlistener（'keydown'，event => {
  if（event.keycode === 37 || event.keycode === 65）next（）
  if（event.keycode === 39 || event.keycode === 68）prev（）
}））

document.queryselector（'。next'）。addeventListener（'click'sext）
document.queryselector（'。prev'）。addeventListener（'click'prev）

那可以給我們這樣的東西。

我們可以利用我們的卷軸函數(shù)并根據(jù)需要顛簸價(jià)值。

就是這樣！

看到嗎？ GSAP比元素更具動(dòng)畫(huà)作用！在這里，我們彎腰并操縱時(shí)間來(lái)創(chuàng)建一個(gè)幾乎完美的無(wú)限滑塊。沒(méi)有重復(fù)的元素，沒(méi)有混亂和良好的靈活性。

讓我們回顧一下我們涵蓋的內(nèi)容：

• 我們可以動(dòng)畫(huà)動(dòng)畫(huà)。 ？
• 當(dāng)我們操縱時(shí)間時(shí)，我們可以將時(shí)機(jī)作為定位工具。
• 如何使用Scrolltrigger通過(guò)代理擦洗動(dòng)畫(huà)。
• 如何使用GSAP的一些很棒的實(shí)用程序來(lái)處理我們的邏輯。

您現(xiàn)在可以操縱時(shí)間！ ？

進(jìn)行“ meta” GSAP的概念開(kāi)辟了各種可能性。你還能動(dòng)畫(huà)嗎？聲音的？視頻？至于“封面流”演示，這是去的地方！

以上是進(jìn)行' meta gsap”：尋求'完美”無(wú)限滾動(dòng)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！