Response
리스폰스는 트리거에 의해 발생된 인터렉션의 결과가 되는 피스입니다. 트리거와 조합하는 방식에 따라 서로 다른 프로퍼티를 가집니다.
Move
레이어의 위치를 이동시킵니다.
Scale
레이어의 사이즈를 조절합니다.
Size
레이어의 사이즈를 가로값width과 세로값height으로 조절합니다. (컨테이너의 사이즈를 조절 할 때는 컨테이너 안의 레이어들의 사이즈에는 변화가 없습니다.)
Factor
레이어의 사이즈를 퍼센트%로 조절합니다. (컨테이너의 사이즈를 조절할 때 컨테이너 안의 레이어들도 함께 사이즈가 조절됩니다.)
Rotate
레이어를 설정한 각도로 회전시킵니다.
3D Rotate
레이어를 3차원으로 회전시킵니다.
Rotate To
레이어가 회전할 각도의 절대 값을 설정합니다
Rotate By
레이어의 각도를 설정한 값만큼씩 증가 혹은 감소시킵니다
Direction
레이어가 회전하는 방향을 설정합니다
Pivot
레이어 회전의 기준점을 설정합니다
Perspective Depth
레이어가 3차원으로 회전할 때 왜곡의 정도를 설정할 수 있습니다. 숫자가 작아질 수록 왜곡이 커집니다
Opacity
레이어의 투명도를 변경합니다.
Color
레이어의 컬러를 변경합니다.
Shadow
레이어에 shadow를 적용하거나 수정할 수 있습니다.
Border
레이어에 border를 적용하거나 수정할 수 있습니다.
Radius
레이어의 모서리의 둥글기를 변경합니다.
Scroll
레이어를 특정 위치로 스크롤합니다.
Reorder
레이어의 순서를 변경합니다. 레이어가 컨테이너 안에 있는 경우 컨테이너 내에 위치하는 레이어들끼리만 순서가 변경됩니다.
Jump
Scene간 이동을 할 수 있습니다.
Scene
이동할 Scene을 선택할 수 있습니다
Transition
Scene 이동을 할 때 트랜지션 효과를 줄 수 있습니다
Reset the selected scene
이동할 씬의 상태를 초기 상태로 되돌립니다. 이 옵션을 켜지 않으면 해당 씬에서 마지막으로 인터랙션이 일어난 상태로 이동하게 됩니다
Playback
동영상 레이어와 오디오 레이어를 제어할 수 있습니다. 재생하거나 멈추고 특정 구간으로 점프 시킬 수 있습니다.
Text
텍스트의 속성이나 내용을 변경 할 수 있습니다. 텍스트 리스폰스는 듀레이션을 가지지 않습니다.
Change To
텍스트의 내용을 변경합니다
Size
텍스트의 사이즈를 변경합니다
Weight
텍스트의 굵기를 변경합니다
Alignment
텍스트의 좌/우 혹은 상/하 정렬을 변경합니다
Line Spacing
텍스트의 행간을 변경합니다
Stop
Progress bar나 Loader처럼 애니메이션이 진행 중인 레이어를 멈출 수 있습니다.
Send
디바이스간 인터랙션을 구현할 수 있습니다. 독립적으로는 사용이 불가능하고 리시브 트리거와 함께 사용되는 리스폰스입니다. 리시브 트리거에서 설정한 문자열과 센드 리스폰스의 문자열이 일치할 때 실행됩니다.
또한 센드 리스폰스와 리시브 트리거를 하나의 scene안에서 사용하면 여러번 사용되는 인터랙션을 모듈화시켜 반복작업을 줄일 수 있습니다.
Channel [Component]
Component와 message를 주고 받을 수 있습니다. Channel에서 component를 선택하면 현재 scene 안에 있는 component를 선택할 수 있고 선택한 component와 상호작용하게 만들 수 있습니다. Components tutorial에서 자세한 사용법을 확인 할 수 있습니다.
Channel [ProtoPie Studio]
ProtoPie Studio 에 연결된 디바이스간에 메시지를 주고 받을 수 있습니다. Send 리스폰스와 Receive 트리거를 사용해서 두개 이상의 디바이스가 서로 상호작용하는 인터랙션을 만들 수 있습니다.
Channel [Android Broadcast]
하나의 Android 디바이스 내에서 다른 앱과의 인터랙션이 가능합니다. 자세한 내용은 여기서 확인할 수 있습니다.
Channel [Current Scene]
Scene 내에서 메시지를 주고 받을 수 있습니다. Send 리스폰스와 Receive 트리거를 사용하면 중복되는 인터랙션을 모듈화 시켜서 반복 작업을 줄일 수 있습니다.
Message
전송할 문자열을 정의합니다. 센드 리스폰스에서 정의한 문자열과 리시브 트리거에서 정의한 문자열이 동일할 때 디바이스간의 인터랙션을 실행 시킬 수 있습니다
Assign to Variable
Message와 함께 특정 값을 전달할 수 있습니다. 받는 쪽에서는 전달받은 값을 변수에 저장해서 사용할 수 있습니다.
Vibrate
기본적인 진동과 Android, iOS에서 지원하는 Haptic Feedback을 사용할 수 있습니다. Google의 Developer Documentation과 Apple의 Human Interface Guideline에서 각 Haptic Feedback의 정확한 설명과 예제를 확인할 수 있습니다.
iOS
Default: 기본 진동입니다.
Notification - Success: 입금 혹은 차량 잠금해제와 같은 동작이나 어떠한 작업이 완료되었음을 나타냅니다.
Notification - Warning: 입금 혹은 차량 잠금해제와 같은 동작이나 어떠한 작업에서 경고가 발생했음을 나타냅니다.
Notification - Failure: 입금 혹은 차량 잠금해제와 같은 동작이나 어떠한 작업이 실패했음을 나타냅니다.
Impact - Light/Medium/Heavy: 시각적 경험을 보완하는 물리적인 효과를 제공합니다. 예를 들어 어떤 객체가 제자리에 들어가거나 두개의 객체가 충돌했을 때 실제로 "쿵" 하는듯한 물리적인 효과를 줄 수 있습니다.
Selection - Selection: 선택 항목이 변경되고 있음을 나타냅니다. 예를 들어 사용자가 휠을 스크롤하는 동안 가볍게 두드리는 효과를 줄 수 있습니다. 이 피드백은 선택이나 확인 등의 1회성 피드백이 아니라 지속적인 움직임을 전달하는 용도에 적합합니다.
Android
Default: 기본 진동입니다.
Keyboard Press: 사용자가 가상 버튼 혹은 소프트웨어 키보드의 키를 눌렀음을 나타냅니다.
Keyboard Tap: 사용자가 소프트웨어 키보드의 키를 눌렀음을 나타냅니다.
Long Press: 사용자가 어떤 오브젝트를 롱프레스 했을 때 해당 액션이 완료되었음을 나타냅니다.
Virtual Key: 사용자가 화면상의 가상 버튼을 눌렀음을 나타냅니다.
Focus
선택한 Input layer에 커서를 focus in/out 합니다.
Assign
Variable의 값을 overwrite할 수 있습니다.
Link
웹사이트나 url scheme을 열 수 있습니다.
URL
웹사이트 URL을 열 수 있습니다. ios는 in-app browser로 열 수도 있습니다.
e.g. https://protopie.io
e.g. https://www.google.com/search?q=protopie
URL scheme을 입력하면 iOS, Android의 기본앱을 열거나 써드파티 앱을 실행할 수 있습니다.
e.g. mailto:hello@protopie.io
e.g. tel:+1-212-555-1234
e.g. whatsapp://send?text=[[hello]]
e.g. fb://feed
e.g. slack://open?team={TEAM_ID}
Formula
Formula를 사용해서 url을 동적으로 입력할 수 있습니다.
e.g. "https://www.google.com/search?q=" + `Input 1`.text
e.g. "https://www.amazon.com/s/field-keywords=" + `keyword`.text
Camera
Camera Layer를 조작 할 수 있는 response입니다.
Reset
현재 Scene, 레이어 혹은 변수를 초기상태로 되돌립니다. Scene 을 선택하여 scene 전체를 초기 상태에서 다시 시작하도록 하거나, 특정 layer 를 선택하여 reverse animation 을 손쉽게 만들 수 있습니다.
Background Blur
하단 오브젝트에 블러 효과를 줍니다.
기본 효과
Extra Light
Light
Dark
Material 효과 (웹 및 iOS 13 이상에서만 활성화 되며, Light와 Dark모드를 각각 지원합니다.)
Ultra Thin Material
Thin Material
Material
Thick Material
Chrome Material
Condition
리스폰스가 실행시키기 위한 조건을 정의합니다. 컨디션 피스에서 정의한 조건을 만족시킬 때, 컨디션 아래 나열된 리스폰스들이 실행 됩니다.
