使用 iOS 7 API 的 UICollectionView 交互式布局过渡 [英] UICollectionView interactive layout transition using iOS 7 APIs

问题描述

我正在尝试处理允许交互式动画视图控制器转换的新 iOS 7 API，包括 UICollectionViewLayouts 之间的转换.

I'm trying to get a handle on new iOS 7 APIs that allow for interactive, animated view controller transitions, including transitions between UICollectionViewLayouts.

我从 WWDC 2013 iOS-CollectionViewTransition"中获取并修改了示例代码，可以在这里找到:https://github.com/timarnold/UICollectionView-Transition-Demo

I've taken and modified sample code from WWDC 2013, "iOS-CollectionViewTransition", which can be found here: https://github.com/timarnold/UICollectionView-Transition-Demo

原来的demo，我发现它的时候还没有工作，可以用苹果开发者账号访问，这里:https://developer.apple.com/downloads/index.action?name=WWDC%202013

The original demo, which was not in a working state when I found it, can be accessed with an Apple Developer account, here: https://developer.apple.com/downloads/index.action?name=WWDC%202013

我的应用版本展示了一个包含两个布局的集合视图，两个 UICollectionViewFlowLayout 布局具有不同的属性.

My version of the app presents a collection view with two layouts, both UICollectionViewFlowLayout layouts with different properties.

在第一个布局中点击一个单元格会正确地动画到第二个，关键是，在新布局中被滚动到的点击项目.起初我对新的集合视图如何知道设置其内容偏移量以使适当的单元格可见感到困惑，但我了解到它是基于呈现集合视图的 selected 属性来做到这一点的.

Tapping on a cell in the first layout properly animates to the second, including, crucially, the tapped-on-item being scrolled to in the new layout. At first I was confused about how the new collection view knows to set its content offset so that the appropriate cell is visible, but I learned it does this based on the selected property of the presenting collection view.

在第一个布局中的项目上捏合应该动画，使用 UICollectionViewTransitionLayout、UIViewControllerAnimatedTransitioning 和 UIViewControllerInteractiveTransitioning 到新布局.这可行，但在新布局或过渡布局中不滚动到捏合单元格.

Pinching on an item in the first layout should animate, using UICollectionViewTransitionLayout, UIViewControllerAnimatedTransitioning, and UIViewControllerInteractiveTransitioning, to the new layout as well. This works, but the pinched-at cell is not scrolled to in the new layout or the transition layout.

我尝试在不同位置的捏合单元格上设置 selected 属性(以尝试模仿在点击项目以推送新视图控制器时描述的行为)，设置为 no有用.

I've tried setting the selected property on the pinched-on cell at various locations (to try to mimic the behavior described when tapping on an item to push the new view controller), to no avail.

关于如何解决这个问题的任何想法?

Any ideas about how to solve this problem?

推荐答案

你可以在过渡过程中自己操作contentOffset，这实际上给你比UICollectionView的 内置动画.

You can manipulate the contentOffset yourself during the transition, which actually gives you finer-grained control than UICollectionView's built-in animation.

例如，您可以像这样定义过渡布局，以在to"和from"偏移之间进行插值.你只需要根据你想要的结果来计算to"偏移量:

For example, you can define your transition layout like this to interpolate between the "to" and "from" offsets. You just need to calculate the "to" offset yourself based on how you want things to end up:

@interface MyTransitionLayout : UICollectionViewTransitionLayout
@property (nonatomic) CGPoint fromContentOffset;
@property (nonatomic) CGPoint toContentOffset;
@end

#import "MyTransitionLayout.h"
@implementation MyTransitionLayout

- (void) setTransitionProgress:(CGFloat)transitionProgress
{
    super.transitionProgress = transitionProgress;
    CGFloat f = 1 - transitionProgress;
    CGFloat t = transitionProgress;
    CGPoint offset = CGPointMake(f * self.fromContentOffset.x + t * self.toContentOffset.x, f * self.fromContentOffset.y + t * self.toContentOffset.y);
    self.collectionView.contentOffset = offset;
}

@end

需要注意的一点是，contentOffset 将在转换完成时重置为from"值，但您可以通过将其设置回完成时的to"偏移量来否定它startInteractiveTransitionToCollectionViewLayout

One thing to note is that the contentOffset will be reset to the "from" value when the transition completes, but you can negate that by setting it back to the "to" offset in the completion block of startInteractiveTransitionToCollectionViewLayout

CGPoint toContentOffset = ...;
[self.collectionViewController.collectionView startInteractiveTransitionToCollectionViewLayout:layout completion:^(BOOL completed, BOOL finish) {
    if (finish) {
        self.collectionView.contentOffset = toContentOffset;
    }
}];

更新

我在一个新的 GitHub 库 TLLayoutTransitioning 中发布了这个实现和一个工作示例.该示例是非交互式的，旨在演示对 setCollectionViewLayout:animated:completion 的改进动画，但它利用了与上述技术相结合的交互式过渡 API.看看 TLTransitionLayout 类 并尝试在示例工作区.

I posted an implementation of this and a working example in a new GitHub library TLLayoutTransitioning. The example is non-interactive, intended to demonstrate improved animation over setCollectionViewLayout:animated:completion, but it utilizes the interactive transitioning APIs combined with the technique described above. Take a look at the TLTransitionLayout class and try running the "Resize" example in the Examples workspace.

或许TLTransitionLayout可以完成你所需要的.

Perhaps TLTransitionLayout can accomplish what you need.

更新 2

我在 TLLayoutTransitioning 库中添加了一个交互式示例.尝试在示例工作区中运行 "Pinch" 示例.这个将可见细胞捏成一组.我正在研究另一个示例，该示例会捏住单个单元格，以便在过渡期间该单元格跟随您的手指，而其他单元格遵循默认的线性路径.

I added an interactive example to the TLLayoutTransitioning library. Try running the "Pinch" example in the Examples workspace. This one pinches the visible cells as a group. I'm working on another example that pinches an individual cell such that the cell follows your fingers during the transition while the other cells follow the default linear path.

更新 3

我最近添加了更多内容偏移放置选项:最小、中心、顶部、左侧、底部和右侧.transitionToCollectionViewLayout: 现在支持 Warren Moore 的 AHEasing 库提供的 30 多种缓动函数.

I've recently added more content offset placement options: Minimal, Center, Top, Left, Bottom and Right. And transitionToCollectionViewLayout: now supports 30+ easing functions courtesy of Warren Moore's AHEasing library.

这篇关于使用 iOS 7 API 的 UICollectionView 交互式布局过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！