Protopie教程:登入頁轉場特效
本篇教程將展示如何使用Protopie製作一個登入頁轉場特效 O(∩_∩)O
一、最終效果
二、知識點
- 場景:使用新增場景功能,可以製作包含多個頁面的原型;設計複雜的互動效果時,也可以將每個互動細節分別製作在不同的場景上以方便存檔。
- 自動載入:執行原型或場景轉換時,無需其他觸發動作就可自動執行反應。
- 轉場:場景的轉換;轉場至-跳轉到指定的場景。
三、製作過程
本次教程,我們會接觸到一個很重要的功能:場景。
首先我們在預設場景,新增我們需要的按鈕元素,如下圖:
當我們點選按鈕時,按鈕背景鋪滿整個頁面,下面我們為按鈕新增“單擊”動作,並且新增如下引數:
- 圓角:將“Facebook背景”層圓角設定為0
- 大小:將“Facebook背景”層大小設定為380×40
- 透明度:將“Login with Facebook”層透明度設定為0
- 大小:將“Facebook背景”層大小設定為380×750,並且將延遲開始值設定為0.2
- 轉場:這裡選擇場景2,如果你的選項中沒有場景2,請先在頂部選單新增
至此,我們完成了點選按鈕後的切換頁面效果,下面我們切換到“場景2”,繼續編輯特效。
首先我們看一下場景2的元素:
當從場景1點選按鈕進入場景2時,預設所有元素都是透明的,通過“自動載入”將元素展現出來,我們需要在場景2中新增“自動載入”的動作,並且為該動作,增加元素顯示的特效。
- 透明度:將“返回”容器層,設定透明度為100
- 移動:將“返回”容器層,設定移動後的座標13×19,為了產生移動的特效,預設“返回”容器層的座標為33×19
- 透明度:將“描述”容器層,設定透明度為100,並且延遲開始設為0.2
- 透明度:將“OK + CANCEL”容器層,設定透明度為100,並且延遲開始設為0.7
至此,我們完成了點選按鈕後的跳轉至場景2,同時場景2元素動態顯示的效果。
為了能夠實現場景2返回場景1的特效,我們還設定了,通過點選左上角返回按鈕,切換至場景1的特效。
首先選擇“方向-左”層,建立“單擊”動作,並且為動作新增“透明度”和“轉場”引數,這裡就不詳細說明了,設定與場景1切換至場景2相同,可以在原始檔中檢視。
但是這裡在設定轉場時,需要勾選“重置被選場景”,至於這個選項的作用,大家可以試一試,看看勾選和沒勾選的情況下,效果有什麼區別。
至此,我們完成了該教程,希望能夠幫助到您~
原始檔下載
https://pan.baidu.com/s/1Zp9w8Lhpk3I0iFR8SvATcQ
作者:ZQZ原型師,專注原型設計/互動設計
本文由 @ZQZ原型師 原創釋出於人人都是產品經理,未經許可,禁止轉載。
題圖來自作者。