使用H5創(chuàng)意展示實現(xiàn)上下對切特效
在手指的滑動中可以同時把上下兩個容器里的圖片或內(nèi)容進行切換,已形成相互對切的效果。下面我們來展示一下做出這樣的效果所需要的步驟。 步驟一:添加頁面和滑動時間軸 1. 在舞臺下添加一個頁面。選中舞臺
在手指的滑動中可以同時把上下兩個容器里的圖片或內(nèi)容進行切換,已形成相互對切的效果。下面我們來展示一下做出這樣的效果所需要的步驟。
步驟一:添加頁面和滑動時間軸
1. 在舞臺下添加一個頁面。選中舞臺,在工具欄里點擊頁面工具,添加一個頁面。
2. 選中頁面,點擊工具欄里的滑動時間軸工具,在舞臺上畫出一個矩形,添加一個滑動時間軸。
步驟二:添加上下容器
1. 在滑動時間軸下添加兩個透明按鈕,作為存放圖片的容器,分別命名為上層容器和下層容器。選中滑動時間軸1,點擊工具欄下的透明按鈕工具,在舞臺的上方畫出一個矩形,添加透明按鈕,命名為上層容器。選中滑動時間軸1,點擊工具欄下的透明按鈕工具,在舞臺的下方畫出一個矩形,命名為下層容器,這兩個透明按鈕容器用來固定圖片的位置。
2. 在兩個透明按鈕的屬性設置中,剪切設置為YES。
步驟三:添加圖片和軌跡
1. 在上層容器和下層容器中,各添加若干張圖片。選中上層容器對象,點擊工具欄里的圖片工具,在上層容器框中畫出一個矩形,添加圖片。選中下層容器對象,點擊工具欄里的圖片工具,在下層容器框中畫出一個矩形,添加圖片。
2. 在每張圖片下,各添加一個軌跡。選中圖片上3對象,點擊工具欄里的軌跡工具,添加軌跡,如此類推,每一張圖片都給它一個軌跡。
步驟四:設置關鍵幀
在軌跡上面添加特定的關鍵幀。點擊Add按鈕,即可在軌跡上添加關鍵幀。以圖下3和圖上3為例。首先設定它們在軌跡上的初始位置,一般的初始位置是定在容器的外面,以滑動的方式進入容器,而第二個關鍵幀就是圖片完全進去容器后的位置,一般設置圖片的位置跟容器的位置一樣就行。
同理也可以在滑動時間軸上設置圖上2和圖下2、圖上1和圖下1的關鍵幀,從而實現(xiàn)上下容器的連續(xù)連貫滑動。
重點工具與參數(shù)
1. 滑動時間軸:用于控制圖片的滑動出現(xiàn)時間和位置。
2. 透明按鈕:作為容器,用于放置需要滑動的圖片。
3. 軌跡:用于控制圖片的運動軌跡。
4. 滑動放大比例:通過設定手指滑動的距離對滑動時間軸播放進度進行控制,默認值為1。在本案例中,滑動放大比例的數(shù)值設置一般為0.2到0.5,以符合瀏覽的滑動節(jié)奏。
小提示
1. 使用透明按鈕作為容器,將需要滑動的圖片放在里面,利用滑動時間軸控制每張圖片滑動出現(xiàn)的時間和位置,從而實現(xiàn)了圖片上下對切的效果。
2. 滑動放大比例:使用此參數(shù)來設定手指滑動的距離對滑動時間軸軸播放進度的控制,默認值為1?;瑒颖壤O得較小時,滑動時間軸隨著同樣的滑動動作,會播放得更慢。在本案例中,滑動放大比例的數(shù)值設置一般為0.2到0.5,以更符合瀏覽的滑動節(jié)奏。