這是如何完成瀏覽器中的輕量級動畫？

我看到許多網站都有自動加載動畫只要您向下滾動到與動畫網站的特定部分 - apple.com了吧，最近我發現它http://www.bugherd.com/features 這是如何完成瀏覽器中的輕量級動畫？

我看到了在網絡檢查器中加載的PNG數量，但我無法確定它如何完成。

2013-05-01 SWL

您可以鏈接到一個例子嗎？ – 2013-05-01 13:39:50

你能舉個例子嗎？不能在蘋果網站上找到它。 – 2013-05-01 13:40:46

bugherd是最好的例子。如果您向下滾動頁面，應用程序的演示開始播放。 jQuery Waypoint可能會在您滾動到點時觸發動畫 - 但我試圖確定動畫是如何完成的。這是所有獨立的PNG。 – SWL 2013-05-01 17:24:58

我不確定你在說什麼，但如果你指的是Apple在展示iPad時的動畫，那很容易做到。你所做的是將事件監聽器綁定到頁面/容器滾動事件。然後，通過比較它的頂部偏移量和滾動高度來檢查你的元素是否在視圖範圍內。如果它在視圖中，請調用一個函數來爲元素設置動畫。這可以通過動畫背景偏移量的單個圖像精靈或者實際的圖像序列甚至畫布來完成。

來源

2013-05-01 13:42:47

嗨安德烈，我的意思是上面那個URL上的bugherd的演示。如果您單擊「播放演示」，則會看到正在進行的互動，但它不是電影文件。 – SWL 2013-05-01 17:26:25

在該演示中，他們只是自己動畫元素。每一層都是html元素，他們只是使用絕對定位來移動它們。背景是靜態的，它們只有幾個可移動部件（鼠標，工具提示，彈出窗口，模態等）。如果您查看源代碼，您可以單獨查看每個圖層。即使在第一個動畫中的文本輸入框中，您也可以將其選爲普通頁面文本。 – 2013-05-02 13:27:31

謝謝 - 我有點辨別那個。但是，在JavaScript中計算動畫的位置在哪裏？在CSS中？這是我找不到的部分。 – SWL 2013-05-03 14:41:11

這是馬特（聯合創始人&設計師@ BugHerd）在這裏:)

真的很高興聽到你喜歡我們的功能頁面放在一起的動畫。爲了達到上述效果，我們使用了transit.js庫：http://ricostacruz.com/jquery.transit/

它使用與jQuery動畫相同的語法並使用動畫隊列。我把所有需要的圖像加載到一起，然後根據需要轉換，隱藏和顯示。

很高興回答您可能有關於如何在您自己的網站上執行此操作的任何其他問題。

乾杯！

來源

2013-05-30 00:30:33 mmilo

此外，蘋果網站上的動畫相當複雜，但有一個非常詳細的用於實現其效果的技術。這是遠遠超出我們正在BugHerd做什麼，雖然:)

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

來源

2013-05-30 00:44:42 mmilo

這是如何完成瀏覽器中的輕量級動畫？

回答

相關問題