让我们建立App Store的互动过渡

新设计的App Store具有许多闪亮的新功能，但是没有什么可以与Apple在选项卡栏中添加的“今日”部分相提并论的。 它具有大量用户可能会感兴趣的信息，并添加了“ APP OFF THE DAY”，“ DAY GAME OF DAY”等类别，这是非常明智的举动，它使App Store在新加入的程序员中更具竞争力，由于用户将不再仅看到收视率最高的应用程序。 当我浏览新类别时，我对自己说：哇，这种过渡看起来令人惊讶，并且可以平滑地连接两个不同的页面。 因此，我决定自己制作一个版本。

完整的项目在本教程的最后

重新创建类似Apple为App Store“今日”类别制作的卡片。 通过使用集合视图+平移手势识别器。 该项目基于Swift 4。

只需将TransitionClone.swift复制并粘贴到您的项目中，然后将UIViewControllerTransitioningDelegate添加到要使用的Class中。

然后在上面添加两个函数。 在这里，我创建了一个名为transitionMode的枚举，目的是告诉代码我们处于什么过渡状态，如果要到Present而不是将其设置为“ present”，或者将dismiss设置为“ dismiss”，则很简单。

不要忘记设置开始帧和结束帧，例如：

对于Pan Gesture，我们将使用UIPanGestureRecognizer，其中包括诸如开始，更改，结束等状态。这将为我们提供方便的方式来操纵动画进行中的百分比。 您很快就会得到我正在谈论的内容，但是现在让我们将上面的代码添加到目标视图控制器中即可。

在Image上拖动时创建收缩的动画，请注意，由于UIViewPropertyAnimator具有暂停和恢复动画的优势，因此我们在此处不使用UIView.animate。 您可能在想为什么我们需要暂停和恢复动画？ 因为我们希望动画与用户的手指互动！ 换句话说就是“跟随”手指。

创建一个手势识别器并添加到UIView中，我在按钮上添加了它，但是可以将其添加到imageView上

创建panRecognizer，它应该可以正常工作。 这就是魔术的作用，在开始播放后立即暂停动画，现在我们以防万一.changed，然后跟踪手指从其初始位置拖动的垂直距离（如果要跟踪水平距离，只需更改平移。 y⇢translation.x）。 而不是将其添加到当前动画过程中（animator.fractionComplete）。 对于单次点击识别，它甚至更容易，无需添加另一个点击识别器。 只需在identifier.state = end中添加一条if语句，请参见下面的代码：）

arnoldlee850807 / rebuildAppStoreTransition

通过在GitHub上创建一个帐户来促进rebuildAppStoreTransition开发。

github.com

希望您像我一样学到UIPanGestureRecognizer的惊人之处，祝编码愉快！

Freepik从www.flaticon.com制作的图标已获CC 3.0 BY许可