iOS中的自定义导航过渡效果
In present mobile development, the emphasis lies on achieving both speed and personalization. As the demand for rapid delivery intensifies, continuously improving the user experience for customers is essential.
在当前的移动开发中，重点在于实现速度和个性化。随着对快速交付的需求不断增加，不断改进客户的用户体验至关重要。
One avenue through which this aspiration materializes is via screen transitions. These transitions serve a dual purpose: they facilitate seamless navigation while striving to establish a sense of continuity in user interactions, transcending the mere act of moving from one screen to another.
这种愿望实现的一种途径是通过屏幕过渡。这些过渡具有双重目的：它们在努力建立用户交互的连续性的同时，促进无缝导航，超越了简单地从一个屏幕到另一个屏幕的行为。
In this article, we will focus on screen transitions for iOS apps. Rather than implementing a custom transition for a basic scenario, which many resources already cover, we will explore a real example from Zalando's iOS App showcasing navigation between two screens that are entirely backend-driven.
在本文中，我们将重点讨论iOS应用程序的屏幕过渡。与实现基本场景的自定义过渡不同，许多资源已经涵盖了这一点，我们将探索一个真实的例子，展示了Zalando的iOS应用程序中完全由后端驱动的两个屏幕之间的导航。
Navigation Transition
导航过渡
In our prior article Backend-driven UI for mobile apps, we explained how the screen functions as a composed structure of a limited number of primitive components within the framework. So our problem space is: How to enhance navigational experience in a Backend-driven UI system?. To understand that challenge, we will break down what is needed to implement one. But first, let's have a look on the status quo of a transition from an outfit-card to outfit-details screen.
在我们之前的文章Backend-driven UI for mobile apps中，我们解释了屏幕如何作为框架内有限数量的原始组件的组合结构。因此，我们的问题空间是：如何增强后端驱动的UI系统中的导航体验？为了理解这个挑战，我们将分解实现所需的内容。但首先，让我们来看一下从服装卡片到服装详情屏幕的过渡的现状。
Here, one of the outfits from the carousel is tapped and an outfit-details screen is pushed on the navigation stack with the default transition. Notice the image in the carousel and the image on the detail screen are the same, the interaction could be enhanced in many ways here. One way is to build a custom navigational experience, where the image th...