Axure 무작위 추첨 프로토 타입 효과 제작 자습서:
첫째, 재료 준비 1. 중계기라는 자습서는 주로 중계기를 통해 하는 것이다. 중계기의 재사용성이 강하기 때문이다. 제작이 완료되면 repeater 테이블에서 경품 정보만 관리하면 상호 작용 레이아웃을 자동으로 생성할 수 있습니다. 가로 분포, 행당 항목 수는 5 개입니다. 재수기 내부에 필요한 구성 요소: 내부 직사각형: 선택한 스타일을 파란색 (추첨 시 깜박임 효과) 으로 설정하고 비활성화된 스타일은 주황색 (추첨 후 효과) 으로 설정합니다. 그림 요소: 경품의 그림 내용을 설정한 다음 그림 상호 작용을 설정하여 재수기의 그림을 이 요소로 설정합니다. 텍스트 레이블: 경품의 텍스트 내용입니다. 그런 다음 텍스트 상호 작용을 설정하여 리피터의 경품 텍스트를 구성 요소로 설정합니다. 내부 사각형, 그림 요소 및 텍스트 레이블이 결합되어 중계기에 배치됩니다. 재수기 내부 테이블 설정: 재수기 테이블에 5 개의 열을 설정해야 합니다. * * *: 열 없음: 일련 번호 열, 12345 로 채워집니다. 일련 번호는 후속 임의 샘플링에 사용됩니다. 텍스트 열: 텍스트 열, 텍스트 레이블의 내용에 해당하는 텍스트 열, 여기에 경품 정보를 입력하면 됩니다. Pic 바: 사진 바, 로컬 사진을 마우스 오른쪽 단추로 클릭하거나 온라인 주소를 기입하십시오. 선중 열: 기본값은 비어 있으며 추첨 시 논리 처리에만 사용됩니다. 김용란: 기본값은 비어 있습니다. 추첨이 완료된 후 경품 배경이 변색되는 논리 처리에만 사용됩니다. 2. 추첨 버튼. 필요에 따라 버튼 스타일을 디자인할 수 있습니다. 3. 텍스트 라벨은 논리 처리에만 사용되는 두 개의 텍스트를 추가해야 합니다. 기본적으로 숨겨진 시간 텍스트는 복권이 깜박이는 시간을 기록하는 데 사용됩니다.
기록 텍스트: 깜박임 위치를 기록하는 데 사용됩니다. 기본값은 1 입니다.
둘째, 대화형 제작 1. 리피터의 각 항목을 로드할 때의 대화식 상호 작용 먼저 repeater 의 경품에 대한 정보 (텍스트 및 그림) 를 해당 구성 요소로 설정해야 합니다. 텍스트 설정: repeater 에서 텍스트 레이블 (경품의 텍스트 내용) 설정 그림 설정: repeater 의 그림 구성 요소 (경품의 그림) 를 item.pic 의 내용으로 설정한 다음 필요에 따라 설정합니다. 선택의 값이 1: Set Checked: 인 경우 배경 사각형을 선택하여 변색시켜야 합니다. Repeater 의 값으로 배경 사각형의 상태를 제어합니다. 현중의 열 값이 1 이면 색상 변화가 선택됩니다. 1 과 같지 않으면 텍스트 설정이 선택되지 않습니다. 녹음 텍스트도 설정해야 합니다. Item.no+ 1 으로 설정합니다. 여기서 item.no 는 현재 일련 번호입니다. 1 을 더하면 내가 번쩍이는 것을 나타내고, 다음 번쩍이는 상을 기록한다. 다음으로 선택한 이벤트와 유사한 비활성화된 이벤트를 설정합니다. Jinyong 값이 1 이면 배경 직사각형이 비활성화됩니다. 1 이 아니라면 우리는 쓸 필요가 없다. 기본값은 1 이 아니기 때문에 disabled 가 1 과 같지 않으면 배경 직사각형이 활성화되지만 여기에 쓰지 않아도 똑같이 쓸 수 있기 때문에 시간을 낭비할 필요가 없습니다. 마지막으로, 우리는 순환을 해야 한다. 마지막 행에 있는 경우 선택할 때 레코드 문자를 일련 번호+1 으로 설정하는 것은 확실히 잘못된 것이며, 마지막 행에 있는 레코드 문자를 1 으로 설정해야 순환할 수 있습니다. Tem.isLast 가 true 이고 선언의 값이 1 이면 기록된 텍스트의 값을1으로 설정합니다. 그런 다음 중계기의 상호 작용이 완료됩니다. 다음으로, 우리는 추첨주기의 상호 작용을 진행한다. 2. 횟수 텍스트를 로드할 때 상호 작용 횟수 텍스트는 추첨 중 깜박임 횟수를 제어하는 데 사용됩니다. 추첨은 무작위이기 때문에 구성 요소를 로드할 때 횟수 텍스트를 난수로 설정합니다. 여기서는 무작위 함수 math.random 을 사용합니다. 0 에서 1 사이의 임의의 숫자를 취할 수 있습니다. 그런 다음 20 에서 40 사이의 플래시 횟수를 제어하므로 무작위 함수 *20+20 의 결과로 제어할 수 있습니다. 마지막으로 고정 함수로 반올림하는 것을 기억합니다. 3. 마우스 클릭시 추첨 버튼 상호 작용. 여기에는 두 가지 상황이 있다. 첫 번째는 텍스트 > 의 횟수입니다. 0: 마우스가 버튼을 클릭한 후 먼저 현재 버튼을 비활성화해야 합니다. 반복되는 클릭으로 인한 문제를 방지하기 위해 repeater 에서 모든 행을 표시한 다음 표시된 행을 업데이트합니다. 즉, 모든 행을 업데이트하고, 모든 행의 선충열과 김용열 값을 0 으로 변경하면 모든 경품의 배경을 기본 색상으로 설정하는 것으로 이해할 수 있습니다. 그런 다음 라인을 업데이트합니다. 업데이트된 논리는 no 열의 일련 번호 = = 레코드 텍스트이며 해당 행의 선 충열 값은 1 으로 업데이트됩니다. 이렇게 하면 한 번에 1 만 선택할 수 있습니다. 이 옵션을 선택하면 레코드 텍스트+1 이 자동으로 설정되어 루프를 만듭니다. 여기서 우리는 대기 시간, 즉 각 상이 파란색 배경을 표시하는 시간을 설정합니다. 이 경우 0. 1 초입니다. 실제 상황에 따라 설정할 수 있습니다. 다음으로 텍스트 횟수를 원래 값인-1 으로 설정한 다음 현재 버튼을 클릭하면 이벤트를 트리거합니다. 예를 들어 난수가 처음에 20 이라면 20 부터 19 부터 18 까지 계속 순환한 다음 멈춥니다. 숫자 텍스트가 0 이 되면 먼저 모든 행을 표시하여 모든 행을 업데이트하고, 모든 행의 선중 열과 김용 열 값을 0 으로 변경합니다. 이 단계는 이전 단계와 같습니다. 그런 다음 라인을 업데이트합니다. 갱신된 로직은 no 열의 순번 = = 레코드 텍스트입니다. 이번 업데이트는 이 행의 Jinyong 열 값을 1 으로 업데이트하는 것입니다. 이렇게 하면 주황색이 됩니다. 바로 그려진 키보드입니다. 이치대로 말하면 이것은 전체 추첨 과정을 완성했고, 나중에 우리는 다음 추첨을 위해 준비할 것이다. 이 버튼은 추첨이 시작될 때 비활성화되기 때문에, 우리는 여기서 추첨 버튼을 다시 활성화해야 합니다. 그런 다음 다시 무작위로 깜박임 횟수를 추출합니다. 로드 시 텍스트 수가 random 함수에 의해 설정되므로 임의 텍스트를 트리거할 때 이벤트를 직접 트리거할 수 있습니다. 이런 식으로 무작위 추첨의 원형 템플릿을 완성했습니다. 나중에 사용할 경우 repeater 테이블에서 직접 경품 정보를 유지 관리하여 상호 작용을 자동으로 생성할 수 있습니다. 빠르고 편리하지 않나요? 위의 내용은 "Axure 무작위 추첨의 원형 효과를 만드는 방법" 입니다. 나는 이미 관련 내용을 설명했으니, 너에게 도움이 되었으면 좋겠다! Axure 프로토타입 디자인을 배우고, 자습서는 많은 것을 두려워하지 않고, 내용은 세부 사항을 두려워하지 않으며, Axure 문장 등을 더 많이 볼 수 있습니다 ~ 앞으로 제품 매니저의 일을 하고 싶다면 Axure 를 배우고 익히는 것이 절대적으로 필요합니다! Axure 를 배우면 Axure 자율 학습 비디오 수업과 교육 과정을 선택할 수 있습니다. 체험을 배워볼까 ~