시간차 애니메이션

Timed Animations

시간을 기반으로 한, 자동 애니메이션 만들기

때로는 프로토타입이 시작되자마자 또는 타이머를 트리거하는 순간에만 애니메이션이 자체적으로 발생하길 원할 때가 있습니다.

때로는 탭을 하지 않고도 순전히 시간 기반에 의해 여러 가지 일이 발생하길 원할 때도 있습니다.

Facebook Live의 댓글 환경을 재구성하여 이를 수행하는 방법을 알아보겠습니다

설정

튜토리얼 파일로 시작한다면, Comments Position Y Option Switch Option Picker 이미 연결했음을 있습니다.

origamikorea_timedanimations01

시작하는 튜토리얼 파일은 이와 같이 되어있어야 합니다.

각 입력을 차례로 클릭하여 펄스를 발생시키면 Comments Position Y 위치가 위 또는 아래로 움직입니다. Set To 1을 클릭하면 첫 번째 포지션이 생기고, Set To 2는 두 번째 포지션, 이런 식으로 설정됩니다.

origamikorea_timedanimations02

Option Picker 인풋을 클릭하여 Comments Position Y 변경을 확인해 보세요.

When Prototype Starts

첫 번째 위치 (Set To 0)가 시작 위치입니다. 설정된 시간 후에 어떻게 프로토타입을 자동으로 다음 위치 (Set To 1)으로 가져갈 수 있을까요?

오리가미에는 When Prototype Starts라는 이름의 패치가 있습니다.

패치 편집기를 클릭 ()하고 When Prototype Starts 찾은 다음 패치 편집기에 패치 파일을 넣어주세요.

그런 다음 Option Switch 패치에 있는 Set To 1 인풋에 연결하세요.

origamikorea_timedanimations03

Set To 0 시작 위치이므로 Set To 1 연결해주세요.

프로토타입은 이미 시작되었으므로 뷰어 툴바에서 프로토타입 재시작Restart Prototype 버튼을 클릭하기 전까지는 이 효과가 나타나지 않습니다.

origamikorea_timedanimations04

뷰어 툴바에서 프로토타입 재시작Restart Prototype 버튼 클릭하기

Wait

프로토타입을 시작하면 곧바로 Option 1로 가 버립니다. 그러나 실제로 우리가 원하는 것은 프로토타입이 시작된 후 잠시 멈췄다가 다시 시작되는 것을 반복하는 것입니다. 프로토타입이 잠시 Wait해야 합니다.

When Prototype Starts Option Switch 사이에 Wait 패치를 넣어주세요. 패치 편집기를 클릭 ()하고 Wait 찾은 다음 패치 편집기에 패치 파일을 넣어주세요.

When Prototype Starts 아웃풋을 Wait 패치의 Start 인풋에 연결하고 Wait 아웃풋을 Set to 1 인풋에 연결해주세요.

origamikorea_timedanimations05

Wait 패치가 Set To 1 인풋에 연결되어 있어야 합니다.

프로토타입을 지금 다시 시작하고 처음 두 패치를 한번 확인해보세요. 신호가 즉시 전송되고, 1초 후에 신호가 Option Switch로 전송됩니다.

origamikorea_timedanimations06

Option Switch Option Picker 입력된 신호를 전달하고, Option Picker Comments Position Y 변경합니다.

다음번 Set To 인풋으로 자동으로 넘어갈 수 있는 몇 가지 방법이 있지만, 단순화를 위해 Wait 패치를 더 추가하는 방법을 사용하겠습니다. 이는 Option Switch의 해당 인풋에 연결될 것입니다.

Wait 패치를 더 추가합니다.

번째 Wait 패치와 마찬가지로 When Prototype Starts 아웃풋이 번째 Wait Start 인풋으로 연결되고, Wait 패치의 아웃풋이 Option Switch Set to 2 인풋으로 연결됩니다.

origamikorea_timedanimations07

두 번째 Wait 패치의 지속 시간을 3초로 지정합니다. , 첫 번째 Wait 패치가 트리거된 시점부터 3초가 아니라, 프로토타입이 시작되면서부터 3초가 계산됩니다.

origamikorea_timedanimations08

프로토타입이 시작되면 첫 번째 Wait 패치가 즉시 트리거됩니다. 3초 후 다음 Wait가 트리거됩니다.

다중 지연

단순화를 위해 모든 Wait 패치를 When Prototype Starts 연결합니다.

Option Switch 인풋 ( 5) 모두 연결하기 위해 Wait 패치를 추가합니다.

origamikorea_timedanimations09

각각의 지연 시간을 변경하여 서로 다른 시간에 모든 트리거를 실행합니다. 예를 들어, 세 번째 Wait 패치에는 지연 시간 입력이 6, 두 번째 마지막 Wait 패치는 8, 마지막은 11초가 될 수 있습니다.

마지막으로 각 Wait 패치 아웃풋을 Option Switch의 나머지 인풋에 순차적으로 연결합니다.

origamikorea_timedanimations10

Wait 패치는 최단 시간에서 최장 시간까지 있어야하며,이 순서로 Option Switch 인풋에 연결해야합니다.

이전처럼, 프로토타입 재시작Restart Prototype 버튼을 클릭하고 각 시간이 지날 때까지 Wait 패치를 확인해보세요.

origamikorea_timedanimations11

Duration 값은 When Prototype Starts에서부터 측정되고, 이에 따라 각각의 출력이 Option Switch 전송됩니다. Option Picker 옵션을 취해 Comments Y 해당하는 위치를 출력합니다.

원문: http://origami.design/tutorials/common-interactions/Timed-Animations.html


연관된 Learn 콘텐츠

origamikorea_getting started

시작하기 Getting Started

오리가미 스튜디오 사용에 대한 소개