共用方式為


讓撥動手勢產生動畫效果 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App,請參閱 最新文件 ]

當您實作 Windows 8 觸控選取模式 (稱為「撥動」**) 用於項目的選取時,可以使用撥動動畫。

這組動畫包含下列 API。實作撥動互動時必須使用所有這三個動畫:

下列視訊示範撥動顯示動畫:

下列視訊示範撥動選取和取消選取動畫:

注意  ListView 控制項包含觸控選取和撥動動畫,所以使用該控制項時不用實作這些動畫。

 

撥動選取

在使用者拖曳可支援撥動選取的項目時,使用撥動選取動畫。使用者必須將項目拖曳得夠遠才能加以選取,然後再放開它。撥動選取動畫會新增在項目上顯示「已選取」狀態的選取指示器 (通常是核取記號),並將項目移回它的停留位置。

顯示撥動選取動畫中步驟的圖解:移動和核取

若要使用這個動畫,您必須知道將要顯示的選取指示器及動畫的方向和距離。

撥動取消選取

在使用者拖曳目前選取的項目至遠到足以取消選取並接著放開它時,可使用撥動取消選取動畫。撥動取消選取動畫會從項目上移除選取指示器,然後將項目移回它的停留位置。

顯示撥動取消選取動畫中步驟的圖解:移動和取消核取

若要使用這個動畫,您必須知道將要隱藏的選取指示器及動畫的方向和距離。

撥動顯示

使用撥動顯示動畫為使用者顯示項目支援撥動互動。當使用者按住可支援撥動互動的項目時,動畫會將項目向下移動再向上移回,提示該項目支援撥動互動。

顯示撥動顯示動畫中步驟的圖解:移動和取消核取

若要使用這個動畫,您必須知道動畫的方向和距離。這個動畫必須依序播放兩次;第一次是將項目移往指定方向,然後再次將項目移回停留位置。

其他資源

如需示範使用撥動動畫 API 的程式碼範例,請參閱 HTML 動畫庫範例

相關主題

讓 UI 產生動畫效果

swipeReveal

swipeSelect

swipeDeselect