1.首先我們在畫布下添加一個滑動時間軸，高度和寬度與畫布一致，然後添加圖片素材，左側的天氣圖標統一都是寬度200，高度200，座標(0,0)，右側的溫度圖片統一都是寬度200，高度100，座標(200,40)。可以看到它們現在是堆疊在一起的，我們可以先只令一對圖片顯示看一下顯示效果。
2.第二步我們添加四個矩形作爲四種個天氣的背景顏色板，矩形的寬度和高度與滑動時間軸的大小一致，座標(0,0)即可。下面是單獨顯示的效果。
3.動畫設計思路
第三步就是製作遮罩的效果，這也是我們這個動畫效果的核心部分。我們可以先將顯示範圍擴大一些，給四個矩形設置不同的顏色，然後X座標增加一些偏移以便觀察。
案例中的素材可以分成四套，以遮罩矩形_晴天、1_晴天、晴天和背景_晴天這一套爲例，1_晴天、晴天和背景_晴天三個組件的遮罩對象都是遮罩矩形_晴天，所以只有通過遮罩矩形_晴天的區域我們纔可以看到1_晴天、晴天和背景_晴天，而且由於其他3套素材的遮罩對象爲對應的其他遮罩矩形，在遮罩矩形_晴天的區域內也就都不可見了。
於是我們要做的就是將所有的天氣圖標向下移動，同時讓遮罩矩形和溫度圖片依次向上移動，使天氣圖標和溫度能在對應的遮罩矩形下顯示出來。
4.天氣圖標的軌跡
滑動時間軸的時長爲3秒，0秒時刻爲初始狀態，第1，2，3秒時刻對應之後的3個顯示狀態，計算可得天氣圖標每次向下移動200px即可。不過要注意在移動過程中遮罩矩形之間是有重疊的，會導致一定程度的遮擋，爲了避免這種情況的影響，我們如下圖所示設置每個天氣圖標的顯示時間段，這樣每當顯示當前天氣圖標時上一天氣圖標就已經隱藏了。
5.遮罩矩形和溫度圖片的軌跡
接下來是溫度圖片和遮罩矩形的軌跡，除了1_晴天和遮罩矩形_晴天一直位於最上端不需要添加軌跡，其餘3套素材的運動狀態是相同的，都是從下向上依次移動200px，不過要注意它們開始移動的起始時間點是不同的，我們需要在起始時間點加上一個關鍵幀，該幀的位置與初始狀態一致，這樣對應的溫度圖片和遮罩矩形纔會在滑動時間軸運行到此時間點再開始向上移動。
6.時間標記
最後就是給第1秒和第2秒兩個時間點分別加上一個時間標記，並且將時間標記設置爲暫停點，觸發方向選擇雙向，這樣滑動時間軸無論是正向播放還是反向播放到此處都會暫停。至此，整個動畫的製作就完成了。
總結
滑動時間軸與時間軸的區別還是比較容易理解的，本案例的難點還是在於軌跡的和遮罩關係的設置，建議是先理清組件的運動過程，確認好軌跡移動流程沒有問題後再添加遮罩對象。