#4 Switcher w Axure

Przed Wami kolejna odsłona tutoriala Axure. Linki do poprzednich części znajdziesz pod wpisem. Dziś chcę Ci pokazać jak zrobić animowany przycisk, prawie tak piękny jak switcher Apple:

Potrzebujemy mieć dwa panele dynamiczne

• Pierwszy będzie odpowiedzialny za animacje tła – ON / OFF,
• oraz drugi – guzik, który będzie przeskakiwał z lewej na prawą.

Wyciągamy dwa prostokąty – zmieniamy im kształt (tip: wyciągając Rectangle mała kropka na górze prostokąta podpowiada nam o zmianie na dowolny inny kształt obiektu – wybieram koło oraz strzałeczka zaokrągla nam rogi).

Teraz podrasuję wygląd.

I z każdego elementu stworzę Dynamic Panel:

Oba będą mieć po 2 stany (OFF i ON)

nasz przycisk ma się przesuwać, więc na początku na State 1 będzie on po lewej stornie, a State 2 – włączony – przesunie nam guzik na prawo:

na głównej stronie mamy taki widok:

Teraz animacja.
logika: klikając w button switcher chce by oba przyciski zmieniły stan. Czyli OnClick na button – zmień stan obu panelom (switcher z animacja fade, a button ma przejechać w prawo – slide right).

teraz w drugą stronę – klikając w button w drugim stanie, chcę by wróciły oba panele do State 1. (switcher znów z animacją fade, button – slide left).

a oto efekt końcowy:

Tutorial Axure

Tutaj znajdziesz pozostałe odcinki naszego tutoriala Axure.