IOS перетащить UIView, эффект ткани

Ответ 1

Есть повторная реализация этого исходного кода с открытым исходным кодом.

Это сообщение в блоге: Mesh Transforms охватывает частный CAMeshTransform. Вместо того, чтобы рассматривать CALayer как простой квад, он позволяет CALayers превращаться в сетку связанных лиц. Этот класс - это то, как Apple смогла реализовать зависание страницы и эффекты поворота страницы iBooks.

Тем не менее, API не терпит некорректного ввода вообще, и Apple сохранила его как частный API.

Если вы продолжаете читать этот пост в блоге, хотя вы попадете в этот раздел сразу после того, как он станет частным API.

В духе CAMeshTransform я создал BCMeshTransform, который копирует почти каждую функцию исходного класса.
...
Без прямого общего доступа к серверу рендеринга Core Animation я был вынужден использовать OpenGL для моей реализации. Это не идеальное решение, так как оно вводит некоторые недостатки, которые не было у исходного класса, но, по-видимому, это единственный доступный в настоящее время вариант.

В результате он отображает представление контента в текстуру OpenGL, а затем отображает это. Это позволяет ему возиться с ним, как ему нравится.

В том числе...

Я рекомендую вам посмотреть демонстрационное приложение, которое я сделал для BCMeshTransformView. Он содержит несколько идей о том, как преобразование сетки может использоваться для обогащения взаимодействия, как и мой очень простой, но функциональный подход к

Вот как выглядит пример:

Проект с открытым исходным кодом: https://github.com/Ciechan/BCMeshTransformView
Пример Реализация эффекта занавеса: BCCurtainDemoViewController.m

---

Как это работает?

Он устанавливает BCMeshTransformView вверх с некоторым освещением и перспективой.

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

Затем, используя UIPanGestureRecognizer, он отслеживает касания и использует этот метод для создания нового преобразования сетки при каждом перемещении пальца пользователя.

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

Ответ 2

Короче: это действительно, очень сложно. Старое приложение Classics достигло чего-то по этим линиям, используя серию предварительно обработанных гладких бумажных изображений под простым преобразованием их содержимого представления, но как вы можете видеть из этих скриншотов (и один ниже - примечание, что текст внизу все еще делает прямую линию, так как он получает базовое преобразование перспективы), эффект был довольно ограниченным.

Эффект, показанный в этом дизайне Dribbble, намного сложнее, так как он фактически выполняет скручивающую деформацию содержимого представлений, а не просто искажает ее, как это сделала Classics; единственный способ, которым я могу придумать этот точный эффект для iOS в настоящее время, - это перейти в OpenGL и исказить содержимое с помощью сетки.

Более простой вариант - использовать UIPageViewController, который, по крайней мере, вам понравится эффект керлинга в стиле iBooks - это не ткань, а намного проще, чем опция GL.