2016-09-29 5 views
5

При прокручивании между историями в Instagrams новой функции «Истории» (вы знаете, что кубический переход при переходе от одной истории к другой) я не могу понять, как они это делают!Как происходит переход куба Instagram Stories в iOS?

Прежде всего, если копнуть глубже в функциональности вы обнаружите, что он работает точно так же, как переход UIPageViewControllers:

- Он подпрыгивает, когда ударяя быстро из одного вида в другой.
- Вы можете приостановить салфетки в середине перехода, коснувшись экрана.

Развивающаяся команда не могла бы использовать решение, основанное на более известных обходных путей там, например:
https://www.appcoda.com/custom-view-controller-transitions-tutorial/
Потому что, насколько я знаю, мои два заявления выше, не удалось добиться ни с чем, чем Контроллер PageViewController.

Это заставляет меня думать, что команда разработчиков Instagram получила доступ к новому стилю перехода для PageViewController, также известному как Cube-свиток, или это обходной путь, о котором я не знаю?

Любые идеи?

+1

Не знаете, как ваши две точки подразумевают 'UIPageViewController'. Просмотр [здесь] (https://developer.apple.com/videos/play/wwdc2016/216/) объясняет, как сделать интерактивные прерывистые пользовательские переходы между любыми двумя контроллерами представлений. – beyowulf

+0

С первой точкой, которую я имею в виду при выполнении жесткого салфетки, происходит просмотр подкачки к следующему представлению, но поскольку жест жеваемости настолько быстр, пейджинг также перескакивает в следующий вид, после чего отображается и некоторый пиксель этого вида , прежде чем вернуться к правильному виду. Это поведение - это то, что я видел только в UIPageViewController или ScrollViews с включенным пейджингом. Я посмотрю видео. Я намерен найти для этого рабочее решение, поэтому я был бы признателен за ответ или несколько советов о том, как его решить. – alengqvist

ответ

5

Я сделал попытку воссоздать эту функцию некоторое время назад. Вы можете проверить исходный код на GitHub: https://github.com/oyvind-hauge/OHCubeView

Я использую вид прокрутки (с включенным пейджингом), и для каждого подсмотра я манипулирую их как функцию текущего х-смещения текущего вида в прокрутке Посмотреть. Фактические анимации выполняются на каждом уровне subview с использованием Core Animation (более конкретно, преобразование идентичной матрицы, заданное CATransform3DIdentity, с использованием метода CATransform3DRotate).

Теневые эффекты также применяются к слоям подвидности (view.layer.opacity), с суммой тени, определяемой тем, какая часть изображения отображается на экране.

Моя реализация решает обе ваши проблемы (отскакивает при прокрутке, может приостанавливать поиск). Я уверен, что это могло бы быть реализовано с помощью UIPageViewController, но я ненавижу работать с ними.

+0

Вы знаете, как сделать эту работу с ios 8? Есть ли способ изменить его? Я действительно хочу использовать это, он идеально подходит для того, что я делаю, но на самом деле хочу, чтобы мое приложение совместимо с ios 8. –

+0

Это здорово, что вы хотите его использовать. Прошло некоторое время с тех пор, как я просмотрел код, но позвольте мне вернуться к вам. –

+1

@WayneFilkins, поэтому причина, по которой я не могу поддерживать iOS 8, заключается в том, что я использую UIStackView, который доступен только для iOS 9. Этот класс нелегко удалить, поскольку он является фундаментальной частью реализации. Извини за это. –

0

Я думаю, что вы переоцениваете часть контроллера здесь. Эффект может быть легко достигнут, используя CATransformLayer и трехстороннюю структуру вида в виде куба, где есть один вид, который выравнивается с плоскостью экрана, а два других повернуты на -90 и 90 градусов по их оси y. Затем, получив жест панорамы, чтобы повернуть сцену. После успешного 90-градусного поворота (в любом направлении) вы можете быстро сбросить сцену (чтобы продолжалось вращение, как будто продолжается, но на самом деле камера переместилась обратно в исходное положение), или вы можете иметь полный поворот на 360 градусов, и просто обновите предыдущие и следующие «страницы». Один контроллер может справиться с этой сценой. Если вы предпочитаете иметь каждую страницу в качестве контроллера, возможно, вы все равно можете использовать один контроллер для сцены, а затем использовать контроллеры страниц в качестве дочерних контроллеров и устанавливать свои представления, как описано выше.

См. Статью this для получения дополнительной информации о CATransformLayer. Их пример уже создает нечто, близкое к тому, что вам нужно.