iOS trascina su UIView, effetto tela

Question

Da quando ho visto this menu drag concept, sono stato davvero interessato a scoprire come realizzarlo. Quindi mi chiedo come farei a trascinarmi con un effetto tessuto in un UIView?

So come trascinare gli oggetti, ma come si fa a dare loro l'effetto a catena?

(Meglio immagine: http://dribbble.com/shots/899177-Slide-Concept/attachments/98219)

Answer 1

Esiste già una reimplementazione open source di questo.

Questo post del blog: Mesh Transforms copre il privato CAMeshTransform. Piuttosto che trattare un CALayer come un semplice quad, consente ai CALayer di essere trasformati in una mesh di facce connesse. Questa classe è il modo in cui Apple è stata in grado di implementare gli effetti di rotazione delle pagine e iBook.

Tuttavia, l'API non tollera affatto input malformati e Apple l'ha mantenuta come API privata.

Se continui a leggere il post di questo blog, arriverete a questa sezione subito dopo che si tratta di un'API privata.

Nello spirito di CAMeshTransform ho creato un BCMeshTransform che copia quasi tutte le funzioni della classe originale.
...
Senza accesso diretto pubblico al server di rendering Core Animation, sono stato costretto a utilizzare OpenGL per la mia implementazione. Questa non è una soluzione perfetta in quanto introduce alcuni inconvenienti che la classe originale non aveva, ma sembra essere l'unica opzione attualmente disponibile.

In effetti esegue il rendering della vista del contenuto in una trama OpenGL e quindi la visualizza. Questo gli permette di scherzare, ma a lui piace.

Compreso come questo ...

vi incoraggio a controllare l'applicazione demo che ho fatto per BCMeshTransformView.Contiene alcune idee su come una trasformazione di mesh può essere utilizzata per arricchire l'interazione, come la mia semplice, ma funzionale presa su that famous Dribbble.

Che famoso Dribbble? Questo uno:

Ecco cosa l'esempio appare come:

progetto open source:https://github.com/Ciechan/BCMeshTransformView
esempio di implementazione dell'effetto tenda:BCCurtainDemoViewController.m

---

Come funziona?

Imposta il BCMeshTransformView con illuminazione e prospettiva.

// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCCurtainDemoViewController.m#L59 
self.transformView.diffuseLightFactor = 0.5; 

CATransform3D perspective = CATransform3DIdentity; 
perspective.m34 = -1.0/2000.0; 
self.transformView.supplementaryTransform = perspective; 

Quindi, utilizzando un UIPanGestureRecognizer rintraccia i tocchi e utilizza questo metodo per costruire una nuova maglia di trasformare ogni volta le mosse utenti delle dita.

// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCCurtainDemoViewController.m#L91 
self.transformView.meshTransform = [BCMutableMeshTransform curtainMeshTransformAtPoint:CGPointMake(point.x + self.surplus, point.y) boundsSize:self.transformView.bounds.size]; 

// From: https://github.com/Ciechan/BCMeshTransformView/blob/master/Demo/BCMeshTransformViewDemo/BCMeshTransform%2BDemoTransforms.m#L14 
+ (instancetype)curtainMeshTransformAtPoint:(CGPoint)point boundsSize:(CGSize)boundsSize 
{ 
    const float Frills = 3; 

    point.x = MIN(point.x, boundsSize.width); 

    BCMutableMeshTransform *transform = [BCMutableMeshTransform identityMeshTransformWithNumberOfRows:20 numberOfColumns:50]; 

    CGPoint np = CGPointMake(point.x/boundsSize.width, point.y/boundsSize.height); 

    [transform mapVerticesUsingBlock:^BCMeshVertex(BCMeshVertex vertex, NSUInteger vertexIndex) { 
     float dy = vertex.to.y - np.y; 
     float bend = 0.25f * (1.0f - expf(-dy * dy * 10.0f)); 

     float x = vertex.to.x; 

     vertex.to.z = 0.1 + 0.1f * sin(-1.4f * cos(x * x * Frills * 2.0 * M_PI)) * (1.0 - np.x); 
     vertex.to.x = (vertex.to.x) * np.x + vertex.to.x * bend * (1.0 - np.x); 

     return vertex; 
    }]; 

    return transform; 
} 

Answer 2

In breve: è davvero, davvero difficile. La vecchia app Classics ha raggiunto qualcosa di simile usando una serie di immagini di carta liscia pre-renderizzate sotto una semplice trasformazione del loro contenuto di visualizzazione, ma come puoi vedere da quegli screenshot (e quello sotto-nota che il testo in fondo è ancora facendo una linea retta, dal momento che sta ottenendo una trasformazione prospettiva di base), l'effetto era abbastanza limitato.

L'effetto mostrato in quel disegno Dribbble è molto più complicato, dal momento che è in realtà facendo un ordito scrunching-up del contenuto della vista, non solo l'inclinazione come Classics ha fatto; l'unico modo in cui posso pensare di fare quell'effetto esatto su iOS al momento sarebbe cadere in OpenGL e distorcere il contenuto con una mesh lì.

Un'opzione più semplice sarebbe quella di utilizzare UIPageViewController, che sarà almeno il vostro bel effetto carta effetto arricciato in stile iBook: non è tessuto, ma è molto più semplice dell'opzione GL.