使用H5創意展示實現上下對切特效

在手指的滑動中可以同時把上下兩個容器里的圖片或內容進行切換，已形成相互對切的效果。下面我們來展示一下做出這樣的效果所需要的步驟。 步驟一：添加頁面和滑動時間軸 1. 在舞臺下添加一個頁面。選中舞臺

在手指的滑動中可以同時把上下兩個容器里的圖片或內容進行切換，已形成相互對切的效果。下面我們來展示一下做出這樣的效果所需要的步驟。

步驟一：添加頁面和滑動時間軸

1. 在舞臺下添加一個頁面。選中舞臺，在工具欄里點擊頁面工具，添加一個頁面。

2. 選中頁面，點擊工具欄里的滑動時間軸工具，在舞臺上畫出一個矩形，添加一個滑動時間軸。

步驟二：添加上下容器

1. 在滑動時間軸下添加兩個透明按鈕，作為存放圖片的容器，分別命名為上層容器和下層容器。選中滑動時間軸1，點擊工具欄下的透明按鈕工具，在舞臺的上方畫出一個矩形，添加透明按鈕，命名為上層容器。選中滑動時間軸1，點擊工具欄下的透明按鈕工具，在舞臺的下方畫出一個矩形，命名為下層容器，這兩個透明按鈕容器用來固定圖片的位置。

2. 在兩個透明按鈕的屬性設置中，剪切設置為YES。

步驟三：添加圖片和軌跡

1. 在上層容器和下層容器中，各添加若干張圖片。選中上層容器對象，點擊工具欄里的圖片工具，在上層容器框中畫出一個矩形，添加圖片。選中下層容器對象，點擊工具欄里的圖片工具，在下層容器框中畫出一個矩形，添加圖片。

2. 在每張圖片下，各添加一個軌跡。選中圖片上3對象，點擊工具欄里的軌跡工具，添加軌跡，如此類推，每一張圖片都給它一個軌跡。

步驟四：設置關鍵幀

在軌跡上面添加特定的關鍵幀。點擊Add按鈕，即可在軌跡上添加關鍵幀。以圖下3和圖上3為例。首先設定它們在軌跡上的初始位置，一般的初始位置是定在容器的外面，以滑動的方式進入容器，而第二個關鍵幀就是圖片完全進去容器后的位置，一般設置圖片的位置跟容器的位置一樣就行。

同理也可以在滑動時間軸上設置圖上2和圖下2、圖上1和圖下1的關鍵幀，從而實現上下容器的連續連貫滑動。

重點工具與參數

1. 滑動時間軸：用于控制圖片的滑動出現時間和位置。

2. 透明按鈕：作為容器，用于放置需要滑動的圖片。

3. 軌跡：用于控制圖片的運動軌跡。

4. 滑動放大比例：通過設定手指滑動的距離對滑動時間軸播放進度進行控制，默認值為1。在本案例中，滑動放大比例的數值設置一般為0.2到0.5，以符合瀏覽的滑動節奏。

小提示

1. 使用透明按鈕作為容器，將需要滑動的圖片放在里面，利用滑動時間軸控制每張圖片滑動出現的時間和位置，從而實現了圖片上下對切的效果。

2. 滑動放大比例：使用此參數來設定手指滑動的距離對滑動時間軸軸播放進度的控制，默認值為1?；瑒颖壤O得較小時，滑動時間軸隨著同樣的滑動動作，會播放得更慢。在本案例中，滑動放大比例的數值設置一般為0.2到0.5，以更符合瀏覽的滑動節奏。