Protopie教程:訂票App效果

11 評論 6559 瀏覽 13 收藏 5 分鐘

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

最終效果(圖有點兒大)

流程與知識點

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

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

1. 容器層;

2. 場景切換;

3. 透明度;

制作過程

開始我們的制作過程:

整個特效過程,會用到5個不同的場景:

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

我們按照不同的場景依次來解說實現過程:

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

為了進入第二個場景,我們為圖標,進行了單擊的設置,并且為單擊操作,增加轉場的設置。

進入第二個場景,為了實現轉場后,顯示購票按鈕,我們設置了影片內容移動的特效;主要包括了背景層的移動、影片介紹的移動、標題的移動、以及購票按鈕的顯示。

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

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

第四個場景:使用同樣的方法,我們可以對選座進行相同的設置。

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

完成所有的設置,我們來看下最終的效果:

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

歡迎留言!

文件下載

現在分享必須要提取碼了,因為baidu的原因,不是我強行設置的呀~抱歉

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

提取碼: eyxs

 

本文由 @ZQZ原型師 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自作者

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 您好,分享的源文件已經過期了,可以再分享下嗎

    來自福建 回復
  2. 這個Protopie是要收費的嗎?可否私聊我下

    來自北京 回復
  3. 請問效果圖都是用什么軟件制作的呀

    來自北京 回復
    1. protopie

      來自江蘇 回復
  4. 好著急 ,我最關心的價格在哪里

    來自江蘇 回復
  5. 分享的文件已經過期 可否再分享一次

    來自北京 回復
  6. 分享的文件已經過期 可否再分享一次 ??

    來自山東 回復
    1. 謝謝

      來自山東 回復
    2. 可以把這個文件也發我一下嗎?謝謝

      來自重慶 回復
  7. 不好意思,讓大師見笑了,請問這個是什么軟件

    回復
    1. protopie

      來自江蘇 回復