#4 Switcher w Axure | DailyWeb.pl

#4 Switcher w Axure

Opublikowano 3 lata temu -


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:

gif

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).

3

Teraz podrasuję wygląd.

2

I z każdego elementu stworzę Dynamic Panel:

4

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

5 9

6

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:

8

na głównej stronie mamy taki widok:

10

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).

11

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).

12

a oto efekt końcowy:
gif

Tutorial Axure

Tutaj znajdziesz pozostałe odcinki naszego tutoriala Axure.