上篇文章,和大家分享了Protopie如何在場景中插入音頻文件(文章連結見結尾),今天接著來看看如何在場景中插入相機。
現在很多的App都包含了拍攝的功能,但我們如何在交互原型中去調用相機功能呢?Protopie給我們提供了相機的功能,可以實現在原型中調用原生的相機進行演示。
首先我們使用插入相機工具,在場景中插入相機元素,可以在場景中看到的黑色區域就是相機了。
默認情況下,相機是沒有鋪滿屏幕的,我們可以根據自己的設計調整相機的大小,先看一下默認狀態下的相機,是如何展示的。
這是一張我手機的截屏,可以看到,在Protopie中默認相機的大小,在實際展示中也會顯示相同的大小。所以我們需要自己調整。
調整完成後,我們繼續接著做,今天我想給大家分享一下,如何製作一個通過按鈕控制相機打開和關閉的特效,看完這個教程,大家理解起來也會更加直觀一點。
第一步,我們需要將插入場景的相機元素的透明度調整成0,並且設置為不自動開啟,為什麼這麼做?有2點原因:
我們需要的特效默認情況下是不顯示相機的,當點擊按鈕後才會顯示,所以我們要讓相機默認情況下是不可見的,所以調整成透明度為0未勾選自動開啟,也是一樣的道理 第二步,我們在場景中添加2個圖片按鈕,用來控制相機的打開和關閉,如圖
第三步,我們為按鈕添加交互動作,點擊打開相機,點擊關閉相機。首先我們選中「相機」的圖片,為他添加單擊的觸發動作,並且為單擊增加2個反應動作。



第四步,按照相同的方法,我們為關閉按鈕,添加相機點擊關閉的效果。

完成以上的設置,這個動效我們就做完了,在這個教程中,我也順帶簡單介紹了一些觸發動作和反應動作的設置,但是沒有詳細的說明,在後面的分享中,我將會詳細說,因為觸發和反應動作,總共有幾十種,一次說不完的。
最後我們來看下實際的在真機上的演示效果。
下期預告
Protopie學習筆記:如何插入Lottie動畫,交互原型設計軟體入門教程