今天和大家分享一個訂票App特效，快搬好小板凳坐下！

最終效果（圖有點兒大）

流程與知識點

先介紹一下APP的操作流程：

該效果中主要用到了以下知識點：

1. 容器層；

2. 場景切換；

3. 透明度；

制作過程

開始我們的制作過程：

整個特效過程，會用到5個不同的場景：

1. 選擇影片；
2. 查看影片詳情；
3. 確定場次；
4. 確定作為；
5. 完成付款獲取二維碼。

我們按照不同的場景依次來解說實現(xiàn)過程：

在第一個場景中，我們將2部電影的素材，分成2個不同的容器歸類，并且為了進(jìn)行滑動設(shè)置，將其歸為一個滑頁容器層，并且設(shè)置滑頁方向為水平方向，效果為彈跳（右下角黃色框配置）。這樣就實現(xiàn)了通過鼠標(biāo)滑動，顯示不同影片信息的效果。

為了進(jìn)入第二個場景，我們?yōu)閳D標(biāo)，進(jìn)行了單擊的設(shè)置，并且為單擊操作，增加轉(zhuǎn)場的設(shè)置。

進(jìn)入第二個場景，為了實現(xiàn)轉(zhuǎn)場后，顯示購票按鈕，我們設(shè)置了影片內(nèi)容移動的特效；主要包括了背景層的移動、影片介紹的移動、標(biāo)題的移動、以及購票按鈕的顯示。

在該場景中，我們還看到了，影片多圖片的顯示效果：這里也是同樣使用滑頁容器完成的，設(shè)置方法，同第一場景中的滑頁效果設(shè)置。

第三個場景中的功能點，主要是對于選擇時間后，顏色的變更，選擇時間元件，添加單擊動作，并且在該動作下加入顏色變換的屬性。如下圖所示：

第四個場景：使用同樣的方法，我們可以對選座進(jìn)行相同的設(shè)置。

在最后一個場景（第五個場景）中，我們使用透明度和移動，來實現(xiàn)二維碼見面顯示的特效。這里使用到了自動加載的動作，作用是當(dāng)場景加載時，自動實現(xiàn)動作。

完成所有的設(shè)置，我們來看下最終的效果：

因為在制作過程中，很多細(xì)節(jié)用文字來描述，比較困難，所以我只挑選了最重要的部分，有興趣的可以自己下載一下源文件，進(jìn)行探討。

歡迎留言！

文件下載

現(xiàn)在分享必須要提取碼了，因為baidu的原因，不是我強(qiáng)行設(shè)置的呀~抱歉

鏈接: https://pan.baidu.com/s/1gWmz0uY1ZGrwL3jiTwlDBw

提取碼: eyxs

本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自作者