Jak zastosować transformację perspektywy do UIView?

Chcę wykonać transformację perspektywy na UIView (np. Widoczne w coverflow)

Czy ktoś wie, czy jest to możliwe?

Badałem użycie CALayeri przeglądałem wszystkie pragmatyczne podcasty programisty Core Animation, ale nadal nie jestem pewien, jak stworzyć taką transformację na iPhonie.

Każda pomoc, wskaźniki lub przykładowe fragmenty kodu byłyby bardzo mile widziane!

Jak powiedział Ben, będziesz musiał pracować z UIView'swarstwą, używając CATransform3Ddo wykonania layer's rotation. Sztuką dostać perspektywiczny działa, jak opisano tutaj , ma bezpośredni dostęp do jednego z matrycą cellso CATransform3D(M34). Matematyka matematyczna nigdy nie była moją rzeczą, więc nie mogę dokładnie wyjaśnić, dlaczego to działa, ale działa. Musisz ustawić tę wartość na wartość ujemną dla początkowej transformacji, a następnie zastosować do tego transformacje obrotu warstw. Powinieneś być również w stanie wykonać następujące czynności:

Cel C

UIView *myView = [[self subviews] objectAtIndex:0];
CALayer *layer = myView.layer;
CATransform3D rotationAndPerspectiveTransform = CATransform3DIdentity;
rotationAndPerspectiveTransform.m34 = 1.0 / -500;
rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0f * M_PI / 180.0f, 0.0f, 1.0f, 0.0f);
layer.transform = rotationAndPerspectiveTransform;

Swift 5.0

if let myView = self.subviews.first {
    let layer = myView.layer
    var rotationAndPerspectiveTransform = CATransform3DIdentity
    rotationAndPerspectiveTransform.m34 = 1.0 / -500
    rotationAndPerspectiveTransform = CATransform3DRotate(rotationAndPerspectiveTransform, 45.0 * .pi / 180.0, 0.0, 1.0, 0.0)
    layer.transform = rotationAndPerspectiveTransform
}

który odbudowuje transformację warstwy od zera dla każdego obrotu.

Pełny przykład tego (z kodem) można znaleźć tutaj , gdzie zaimplementowałem rotację dotykową i skalowanie na kilku CALayers, na podstawie przykładu Billa Dudneya. Najnowsza wersja programu, znajdująca się na samym dole strony, implementuje tego rodzaju operacje perspektywiczne. Kod powinien być w miarę łatwy do odczytania.

sublayerTransformOdnieść w swojej odpowiedzi to przekształcać, który jest stosowany do podwarstwy twoich UIView's CALayer. Jeśli nie masz podwarstw, nie przejmuj się tym. Używam sublayerTransform w moim przykładzie po prostu dlatego, że są dwie CALayerszawarte w jednej warstwie, którą obracam.

Można używać tylko transformacji Core Graphics (tylko kwarc, 2D) bezpośrednio zastosowanych do właściwości transformacji UIView. Aby uzyskać efekty w ukryciu okładki, musisz użyć CATransform3D, które są stosowane w przestrzeni 3D, dzięki czemu możesz uzyskać pożądany widok perspektywiczny. Możesz zastosować CATransform3Ds tylko do warstw, a nie widoków, więc w tym celu musisz przełączyć się na warstwy.

Sprawdź próbkę „CovertFlow” dostarczoną z Xcode. Jest to tylko Mac (tj. Nie dla iPhone'a), ale wiele koncepcji dobrze się przenosi.

Aby dodać do odpowiedzi Brada i podać konkretny przykład, pożyczam od własnej odpowiedzi w innym poście na podobny temat. W mojej odpowiedzi utworzyłem prosty plac zabaw Swift, z którego można pobierać i bawić się , gdzie demonstruję, jak tworzyć perspektywiczne efekty UIView za pomocą prostej hierarchii warstw, i pokazuję różne wyniki między używaniem transforma sublayerTransform. Sprawdź to.

Oto niektóre zdjęcia z posta:

Dokładny efekt karuzeli można uzyskać za pomocą iCarousel SDK.

Możesz uzyskać natychmiastowy efekt Cover Flow na iOS, korzystając ze wspaniałej i bezpłatnej biblioteki iCarousel. Możesz go pobrać ze strony https://github.com/nicklockwood/iCarousel i dość łatwo upuścić do projektu Xcode, dodając nagłówek pomostowy (napisany w Objective-C).

Jeśli nie dodałeś wcześniej kodu Objective-C do projektu Swift, wykonaj następujące kroki:

• Pobierz iCarousel i rozpakuj go
• Przejdź do rozpakowanego folderu, otwórz jego podfolder iCarousel, a następnie wybierz iCarousel.h i iCarousel.m i przeciągnij je do nawigacji projektu - to lewe okienko w Xcode. Tuż poniżej Info.plist jest w porządku.
• Zaznacz „Skopiuj elementy w razie potrzeby”, a następnie kliknij przycisk Zakończ.
• Xcode wyświetli komunikat „Czy chcesz skonfigurować nagłówek mostkujący Objective-C?” Kliknij „Utwórz nagłówek pomostowy”. W swoim projekcie powinieneś zobaczyć nowy plik o nazwie YourProjectName-Bridging-Header.h.
• Dodaj ten wiersz do pliku: #import „iCarousel.h”
• Po dodaniu iCarousel do swojego projektu możesz zacząć z niego korzystać.
• Upewnij się, że jesteś zgodny zarówno z protokołami iCarouselDelegate, jak i iCarouselDataSource.

Przykładowy kod Swift 3:

    override func viewDidLoad() {
      super.viewDidLoad()
      let carousel = iCarousel(frame: CGRect(x: 0, y: 0, width: 300, height: 200))
      carousel.dataSource = self
      carousel.type = .coverFlow
      view.addSubview(carousel) 
    }

   func numberOfItems(in carousel: iCarousel) -> Int {
        return 10
    }

    func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
        let imageView: UIImageView

        if view != nil {
            imageView = view as! UIImageView
        } else {
            imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 128, height: 128))
        }

        imageView.image = UIImage(named: "example")

        return imageView
    }