올해도 왔네요, advent 달력!
Noodl Advent Calendar 2020
Noodl의 활용 정보가 아직 적으니 이 기회를 타서jump를 추가하세요!
이 글은 노들 개인이 개발한보존 지원 어플리케이션을 활용한 팝업 메시지 제작 방법을 소개한다.

실물

레코드 버튼을 누르면 팝업 메시지가 표시됩니다!
나는 Noodl에서 보증 지원 응용 프로그램을 하는 프로젝트를 한다.오늘 팝업 해봤어요!#Noodlpic.twitter.com/NLNt117zXM-전위@그를 사랑하고 분투 중(@kmaepu)December 10, 2020

프로세스 설명

팝업 디스플레이 부분 프로세스와 UI는 다음과 같습니다br/>

에서 사용하는 노드는 다음과 같습니다.br/>
- Animation 노드 - Tamer 노드- Group 노드

+α 표시할 팝업 메시지에 사용할 노드

Aniamution 노드

Animation 노드는 특정 매개 변수에 대해 시간을 변경할 수 있습니다

이번 Opacity(불투명도)는 0~1이 되었다.Duration(변경 시간)에 따라 0에서 1까지의 변경 시간을 설정합니다.

Animation 노드의 설정은 다음과 같습니다.br/>

Timer 노드

Timer 노드에 팝업 메시지 표시 시간 제어br/>
Timer 노드의 설정은 다음과 같습니다.br/>


다음 그림과 같이 Timer 노드와 Animation 노드가 연결되어 있습니다.Animation 노드가 종료되면 Has Reached End 트리거가 발생하므로 Timer 노드의 Restart에 연결합니다.p>

Timer 노드 수가 끝나면 Finished 트리거가 발생합니다.Animation 노드의 PlayFrom End To Start에 연결됩니다.이렇게 하면 타이머 화물 운송t가 끝날 때 Aniamation 노드가 끝값에서 Start 값으로 실행할 수 있다br/>

그룹 노드

이번에 그룹 노드를 구성 부분으로 하여'msg'라는 이름을 지었습니다.msg 구성 요소의 내용은 다음과 같습니다br/>

Component Inputs 노드는 MSg 구성 요소 외부의 속성을 수락합니다.이번에 필요한 건opacity와text입니다.br/>
(기타 확장성에 추가됨)

opecity는 팝업 메시지의 불투명도를 표시합니다br/>
text는 팝업 메시지에 표시되는 텍스트입니다.

최후

대략적인 설명으로 팝업 메시지를 만드는 방법입니다!

Animation 노드를 능숙하게 사용하면 상호작용 UI를 더욱 간단하게 만들 수 있을 것 같습니다. 많이 시도해 보세요!🎄