po wydaniu iOS 7 (i iOS 8), animacje i efekty ruchu stały się centralne w projektowaniu aplikacji zarówno od Apple, jak i programistów zewnętrznych. iOS 7 wprowadził płaski, minimalny projekt do aplikacji, co nieuchronnie spowodowało, że niektóre aplikacje mają podobny interfejs użytkownika. Aby odróżnić swoje aplikacje od innych aplikacji, programiści wykorzystali takie funkcje, jak animacje i efekty ruchu, aby wyróżnić swoje aplikacje.

animacje są używane nie tylko do odróżniania aplikacji, ale także mogą poprawić ogólne wrażenia użytkownika. Aby uzyskać świetne przykłady wykorzystania animacji do poprawy UX, powinieneś przyjrzeć się, w jaki sposób Apple używa animacji w swoich aplikacjach. Na przykład w aplikacji Zdjęcia Po wybraniu zdjęcia z kolekcji zdjęcie rozszerza się od wybranego, a po zamknięciu kurczy się z powrotem do wybranego zdjęcia. Dodaje to do nawigacji w aplikacji, ponieważ pozwala dokładnie wiedzieć, gdzie byłeś, jeśli przeglądasz wiele zdjęć.

Papier Facebooka również pięknie wykorzystuje animacje, aby dodać do ogólnego doświadczenia użytkownika aplikacji. Wybierz artykuł do przeczytania, odwracając go. To działanie, fakt, że artykuł rozszerza się od wersji miniatury, sugeruje, że robiąc coś odwrotnego, tj. odwracając artykuł w dół, zmniejszyłoby go z powrotem do miniatury. Tutaj animacja służy do przekazania, jak działa aplikacja, a nawet pierwszy użytkownik aplikacji wkrótce będzie w stanie przyjąć założenia dotyczące jej użytkowania i dowiedzieć się o nawigacji bez potrzeby samouczka.

nie tylko animacje dodają do doświadczenia użytkownika aplikacji, ale mogą być tym, co zachwyca i imponuje użytkownikom, gwarantując powtarzanie użycia zamiast odinstalowywania aplikacji na lepszą z App Store.

istnieje wiele sposobów włączania animacji w aplikacjach, niektóre z nich są za pomocą dynamiki UIKit, animacji warstw, przejść kontrolera widoku lub za pomocą biblioteki innych firm, takich jak Facebook Pop library lub jnwspringanimation framework.

w tym samouczku przyjrzymy się prostym animacjom widoku. Możesz pobrać projekt starter, który jest pojedynczą aplikacją widokową z widokiem tabeli, która zawiera listę przykładów przedstawionych w samouczku. Będę używać tego, gdy przejdziemy do części przykłady samouczka, zamiast zaczynać od zera.

samouczek zaczyna się od podsumowania interfejsów API używanych do animowania widoków, a kończy na przykładach, które pokazują użycie niektórych interfejsów API w aplikacji.

podstawowe animacje widoków

tworzenie animacji na Twoich widokach to kwestia zmiany właściwości na nich i umożliwienia uikitowi automatycznej animacji. Właściwości, które zmieniamy, są oznaczone jako Animowalne.

poniższa lista pokazuje właściwości animowane.

  • center
  • alpha
  • frame
  • bounds
  • transform
  • backgroundColor
  • contentStretch

znajdziesz że wszystkie animacje wymagają zmiany jednej lub więcej z powyższych właściwości.

w przypadku prostych animacji widoku UIKit udostępnia następujące interfejsy API, za pomocą których można animować widoki na ekranie.

pierwszy zajmuje dwa parametry-wartość czasu trwania animacji w sekundach i zamknięcie, w którym określasz właściwości, które chcesz zmienić. UIKit pobiera pierwotny stan widoku i tworzy płynne przejście od tego stanu do stanu końcowego zgodnie z tym, co określono w zamknięciu animacji.

pozostałe dwa API są podobne do pierwszego, ale przyjmują dodatkowe parametry, które dodają więcej konfiguracji do animacji. Drugi to zamknięcie, którego możesz użyć do określenia innej animacji, którą chcesz wykonać po pierwszej, lub do oczyszczenia interfejsu, na przykład do usunięcia widoku z hierarchii widoków, gdy inny widok zostanie animowany na scenie.

trzecie API pobiera dodatkowe dwa parametry-opóźnienie, czyli czas oczekiwania przed rozpoczęciem animacji oraz opcje, stałą UIViewAnimationOptions, która wskazuje, w jaki sposób chcesz wykonywać animacje. Poniżej przedstawiono dostępne opcje.

animacje sprężynowe

animacje sprężynowe starają się modelować zachowanie prawdziwej sprężyny, ponieważ gdy widok jest przesuwany z jednego punktu do drugiego, odbija się/oscyluje pod koniec, zanim osiądzie na pozycji.

Poniżej znajduje się blok metody, którego używamy do animacji wiosennych.

  • UIView.animateWithDuration (_:, delay:, usingspringwithdemping:, initialSpringVelocity:, options:, animations:, completion:)

powyższe jest podobne do metod, na które patrzyliśmy wcześniej, z wyjątkiem dwóch nowych parametrów-usingspringwithdemping i initialSpringVelocity. Tłumienie to wartość od 0 do 1, która określa, jak bardzo widok odbija się pod koniec animacji. Im wartość jest bliższa 1, tym mniej odbija się. initialSpringVelocity jak sama nazwa mówi, określa prędkość początkową animacji. To decyduje o sile rozpoczęcia animacji. Jeśli chcesz, aby zaczęło się energicznie, a następnie ustawić większą wartość, jeśli chcesz płynną animację, to można ustawić wartość na 0.

animacje klatek kluczowych

animacje klatek kluczowych umożliwiają ustawianie różnych etapów animacji. Można grupować różne animacje, które mają pewne wspólne właściwości, ale nadal można nimi sterować oddzielnie.

zamiast animacji, która porusza się po ścieżce, UIKit wykona różne etapy animacji.

interfejsy API animacji klatek kluczowych są następujące.

powyższe dwie metody są używane razem, druga zostaje zagnieżdżona w zamknięciu animacji pierwszej.

pierwsza metoda ustawia ogólną konfigurację animacji, na przykład czas jej trwania, opóźnienie i jej opcje. Następnie należy zdefiniować jedną lub więcej z drugiej metody (klatek) wewnątrz zamknięcia animacji, aby ustawić różne etapy animacji.

względny czas rozpoczęcia i względny czas trwania każdej klatki to wartość od 0 do 1, która wyraża procentowy czas trwania animacji.

wyświetl przejścia

wyświetl przejścia są używane, gdy chcesz dodać nowy widok do hierarchii widoków lub usunąć widok z hierarchii widoków.

interfejsy API używane do tworzenia przejść widoków to

pierwszy z nich służy do wprowadzenia widoku do hierarchii widoków. Metoda przyjmuje podobne parametry, jak widzieliśmy w innych metodach animacji.

drugi służy do pobierania jednego widoku z hierarchii widoku i umieszczania nowego widoku na jego miejscu.

przykłady

przyjrzymy się teraz kilku przykładom, które wykorzystują niektóre z powyższych wywołań API do animowania widoków w danym projekcie starter.

przykład I

jeśli uruchomisz projekt, zobaczysz widok tabeli z listą przykładów, które będziemy przerabiać. Wybierz przykład I na liście i powinieneś zobaczyć ekran logowania aplikacji z polami nazwy użytkownika i hasła oraz przyciskiem logowania.

chcemy, aby były one animowane na ekranie po uruchomieniu aplikacji.

aby rozpocząć, ukryjemy widoki przed wzrokiem, gdy Widok pojawi się po raz pierwszy. Przed układem automatycznym byłaby to prosta kwestia zmiany pozycji określonego widoku w kodzie, ale ponieważ ustawiliśmy ograniczenia układu automatycznego na widokach w pliku scenorysu, będziemy musieli zmienić ograniczenia w kodzie, co zmieni pozycję widoku.

najpierw musimy uzyskać odniesienie do ograniczeń, które zmienimy. Otwórz plik storyboard. Znajdź następujące ograniczenia w scenie przykład I.

Otwórz Edytor pomocniczy i upewnij się, że jest to ExampleIViewController.swift, który pojawia się obok storyboardu na podzielonym ekranie. Przeciągnij z ograniczenia Center X Alignment-View-Username do klasy ExampleIViewController. Utwórz punkt o nazwie centerAlignUsername. Zrób to samo dla Center X Alignment-View-Password i ustaw jego nazwę na centerAlignPassword. Utwórz również wyjście dla przycisku logowania o nazwie loginButton i akcji dla tego samego przycisku i nazwij go login. Upewnij się, że ustawiłeś typ akcji na UIButton. Powinieneś mieć następujący kod.

1
2
3
4
5
6
7

@IBOutlet słaby var centerAlignUsername: NSLayoutConstraint!
@ IBOutlet słaby var centerAlignPassword: NSLayoutConstraint!
@ IBOutlet słaby var loginButton: UIButton!
@IBAction func login (nadawca: UIButton) {
}

w ExampleIViewController.swift dodaje następującą metodę, która jest wywoływana przed wyświetlaniem widoku na ekranie.

to powoduje, że pola nazwy użytkownika i hasła są niewidoczne i ustawia wartość alfa przycisku na 0, co czyni go niewidocznym.

dodaj następującą metodę, która jest wywoływana po wyświetleniu widoku.

tutaj używamy UIView.metoda animateWithDuration (), którą widzieliśmy wcześniej. Dołączamy UIViewAnimationOptions.Opcja CurveEaseOut, która sprawia, że animacja zaczyna się szybko, a następnie zwalnia na końcu. Możesz eksperymentować z różnymi opcjami tutaj. Polecenie-kliknij na UIViewAnimationOptions, aby zobaczyć wszystkie dostępne opcje.

animacja trwa 0,5 sekundy i rozpoczyna się natychmiast. Masz swobodę w czasie trwania, ale nie powinieneś ustawiać tak dużej liczby, aby denerwować użytkowników, gdy animacje w aplikacji wydają się trwać zbyt długo. Zwykle czas trwania jest ustawiony między 0,5 A 0,7 sekundy, ale jak powiedziałem, to nie jest ustawione w kamieniu i masz swobodę ustawiania go na to, co wydaje ci się właściwe.

animacja działa dokładnie odwrotnie niż w viewwillappear(). layoutifneeded () służy do rozmieszczenia widoków natychmiast po ich zmianie. Jeśli go nie uwzględnisz, nie zobaczysz ich animowanych na ekranie, zamiast tego będą po prostu pokazywane w ostatecznej pozycji. Uruchom aplikację, a zobaczysz następujące rzeczy.

powyższe wygląda ciekawiej niż statyczna prezentacja, ale jednocześnie animowane widoki nie dają tak wspaniałego efektu. Zmodyfikuj metodę, jak pokazano poniżej.

Uruchom aplikację, a uzyskana animacja ma widoki animowane na ekranie w różnym czasie. Patrząc na kod widać, że po pierwszym bloku animacji ustawiamy opóźnienie na kolejnych.

na ekranach logowania, gdy logowanie się nie powiedzie, zazwyczaj wyświetlana jest animacja informująca użytkownika, że logowanie się nie powiodło. Czasami odbywa się to jako potrząśnięcie polami tekstowymi lub przyciskiem logowania oraz komunikat, który informuje użytkownika, że logowanie nie powiodło się. Taki efekt dodamy na przycisku logowania za pomocą sprężyn. Zmodyfikuj funkcję login () tak jak pokazano.

powyższe zmienia rozmiar przycisku logowania po naciśnięciu i animuje akcję animacją sprężynową, która spowoduje, że szerokość przycisku rozszerzy się i trochę odbije na końcu przed osiadaniem.

Pobaw się wartością tłumienia. Jeśli ustawisz go na 1, Przycisk rozszerzy się, bez odbijania się na końcu. Możesz również użyć tej samej metody w polach Nazwa użytkownika i hasło. Zamiast pojawiać się na ekranie i po prostu zatrzymywać się na miejscu na końcu, niech będą sprężyste i odbiją się trochę, zanim się uspokoisz.

przykład II

w aplikacji może być konieczne automatyczne zastąpienie obrazu tła widoku, gdy nastąpi jakaś akcja. Można to zrobić w sposób, w którym obraz natychmiast zastępuje inny w widoku, lub można powoli zanikać, aby stworzyć ładne Przejście. Stworzymy ten efekt tutaj. Otwórz ExampleIIViewController.swift i dodać następujące.

tutaj tworzymy widok obrazu i dodajemy go do widoku głównego. Następnie wywołujemy funkcję imageFadeIn (), która tworzy drugi widok z innym obrazem. Dodajemy ten widok nad pierwszym widokiem obrazu i ustawiamy jego Alfę na 0. W bloku animacji animujemy jego wartość alfa, dzięki czemu jest ona widoczna. Następnie używamy zamknięcia uzupełniającego, aby ustawić obraz widoku obrazu na drugi obraz i usuwamy drugi widok obrazu z hierarchii widoku, ponieważ nie jest już potrzebny. Dodałem duże opóźnienie tak, że animacja nie dzieje się w momencie, gdy wybieramy przykład II z widoku tabeli. Czas trwania jest również trochę długi, więc możemy zobaczyć, co dzieje się w demo.

oto efekt.

przykład III

następnie przyjrzymy się animacjom klatek kluczowych. Otwórz Przykładiiiviewcontroller.swift i dodaj do pliku następującą zmienną i funkcje. Skomentowałem kod, aby wyjaśnić każdy krok.

w viewDidLoad() wywołaj funkcję createView (). Dodaj następujące elementy na dole funkcji viewDidLoad ().

1
createView()

po uruchomieniu aplikacji i wybraniu przykładu III z widoku tabeli powinieneś zobaczyć czerwony widok z widokiem obrazu na górze i przyciskiem na środku.

chcemy, aby widok(który od teraz będę nazywał alertView) zmniejszał się i opadał w dół poza widok.

kiedy utworzyliśmy przycisk, dodaliśmy do niego słuchacza. Po naciśnięciu przycisku wywoływana jest funkcja recallert (). Zmodyfikuj funkcję, jak pokazano.

w powyższym kodzie tworzymy klatki, które reprezentują to, czego chcemy dla dwóch etapów animacji widoku. smallFrame zmniejsza się do połowy rozmiaru alertView, utrzymując punkt środkowy, a finalFrame ma pozycję na dole ekranu, poza zasięgiem wzroku.

używamy animacji klatek kluczowych z dwiema klatkami kluczowymi. Pierwszy ustawia klatkę alertView na smallFrame, a drugi na finalFrame. W rezultacie widok alertView zmniejszy się do połowy swojego rozmiaru, a następnie wypadnie z widoku. Zauważ, że umieściłem tak dużą liczbę na czas trwania – 4 sekundy. Możesz to zmienić, chciałem tylko, aby animacja działała w zwolnionym tempie dla demo. Uruchom aplikację i wybierz przykład III.

animacja nie jest taka, jakiej się spodziewaliśmy. Czerwony widok alertView Animate jest widoczny zgodnie z oczekiwaniami, ale skala jego dzieci nie zmienia się. Zmiana ramki rodzica nie powoduje automatycznej zmiany ramek potomnych.

użyjemy funkcji wprowadzonej w iOS 7 o nazwie UIView snapshots, aby naprawić animację. Pozwala to na zrobienie zrzutu UIView wraz z jego hierarchią i renderowanie go do nowego UIView.

w funkcji recallert() Dodaj następujący kod tuż przed kodem animacji klatki kluczowej.

1
2
3
4

let snapshot = alertView.snapshotViewAfterScreenUpdates (false)
migawka.frame = alertView.ramka
widok.addSubview (snapshot)
alertView.removeFromSuperview()

tutaj tworzymy widok migawki i dodajemy go do widoku głównego. Następnie usuwamy alertView z widoku, ponieważ migawka go zastąpi.

Zamień animację klatki kluczowej na następującą.

Uruchom aplikację i po dotknięciu Odrzuć widok (migawka, naprawdę) powinien animować się zgodnie z oczekiwaniami.

przykład IV

przyjrzeliśmy się, jak można animować proste widoki. W tym przykładzie przyjrzymy się, w jaki sposób można animować widok tabeli.

jeśli wybierzesz przykład IV z widoku tabeli, znajdziesz inny widok tabeli z listą elementów w nim. Gdy jest wyświetlany widok tabeli, pozycje listy są już umieszczone na tabeli. Chcemy animować je na widoku, aby stworzyć bardziej interesujący efekt.

Otwórz ExampleIVViewController.swift i dodaj następujące metody.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

override func viewWillAppear (animowany: Bool) {
animateTable()
}
func animateTable () {
tableView.reloadData()
let cells = tableView.visibleCells()
let tableHeight: cgfloat = tableView.granice.rozmiar.wysokość
for i in cells {
let cell: UITableViewCell = i as uitableviewcell
cell.transform = CGAffineTransformMakeTranslation (0, tableHeight)
}
indeks var = 0
for a in cells {
let cell: UITableViewCell = a jako uitableviewcell
UIView.animateWithDuration(1.5, delay: 0.05 * Double (index), usingspringwithdemping: 0.8, initialSpringVelocity: 0, options: nil, animations: {
cell.transform = CGAffineTransformMakeTranslation(0, 0);
}, zakończenie: brak)
indeks += 1
}
}

tutaj, gdy pojawi się widok, wywoływana jest funkcja animateTable (). Przeładowujemy dane widoku tabeli i zapętlamy komórki, które są obecnie widoczne na ekranie i przenosimy każdą z nich na dół ekranu. Następnie powtarzamy wszystkie komórki, które przenieśliśmy na dół ekranu i animujemy je z powrotem do pozycji za pomocą animacji wiosennej.

Uruchom aplikację, a zobaczysz następujące rzeczy.

wniosek

przyjrzeliśmy się różnym interfejsom API, za pomocą których można dodawać animacje do widoków aplikacji. Nie jest to wyczerpujący przewodnik dotyczący animacji w systemie iOS, ale dzięki prostym interfejsom API, na które spojrzeliśmy, możesz tworzyć różne animacje w swoich aplikacjach. Aby zagłębić się w animacje iOS, możesz przyjrzeć się dynamice UIKit, animacjom warstw, przejściom kontrolera widoku, a nawet efektom ruchu. Można również spojrzeć na bibliotekach innych firm, takich jak Facebook Pop i jnwspringanimation framework, które mogą pomóc budować skomplikowane animacje łatwiej.

gotowy projekt można pobrać tutaj.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.