GSAP動畫未能插值CSS3轉換

Question

我正在通過GSAP庫將所有CSS3動畫轉換為javascript動畫。

不幸的是，我在使CSS3轉換正常工作方面遇到了一些麻煩。

我有一堆圖像放置在整個用戶屏幕上。 它們最初是隱藏的。 當所有圖像都完全加載后，將對其進行動畫處理以從屏幕外垂直移動到其最終靜止位置。

img {
    /* Other styles for size, position, etc. */
    ...
    transform: perspective(400px) rotateX(50deg) rotateY(-5deg) rotateZ(30deg);
    ...
}

還有一些javascript：

var _timeline = new TimelineMax(),
    _animation = {
        'transform' : 'translateY(' + offset + 'px)',
        'ease' : Power2.easeInOut
    };

所有圖像都排隊到時間線中以進行連續動畫。

_timeline.from('#someElement', 1, _animation, 0);

我使用.from()函數，因為元素的最終樣式已經存在於CSS中。 我只需要最初將它們放在屏幕外並向下移動即可。

這是直接從GSAP文檔獲取的功能描述：

用於創建向后補間的TweenMax實例的靜態方法-您定義BEGINNING值，並且將當前值用作目標值，這非常適合執行諸如將對象動畫到屏幕上的操作，因為您可以按照所需的方式進行初始設置查看補間的結尾，然后從其他位置進行動畫處理。

我的理解是，GSAP將采用您提供的初始狀態並對元素進行動畫處理，直到它與CSS中所述完全相同為止。

但是，我根本無法讓GSAP在此初始狀態和最終狀態之間進行插值（完成3D轉換）。 我已經嘗試了許多不同的變化（例如，將缺少的變換添加到動畫代碼中或使用clearProps / force3D / etc），但是GSAP給我的最終結果沒有正確變換。

換句話說，如果我不運行任何動畫，那么我的元素看起來是正確的-它已經按照透視圖旋轉了-但是動畫版本最終錯誤。

我對GSAP還是很陌生，所以我確定我只是缺少一些東西。

有人能指出我正確的方向嗎？

謝謝！

Answer 1

GSAP正在插值到（未定義的）值（從中），因此它的行為就像是零。 隨着透視圖越來越接近零，它看起來越來越強（顯然不是您想要的），當它達到零時，瀏覽器會完全不同地對待它，幾乎就像它是無窮大一樣。 因此，在您的情況下，您可以簡單地在“ from”值中定義一個透視圖，這樣它就不會默認為零，例如：

{transform: "translateY(400px) perspective(2000px)"}

GSAP中轉換的提示： GSAP最重要的優勢之一就是它處理轉換的方式。 為了使它們直觀，高效且一致，已經付出了很多努力。 為了最大化收益，我強烈建議您對轉換組件（例如x，y，z，rotation，rotationX，rotationY，scaleX，scaleY，skewX，skewY等）使用GSAP的本機屬性，而不要使用像在CSS中一樣，使用通用的“轉換”字符串，因為：

• 它們解析起來要快得多。 定義“轉換”字符串時，必須將其傳遞給瀏覽器，並解釋為具有某些固有局限性的matrix（）或matrix3d（）（而且整個過程需要更長的時間）。
• 您可以更好地控制每個組件。 例如，如果您的元素已經旋轉，縮放和平移，之后又想將其向右移動200px，則只需說x：“ + = 200”，而不必在所有旋轉中都定義一個冗長的字符串/ scale / translation值包括在內。
• 由於GSAP緩存了本機分量，因此它們在超過360度的旋轉值時更加准確，因此它們始終是精確的，而變換字符串流經矩陣，該矩陣在特定點后會失去准確性。 例如，0度，360度和720度的matrix（）都相同，因此無法辨別原始意圖。
• 使用GSAP的本機轉換屬性，它可以解決各種瀏覽器錯誤和局限性，特別是對於SVG，因為它們的瀏覽器支持差異很大。

因此，從技術上講，您可以使用常規的“轉換”字符串，但如果您改用GSAP的本機屬性，則可以得到更好的性能，准確性和一致性。

這是一個代碼筆，顯示了您描述的工作情況： http ://codepen.io/anon/pen/PqKqZG

另外，正如您所知道的， http： //greensock.com/forums上有專門的GSAP論壇，開發團隊非常活躍。