Protopie教程:訂票App效果
今天和大家分享一個訂票App特效,快搬好小板凳坐下!
最終效果(圖有點兒大)
流程與知識點
先介紹一下APP的操作流程:
該效果中主要用到了以下知識點:
1. 容器層;
2. 場景切換;
3. 透明度;
制作過程
開始我們的制作過程:
整個特效過程,會用到5個不同的場景:
- 選擇影片;
- 查看影片詳情;
- 確定場次;
- 確定作為;
- 完成付款獲取二維碼。
我們按照不同的場景依次來解說實現過程:
在第一個場景中,我們將2部電影的素材,分成2個不同的容器歸類,并且為了進行滑動設置,將其歸為一個滑頁容器層,并且設置滑頁方向為水平方向,效果為彈跳(右下角黃色框配置)。這樣就實現了通過鼠標滑動,顯示不同影片信息的效果。
為了進入第二個場景,我們為圖標,進行了單擊的設置,并且為單擊操作,增加轉場的設置。
進入第二個場景,為了實現轉場后,顯示購票按鈕,我們設置了影片內容移動的特效;主要包括了背景層的移動、影片介紹的移動、標題的移動、以及購票按鈕的顯示。
在該場景中,我們還看到了,影片多圖片的顯示效果:這里也是同樣使用滑頁容器完成的,設置方法,同第一場景中的滑頁效果設置。
第三個場景中的功能點,主要是對于選擇時間后,顏色的變更,選擇時間元件,添加單擊動作,并且在該動作下加入顏色變換的屬性。如下圖所示:
第四個場景:使用同樣的方法,我們可以對選座進行相同的設置。
在最后一個場景(第五個場景)中,我們使用透明度和移動,來實現二維碼見面顯示的特效。這里使用到了自動加載的動作,作用是當場景加載時,自動實現動作。
完成所有的設置,我們來看下最終的效果:
因為在制作過程中,很多細節用文字來描述,比較困難,所以我只挑選了最重要的部分,有興趣的可以自己下載一下源文件,進行探討。
歡迎留言!
文件下載
現在分享必須要提取碼了,因為baidu的原因,不是我強行設置的呀~抱歉
鏈接: https://pan.baidu.com/s/1gWmz0uY1ZGrwL3jiTwlDBw
提取碼: eyxs
本文由 @ZQZ原型師 原創發布于人人都是產品經理,未經許可,禁止轉載。
題圖來自作者
您好,分享的源文件已經過期了,可以再分享下嗎
這個Protopie是要收費的嗎?可否私聊我下
請問效果圖都是用什么軟件制作的呀
protopie
好著急 ,我最關心的價格在哪里
分享的文件已經過期 可否再分享一次
分享的文件已經過期 可否再分享一次 ??
謝謝
可以把這個文件也發我一下嗎?謝謝
不好意思,讓大師見笑了,請問這個是什么軟件
protopie