iOS arrastre en UIView, efecto de tela

swift user-interface

Question

Desde que vi este menú , he estado realmente interesado en descubrir cómo hacerlo. ¿Entonces me pregunto cómo iría arrastrando con un efecto de tela en una vista UIV?

Sé cómo arrastrar elementos, pero ¿cómo se les da el efecto de onda?

(Mejor imagen: http://dribbble.com/shots/899177-Slide-Concept/attachments/98219 )

Answer 1

En resumen: es muy, muy difícil. La antigua aplicación de Classics logró algo en ese sentido utilizando una serie de imágenes de papel lisas pre-renderizadas bajo una simple transformación del contenido de su vista, pero como se puede ver en esas capturas de pantalla (y en la siguiente imagen, tenga en cuenta que el texto en la parte inferior es Todavía haciendo una línea recta, ya que está recibiendo una transformación de perspectiva básica), el efecto fue bastante limitado.

El efecto que se muestra en el diseño de Dribbble es mucho más complicado, ya que en realidad está haciendo una distorsión del contenido de la vista, no solo lo distorsiona como lo hizo Classics; La única forma en la que se me ocurre hacer el efecto exacto en iOS en este momento sería colocar OpenGL y distorsionar el contenido con una malla allí.

Una opción más simple sería usar UIPageViewController, que al menos le brindará un efecto de papel rizado al estilo de iBooks, no es de moda, pero es mucho más fácil que la opción GL.

Answer 2

Hay una reimplementación de código abierto de esto ya.

Esta entrada de blog: Mesh Transforms cubre la CAMeshTransform privada. En lugar de tratar a un CALayer como un simple quad, permite que los CALayers se conviertan en una malla de caras conectadas. Esta clase es cómo Apple ha sido capaz de implementar los efectos de giro de página e iBooks de página.

Sin embargo, la API no tolera la entrada mal formada y Apple la ha mantenido como una API privada.

Si sigues leyendo esa publicación del blog, sin embargo, llegarás a esta sección justo después de que se trate de una API privada.

En el espíritu de CAMeshTransform, creé una BCMeshTransform que copia casi todas las características de la clase original.
...
Sin acceso directo y público al servidor de renderizado Core Animation me vi obligado a usar OpenGL para mi implementación. Esta no es una solución perfecta, ya que presenta algunos inconvenientes que la clase original no tenía, pero parece ser la única opción actualmente disponible.

En efecto, convierte la vista de contenido en una textura OpenGL y luego la muestra. Esto le permite jugar con él como quiera.

Incluyendo así ...

Le animo a ver la aplicación de demostración que hice para BCMeshTransformView. Contiene algunas ideas de cómo se puede usar una transformada de malla para enriquecer la interacción, como mi versión muy simple pero funcional de ese famoso Dribbble .

¿Qué famoso Dribbble? Éste:

Aquí es cómo se ve el ejemplo:

Proyecto de código abierto: https://github.com/Ciechan/BCMeshTransformView
Ejemplo de implementación del efecto de cortina: BCCurtainDemoViewController.m

¿Como funciona?

Establece el BCMeshTransformView con cierta iluminación y perspectiva.

// 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;

Luego, utilizando un UIPanGestureRecognizer, realiza un seguimiento de los toques y utiliza este método para crear una nueva transformación de malla cada vez que se mueve el dedo de los usuarios.

// 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;
}