Dodawanie efektów rozmycia w systemie iOS

Polish (Polski) translation by Władysław Łucyszyn (you can also view the original English article)

Wprowadzenie

W przypadku iOS 7 zaobserwowaliśmy zmianę w paradygmacie projektowania Apple dla urządzeń mobilnych. Nie tylko przyjęli tak zwaną płaską konstrukcję, Apple również dodał kilka elementów do tego wzoru. Jednym z tych dodatków jest wykorzystanie rozmytych, półprzezroczystych tła, aby przekazać pojęcie głębi i kontekstu. Na przykład przejęcie Centrum kontroli, rozmywa zawartość widoku za tym, jak zostanie przyciągnięty do góry. Daje to użytkownikowi wrażenie, że jest on umieszczony nad inną treścią na ekranie i zasługuje na skupienie. Czyni to bez utraty przez użytkownika informacji o tym, gdzie znajduje się w aplikacji.

Mimo, że rozmycie i przezroczystość są używane w systemie operacyjnym na iOS 7, SDK iOS nie zapewnia nam żadnych interfejsów API, aby osiągnąć podobny efekt. W tym samouczku omówię kilka metod tworzenia niewyraźnych widoków, tworząc przykładową aplikację pokazaną poniżej.

Nasza przykładowa aplikacja będzie miała widok na dole, który można odkryć, wyciągając go. Widok jest półprzezroczysty i rozmywa zawartość znajdującą się pod nim w hierarchii widoku, podobnie jak w Centrum sterowania na iOS 7.

1. Konfiguracja projektu

Przegląd

Aplikacja, którą będziemy budować, wyświetli zdjęcie wraz z nazwiskiem i autorem zdjęcia, wyświetlonymi w białym kółku. W dolnej części ekranu pojawi się mały, prostokątny widok, który rozmywa zdjęcie, a który można przeciągnąć, aby wyświetlić dodatkowe informacje o zdjęciu.

Zakładam, że już wiesz, jak pracować z podstawowymi elementami interfejsu użytkownika, takimi jak widoki, widoki obrazów i przewijane widoki. W tym samouczku skoncentrujemy się na hierarchii widoku i widokach potrzebnych do stworzenia efektu rozmycia.

Spójrz na powyższy obraz. Odciąga hierarchię widoków, tworząc efekt rozmycia, którego szukamy. Kluczowymi komponentami są: Widok tła:

Background View: wyświetla zdjęcie i kredyty. 2. Tworzenie interfejsu użytkownika
Niewyraźny obraz: ten widok zawiera rozmytą wersję zawartości widoku w tle. Wyświetl maskę: Maska widoku jest nieprzezroczystym widokiem, którego użyjemy do zamaskowania rozmytego obrazu.
Wyświetl maskę: Maska widoku jest nieprzezroczystym widokiem, którego użyjemy do zamaskowania rozmytego obrazu.
Przewiń widok: widok przewijania jest widokiem zawierającym dodatkowe informacje o zdjęciu. Przesunięcie widoku przewijania służy do zwiększania lub zmniejszania wysokości widoku maski. Spowoduje to, że zamazany obraz pojawi się w odpowiedzi na przewijanie widoku przewijania.

Zasoby

Wszystkie obrazy, frameworki i inne pliki niezbędne do tego samouczka znajdują się w plikach źródłowych tego amouczka. Sklonuj repozytorium z GitHub lub pobierz pliki źródłowe, aby kontynuować.

2. Tworzenie interfejsu użytkownika

1. Przegląd

Otwórz RootViewController.m w Xcode i spójrz na jego metodę loadView. Możesz uzyskać widok z lotu ptaka, jak układany jest interfejs użytkownika, patrząc na implementację tej metody. W naszej aplikacji są trzy główne subviews:

Widok nagłówka: Wyświetla nazwę aplikacji
Widok zawartości: Wyświetla zdjęcie i kredyty
Widok przewijania: zawiera dodatkowe informacje na przewijanym niewyraźnym widoku

Zamiast tłoku metody loadView przy inicjowaniu i konfigurowaniu subskrybentów, do ciężkiego podnoszenia używane są metody pomocnicze:

// content view
[self.view addSubview:[self createContentView]];
    
// header view
[self.view addSubview:[self createHeaderView]];
    
// scroll view
[self.view addSubview:[self createScrollView]];

2. Tworzenie widoku nagłówka

Widok nagłówka zawiera półprzezroczysty prostokąt i etykietę tekstową z nazwą aplikacji.

- (UIView *)createHeaderView
{
    UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 60)];
    headerView.backgroundColor = [UIColor colorWithRed:229/255.0 green:39/255.0 blue:34/255.0 alpha:0.6];
    
    UILabel *title = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 40)];
    title.text = @"Dynamic Blur Demo";
    ...
    [headerView addSubview:title];
    
    return headerView;
}

3. Tworzenie widoku treści Widok

Widok treści wyświetla zdjęcie, a także zawiera kredyty fotograficzne w białym kółku.

- (UIView *)createContentView
{
    UIView *contentView = [[UIView alloc] initWithFrame:self.view.frame];
    
    // Background image
    UIImageView *contentImage = [[UIImageView alloc] initWithFrame:contentView.frame];
    contentImage.image = [UIImage imageNamed:@"demo-bg"];
    [contentView addSubview:contentImage];
    
    // Photo credits
    UIView *creditsViewContainer = [[UIView alloc] initWithFrame:CGRectMake(self.view.frame.size.width/2 - 65, 335, 130, 130)];
    metaViewContainer.backgroundColor = [UIColor whiteColor];
    metaViewContainer.layer.cornerRadius = 65;
    [contentView addSubview:creditsViewContainer];
    
    UILabel *photoTitle = [[UILabel alloc] initWithFrame:CGRectMake(0, 54, 130, 18)];
    photoTitle.text = @"Peach Garden";
    ...
    [metaViewContainer addSubview:photoTitle];
    
    UILabel *photographer = [[UILabel alloc] initWithFrame:CGRectMake(0, 72, 130, 9)];
    photographer.text = @"by Cas Cornelissen";
    ...
    [metaViewContainer addSubview:photographer];
    
    return contentView;
}

4. Tworzenie widoku przewijania

Widok przewijania zawiera dodatkowe informacje o zdjęciu i jego rozmytej wersji. Widok przewijania jest około dwa razy dłuższy niż ekran, a dolna część zawiera widok tekstu i widok obrazu. Po włączeniu stronicowania w widoku przewijania zawartość widoku przewijania zostanie przyciągnięta do górnej lub dolnej części widoku, w zależności od przesunięcia widoku przewijania.

- (UIView *)createScrollView
{
    UIView *containerView = [[UIView alloc] initWithFrame:self.view.frame];
    
    blurredBgImage = [[UIImageView  alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 568)];
    [blurredBgImage setContentMode:UIViewContentModeScaleToFill];
    [containerView addSubview:blurredBgImage];
    
    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
    scrollView.contentSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.height*2 - 110);
    scrollView.pagingEnabled = YES;
    ...
    [containerView addSubview:scrollView];
    
    UIView *slideContentView = [[UIView alloc] initWithFrame:CGRectMake(0, 518, self.view.frame.size.width, 508)];
    slideContentView.backgroundColor = [UIColor clearColor];
    [scrollView addSubview:slideContentView];
    
    UILabel *slideUpLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 6, self.view.frame.size.width, 50)];
    slideUpLabel.text = @"Photo information";
    ...
    [slideContentView addSubview:slideUpLabel];
    
    UIImageView *slideUpImage = [[UIImageView alloc] initWithFrame:CGRectMake(self.view.frame.size.width/2 - 12, 4, 24, 22.5)];
    slideUpImage.image = [UIImage imageNamed:@"up-arrow.png"];
    [slideContentView addSubview:slideUpImage];
    
    UITextView *detailsText = [[UITextView alloc] initWithFrame:CGRectMake(25, 100, 270, 350)];
    detailsText.text = @"Lorem ipsum ... laborum";
    ...
    [slideContentView addSubview:detailsText];
    
    return containerView;
}

3. Robienie migawki

Aby zamazać widok, najpierw musimy zrobić zrzut jego zawartości i przygotować go w formie obrazu. Możemy wtedy zamazać obraz i użyć go jako tła innego widoku. Najpierw zobaczmy, jak możemy zrobić migawkę zawartości obiektu UIView.

W systemie iOS 7 firma Apple dodała nową metodę do UIView do robienia migawek zawartości widoku, drawViewHierarchyInRect: afterScreenUpdates :. Ta metoda wykonuje migawkę zawartości widoku, w tym wszelkich zawartych w nim subskrybentów.

Zdefiniujmy metodę w klasie ViewController, która akceptuje obiekt UIView i zwraca UIImage, migawkę zawartości widoku.

- (UIImage *)takeSnapshotOfView:(UIView *)view
{
    UIGraphicsBeginImageContext(CGSizeMake(view.frame.size.width, view.frame.size.height));
    [view drawViewHierarchyInRect:CGRectMake(0, 0, view.frame.size.width, view.frame.size.height) afterScreenUpdates:YES];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return image;
}

Krok 1: Rozpocznij nowy kontekst obrazu

Kontekst obrazu to kontekst graficzny oparty na bitmapach, który można wykorzystać do rysowania i manipulowania obrazami. Nowa metoda UIView drawViewHierarchyInRect: afterScreenUpdates: rasteryzuje UIView i rysuje jego zawartość do bieżącego kontekstu obrazu.

Oznacza to, że zanim nazwiemy tę metodę, najpierw musimy utworzyć nowy kontekst obrazu, wywołując UIGraphicsBeginImageContext, przekazując wymagany rozmiar dla kontekstu obrazu.

Krok 2: Zrób migawkę

Po skonfigurowaniu kontekstu obrazu możemy wywołać metodę drawViewHierarchyInRect:afterScreenUpdates: view. Drugi argument określa, czy migawka powinna zawierać bieżącą zawartość widoku, czy musi uwzględniać wszelkie ostatnie zmiany przed zrobieniem migawki.

Krok 3: Utwórz obraz z kontekstu obrazu

Możemy uzyskać zawartość kontekstu obrazu, migawkę widoku, poprzez wywołanie UIGraphicsGetImageFromCurrentImageContext. Ta funkcja zwraca obiekt UIImage.

Krok 4: Koniec kontekstu obrazu

Po utworzeniu migawki usuwamy kontekst graficzny ze stosu, wywołując UIGraphicsEndImageContext.

4. Zamazywanie migawki

Po utworzeniu migawki możemy ją zamazać za pomocą wielu technik. W tym samouczku omówię trzy techniki:

rozmycie w ramach Core Image
rozmycie za pomocą struktury GPUImage Brada Larsona
rozmycie za pomocą kategorii UIImage + ImageEffects firmy Apple

Opcja 1: Obraz podstawowy

Core Image to framework przetwarzania obrazu opracowany i utrzymywany przez firmę Apple. Wykorzystuje ścieżkę renderowania GPU lub procesora do przetwarzania obrazów w czasie zbliżonym do rzeczywistego.

Wykorzystuje ścieżkę renderowania GPU lub procesora do przetwarzania obrazów w czasie zbliżonym do rzeczywistego.

CIGaussianBlur jest jednym z filtrów zawartych w Core Image Framework i może być używany do rozmycia obrazów. Zamazanie obrazu za pomocą Core Image jest dość łatwe, jak widać poniżej.

- (UIImage *)blurWithCoreImage:(UIImage *)sourceImage
{
    CIImage *inputImage = [CIImage imageWithCGImage:sourceImage.CGImage];
    
    // Apply Affine-Clamp filter to stretch the image so that it does not
    // look shrunken when gaussian blur is applied
    CGAffineTransform transform = CGAffineTransformIdentity;
    CIFilter *clampFilter = [CIFilter filterWithName:@"CIAffineClamp"];
    [clampFilter setValue:inputImage forKey:@"inputImage"];
    [clampFilter setValue:[NSValue valueWithBytes:&transform objCType:@encode(CGAffineTransform)] forKey:@"inputTransform"];
    
    // Apply gaussian blur filter with radius of 30
    CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"];
    [gaussianBlurFilter setValue:clampFilter.outputImage forKey: @"inputImage"];
    [gaussianBlurFilter setValue:@30 forKey:@"inputRadius"];
    
    CIContext *context = [CIContext contextWithOptions:nil];
    CGImageRef cgImage = [context createCGImage:gaussianBlurFilter.outputImage fromRect:[inputImage extent]];
    
    // Set up output context.
    UIGraphicsBeginImageContext(self.view.frame.size);
    CGContextRef outputContext = UIGraphicsGetCurrentContext();
    
    // Invert image coordinates
    CGContextScaleCTM(outputContext, 1.0, -1.0);
    CGContextTranslateCTM(outputContext, 0, -self.view.frame.size.height);
    
    // Draw base image.
    CGContextDrawImage(outputContext, self.view.frame, cgImage);
    
    // Apply white tint
    CGContextSaveGState(outputContext);
    CGContextSetFillColorWithColor(outputContext, [UIColor colorWithWhite:1 alpha:0.2].CGColor);
    CGContextFillRect(outputContext, self.view.frame);
    CGContextRestoreGState(outputContext);
    
    // Output image is ready.
    UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return outputImage;
}

Przerwijmy powyższy blok kodu:

Najpierw tworzymy obiekt CIImage z obiektu UIImage. Podczas pracy ze strukturą Core Image obrazy są reprezentowane przez obiekty CIImage.
W zależności od promienia rozmycia, zastosowanie rozmycia gaussowskiego na obrazie spowoduje nieznaczne zmniejszenie obrazu. Aby obejść ten problem, nieco rozciągamy obraz, stosując inny filtr, CIAffineClamp, przed zastosowaniem filtru rozmycia Gaussa.
Następnie pobieramy dane wyjściowe i przekazujemy je do filtra CIGaussianBlur wraz z promieniem rozmycia wynoszącym 30.
Możemy pobrać dane wyjściowe, przekonwertować je na obraz CGiużyć go w naszej aplikacji. Dodamy biały odcień do obrazu, aby upewnić się, że opis zdjęcia jest czytelny. Aby dodać biały odcień, dodajemy półprzezroczyste białe wypełnienie nad obrazem. Aby to zrobić, tworzymy nowy kontekst obrazu i wypełniamy go białym kolorem o wartości alpha 0.2.
Jak widzieliśmy wcześniej, otrzymujemy obiekt UIImage z kontekstu obrazu i usuwamy kontekst obrazu.

Opcja 2: GPUImage

GPUImage to open-source framework iOS do przetwarzania obrazu i wideo, stworzony i utrzymywany przez Brada Larsona. Zawiera zbiór filtrów przyspieszanych przez GPU, które można zastosować do obrazów, kamer wideo na żywo i filmów.

Struktura GPUImage jest zawarta w plikach źródłowych tego samouczka, ale dodanie struktury do własnych projektów jest bardzo proste:

Zacznij od pobrania frameworka lub sklonowania repozytorium z GitHub.
Otwórz okno terminala, przejdź do folderu GPUImage i uruchom skrypt budowania build.sh aby skompilować strukturę.
Skopiuj GPUImage.framework z folderu kompilacji do folderu projektu, a następnie przeciągnij i upuść go do Project Navigatora.
Następnie możesz użyć struktury GPUImage w swoim projekcie, importującnagłówki frameworków, #import .

Struktura GPUImage zawiera filtry podobne do tych w Core Image Framework. Do naszej przykładowej aplikacji interesują nas dwa filtry: GPUImageGaussianBlurFilter i GPUImageiOSBlurFilter.

- (UIImage *)blurWithGPUImage:(UIImage *)sourceImage
{
    // Gaussian Blur
    GPUImageGaussianBlurFilter *blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
    blurFilter.blurRadiusInPixels = 30.0;
    
    return [blurFilter imageByFilteringImage: sourceImage];
}

Jak widać, filtry GPUImage są łatwiejsze w użyciu niż filtry Core Image. Po zainicjowaniu obiektu filtru wystarczy, że skonfigurujesz filtr i dostarczysz mu obraz, do którego filtr ma zostać zastosowany. Metoda imageByFilteringImage: zwraca obiekt UIImage.

Zamiast klasy GPUImageGaussianblur możesz również użyć klasy GPUImageiOSblur, jak na przykład:

1	// iOS Blur
2	GPUImageiOSBlurFilter *blurFilter = [[GPUImageiOSBlurFilter alloc] init];
3	blurFilter.blurRadiusInPixels = 30.0;

Klasa GPUImageiOSblur powiela efekt rozmycia widoczny w Centrum sterowania na iOS 7.

Opcja 3: `UIImage + ImageEffects`

Podczas zeszłorocznego WWDC Apple wygłosił wykład na temat efektów i technik Core Image, w których przedstawił kategorię na temat UIImage o nazwie ImageEffects. Kategoria ImageEffects wykorzystuje wysoce wydajną platformę przetwarzania obrazu VImage firmy Apple, stanowiącą część struktury Accelerate, do wykonywania niezbędnych obliczeń. Dzięki temu jest to szybki i łatwy sposób na rozmycie w systemie iOS.

Kategoria dodaje następujące metody do klasy UIImage:

applyLightEffect
applyExtraLightEffect
applyDarkEffect
applyTintEffectWithColor:
applyTintEffectWithColor:

applyBlurWithRadius: tintColor: saturationDeltaFactor: maskImage: Metoda applyBlurWithRadius: tintColor: saturationDeltaFactor: maskImage: akceptuje wiele argumentów, które umożliwiają dostrojenie operacji zamazywania.

Możesz pobrać przykładowy projekt Apple ImageEffects ze strony dewelopera firmy Apple i użyć go w swoich projektach.

#import "UIImage+ImageEffects.h"

...

- (UIImage *)blurWithImageEffects:(UIImage *)image
{
    return [image applyBlurWithRadius:30 tintColor:[UIColor colorWithWhite:1 alpha:0.2] saturationDeltaFactor:1.5 maskImage:nil];
}

5. Maskowanie zamazanego obrazu

W przykładowej aplikacji wygląda to tak, jakbyśmy dynamicznie zacierały zdjęcie, ale tak nie jest. Używamy małej sztuczki zwanej maskowaniem. Zamiast ciągłego robienia migawek i rozmycia ich w celu uzyskania pożądanego efektu, robimy tylko jedną migawkę, rozmazujemy ją i używamy w połączeniu z maską.

Jak pokazano na rysunku na początku tego samouczka, wyrównujemy rozmazany widok do widoku tła poniżej. Następnie tworzymy kolejny widok o wysokości 50 punktów i nieprzezroczystym tle i umieszczamy go na dole ekranu. Używamy tego widoku do zamaskowania zamazanego obrazu.

1	blurredBgImage.layer.mask = bgMask.layer;

Następnie aktualizujemy ramkę widoku maski podczas przewijania widoku przewijania. Aby to zrobić, implementujemy jedną z delegowanych metod protokołu UIScrollViewDelegate, scrollViewDidScroll :, i aktualizujemy ramkę maski w odniesieniu do pionowego przesunięcia zawartości widoku przewijania.

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    bgMask.frame = CGRectMake(bgMask.frame.origin.x,
                              self.view.frame.size.height - 50 - scrollView.contentOffset.y,
                              bgMask.frame.size.width,
                              bgMask.frame.size.height + scrollView.contentOffset.y);
}

Aktualizując maskę, wydaje się, że dynamicznie zamazywamy zdjęcie poniżej widoku przewijania. to jest to. Masz teraz piękny efekt rozmycia, podobny do tego, który widzisz w Centrum sterowania na iOS

6. Wydajność

Mając na uwadze powyższe techniki, możesz zastanawiać się, który z nich jest najlepszy pod względem wydajności. Aby pomóc Ci podjąć decyzję, przeprowadziłem testy na iPhone 5S i 5C. Spójrz na poniższe wykresy. Te wykresy mówią nam, co następuje:

Te wykresy mówią nam, co następuje:

Środowisko GPUImage wykonuje najwolniejsze działanie w iPhone 5C ze względu na wolniejszy procesor graficzny. Nie jest to zaskakujące, ponieważ framework opiera się głównie na GPU.
Kategoria ImageEffects działa najlepiej na obu urządzeniach. Interesujące jest również to, że czas potrzebny na rozmycie obrazu zwiększa się wraz z promieniem rozmycia.

Podczas gdy rozmycie zdjęć nigdy nie trwało dłużej niż 220 ms w telefonie iPhone 5S, iPhone 5C wymagał do 1,3 s wykonania tego samego zadania. To wyraźnie pokazuje, że efekty rozmycia powinny być używane mądrze i skąpo.

Aby zredukować czas potrzebny na rozmycie obrazu, możemy zmniejszyć rozmiar migawki, na którą stosujemy filtr rozmycia. Ponieważ wykonujemy rozmycie, a dokładniejsze szczegóły obrazu nie będą widoczne, możemy zmniejszyć obraz bez problemów. Aby wykonać mniejszą migawkę, aktualizujemy implementację metody takeSnapshotOfView:

- (UIImage *)takeSnapshotOfView:(UIView *)view
{
    CGFloat reductionFactor = 1.25;
    UIGraphicsBeginImageContext(CGSizeMake(view.frame.size.width/reductionFactor, view.frame.size.height/reductionFactor));
    [view drawViewHierarchyInRect:CGRectMake(0, 0, view.frame.size.width/reductionFactor, view.frame.size.height/reductionFactor) afterScreenUpdates:YES];
    ...
    return image;
}

Aby dodatkowo skrócić czas wymagany do rozmycia migawki, możemy użyć alternatywnych technik rozmycia, takich jak rozmycie pudła. Mimo że wynik będzie inny niż rozmycie gaussowskie, rozmycie obrazu za pomocą rozmycia w polu zajmie mniej czasu.

Wniosek

Blur jest zdecydowanie doskonałym dodatkiem do projektowania interfejsu użytkownika na iOS. Jednak niezależnie od tego, jak wspaniały wygląda interfejs użytkownika aplikacji, jeśli nie działa on dobrze, efekty rozmycia nie poprawią Twojej aplikacji.

W oparciu o powyższe dane dotyczące wydajności widzimy, że rozmycie jest rzeczywiście kosztownym skutkiem. Ale optymalizując parametry, takie jak promień rozmycia i rozmiar obrazu, wybierając odpowiednią technikę zamazywania i używając kilku sztuczek, możemy osiągnąć bardzo interesujące efekty bez uszczerbku dla wydajności aplikacji.

W systemie iOS 8 firma Apple wprowadziła interfejs UIVisualEffectView, który pozwala programistom bardzo łatwo zastosować efekty rozmycia i dynamiki do widoków. Jeśli nie możesz czekać do oficjalnego wydania systemu iOS 8, możesz przetestować te efekty, pobierając wersję beta kodu Xcode 6.