使用地鐵JS動畫拼貼動畫

Question

我正在嘗試使用metro js插件組合兩個動畫。我想結合multiple stops動畫和flip animation。翻轉動畫應該在延遲之後發生。你能幫我開始一些示例代碼嗎？

感謝您的任何幫助。

Answer 1

這取決於你正在尋找多少黑客。

這樣做有一個簡短而骯髒的方法，但我不能保證它可以跨瀏覽器工作，而且您還必須仔細調整是否關注同步問題。

爲了解釋，您可以將一個瓷磚嵌入到另一個瓷磚的框架中，但內部瓷磚對於是否正在顯示內容不會「智能」：每次顯示時它都不會重置動畫再次。

如果您從一個翻轉平鋪作爲外部動畫開始，然後嵌入一個多重停靠平鋪作爲翻蓋的第一面，您可以顯示多個站點，然後平鋪翻轉。

變得棘手的是delay的值僅僅是：之間的動畫，但不包括動畫運行的時間。爲了顯示所有的多的站的翻轉之前停止瓷磚，你翻轉瓷磚的延遲必須：number-of-stops * (multiple-stops-tile-delay + multiple-stops-tile-single-animation-time) - flip-tile-single-animation-time

Here is an example jsfiddle（我只是修改給出的兩個例子），其中用於翻蓋瓦片延遲未設置足夠長的時間，因爲我不能計算/編碼潛水ms動畫時間。我只是簡單地使用了停留時間*延遲時間。因此，將多次停車片設置爲3次停止的6000次延遲，我將父開關片設置爲18000次延遲。如果你讓它運行多次翻轉，它將會非常不同步。我已經在Chrome，Firefox和IE 9中測試過它，並且它基本上可以在所有三種模式下運行，但是IE可能會有與其他兩種不同的延遲時間，這可能會導致停止翻轉同步所有三種瀏覽器都不可能。

更長和更優雅的方法會涉及到插件的代碼更改，以迫使其他瓷磚內部的瓷磚的動畫重置或某種類似的方法，但不僅僅是簡單地指出這將超出直接回答的範圍。