UIDynamicAnimator + 自定义 UICollectionViewLayout 导致永久圆周运动

Posted 2023-03-08

【中文标题】UIDynamicAnimator + 自定义 UICollectionViewLayout 导致永久圆周运动

【英文标题】：UIDynamicAnimator + custom UICollectionViewLayout resulting in perpetual circular motion

【发布时间】：2015-07-04 02:52:05

【问题描述】：

我一直在复制 2013 年 WWDC Session 217“探索 ios 7 上的滚动视图”。我使用的是 Xcode 7 beta 2，而我的项目只有 iOS 9。

我正在尝试使用UIDynamicAnimator 和我的UICollectionViewLayout，以类似于第 217 节中介绍的方式来模仿 Messages.app 的感觉。我的UICollectionViewLayout 是一个自定义的，由于某种原因，我的细胞似乎在我的项目中以圆周运动反弹。

这是我的自定义布局代码。

// Didn't write this code myself, but should be pretty simple to follow. @Goles  


#import "VVSpringCollectionViewFlowLayout.h"  

@interface VVSpringCollectionViewFlowLayout()  
@property (nonatomic, strong) UIDynamicAnimator *animator;  
@end  

@implementation VVSpringCollectionViewFlowLayout  

-(id)init   
    if (self = [super init])   
        _springDamping = 0.5;  
        _springFrequency = 0.8;  
        _resistanceFactor = 500;  
      
    return self;  
  

- (id)initWithCoder:(nonnull NSCoder *)aDecoder   
  self = [super initWithCoder:aDecoder];  
  if (self)   
        _springDamping = 0.5;  
        _springFrequency = 0.8;  
        _resistanceFactor = 500;  
    
  return self;  
  

-(void)prepareLayout   
    [super prepareLayout];  

    if (!_animator)   
        _animator = [[UIDynamicAnimator alloc] initWithCollectionViewLayout:self];  
        CGSize contentSize = [self collectionViewContentSize];  
        NSArray *items = [super layoutAttributesForElementsInRect:CGRectMake(0, 0, contentSize.width, contentSize.height)];  

        for (UICollectionViewLayoutAttributes *item in items)   
            UIAttachmentBehavior *spring = [[UIAttachmentBehavior alloc] initWithItem:item attachedToAnchor:item.center];  

            spring.length = 0;  
            spring.damping = self.springDamping;  
            spring.frequency = self.springFrequency;  

            [_animator addBehavior:spring];  
          
      
  

-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect   
    return [_animator itemsInRect:rect];  
  

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath   
    return [_animator layoutAttributesForCellAtIndexPath:indexPath];  
  

-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds   
    UIScrollView *scrollView = self.collectionView;  
    CGFloat scrollDelta = newBounds.origin.y - scrollView.bounds.origin.y;  
    CGPoint touchLocation = [scrollView.panGestureRecognizer locationInView:scrollView];  

    for (UIAttachmentBehavior *spring in _animator.behaviors)   
       CGPoint anchorPoint = spring.anchorPoint;  
       CGFloat distanceFromTouch = fabs(touchLocation.y - anchorPoint.y);  
       CGFloat scrollResistance = distanceFromTouch / self.resistanceFactor;  

       id<UIDynamicItem> item = [spring.items firstObject];  
       CGPoint center = item.center;  

       if (scrollDelta > 0)   
            center.y += MIN(scrollDelta, scrollDelta * scrollResistance);  
         

       item.center = center;  
       [_animator updateItemUsingCurrentState:item];  
      
    return NO;  
  

@end  

导致这种圆周运动的原因可能是什么？我只是在更改UIAttachmentAttributes 中心的 Y 轴属性。

center.y += MIN(scrollDelta, scrollDelta * scrollResistance);  

我在这里缺少什么？ （在其他项目中尝试过这种精确的布局，似乎可行）。

编辑：

我上传了一个示例项目（已删除），自定义集合视图布局类称为VVSpringCollectionViewFlowLayout.m，因为我最近有很多工作要做，所以我没有太多时间自己研究这个。

当示例项目运行（Xcode 7 beta 或更高版本）时，系统会提示您使用滑块，一直向右拖动以显示 Collection View Cells。

【参考方案1】：

下面的代码应该可以帮助您/为您指明正确的方向。它还有一些额外的功能——比如清理不必要的动画师行为（如果不在视野范围内），跟踪触摸以便动画师从那一点开始的行为。从一个旧项目中剥离出来，所以应该可以工作。包含演示创建视频的 Github 示例项目 - https://github.com/serendipityapps/SpringyCollectionView

@interface VVSpringCollectionViewFlowLayout ()

@property (nonatomic, strong) UIDynamicAnimator *dynamicAnimator;
@property (nonatomic, strong) NSMutableSet *visibleIndexPathsSet;
@property (nonatomic, assign) CGFloat latestDelta;

@end

@implementation VVSpringCollectionViewFlowLayout

- (id)init 
    if (self = [super init]) 
        self.dynamicAnimator = [[UIDynamicAnimator alloc] initWithCollectionViewLayout:self];
        self.visibleIndexPathsSet = [NSMutableSet set];
    
    return self;


- (id)initWithCoder:(nonnull NSCoder *)aDecoder 
    if (self = [super initWithCoder:aDecoder]) 
        self.dynamicAnimator = [[UIDynamicAnimator alloc] initWithCollectionViewLayout:self];
        self.visibleIndexPathsSet = [NSMutableSet set];
    
    return self;


-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect 
    return [self.dynamicAnimator itemsInRect:rect];


-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath 
    return [self.dynamicAnimator layoutAttributesForCellAtIndexPath:indexPath];


- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath 
    return [self.dynamicAnimator layoutAttributesForSupplementaryViewOfKind:kind atIndexPath:indexPath];



-(void)prepareLayout 
    [super prepareLayout];

    // Need to enlarge visible rect slightly to avoid flickering.
    CGRect visibleRect = CGRectInset((CGRect).origin = self.collectionView.bounds.origin, .size = self.collectionView.frame.size, -100, -100);

    NSArray *itemsInVisibleRectArray = [super layoutAttributesForElementsInRect:visibleRect];

    NSArray *cells = [itemsInVisibleRectArray filteredArrayUsingPredicate:[NSPredicate predicateWithBlock:^BOOL(UICollectionViewLayoutAttributes *item, NSDictionary *bindings) 
        return !item.representedElementKind;
    ]];

    NSSet *itemsIndexPathsInVisibleRectSet = [NSSet setWithArray:[cells valueForKey:@"indexPath"]];

    // Remove any behaviours that are no longer visible.
    NSArray *noLongerVisibleBehavioursCells = [self.dynamicAnimator.behaviors filteredArrayUsingPredicate:[NSPredicate predicateWithBlock:^BOOL(UIAttachmentBehavior *behaviour, NSDictionary *bindings) 

        UICollectionViewLayoutAttributes *item= (UICollectionViewLayoutAttributes*)[[behaviour items] firstObject];
        if (!item.representedElementKind) 
            BOOL currentlyVisible = [itemsIndexPathsInVisibleRectSet member:[item indexPath]] != nil;
            return !currentlyVisible;
        
        else 
            return NO;
        
    ]];

    [noLongerVisibleBehavioursCells enumerateObjectsUsingBlock:^(UIAttachmentBehavior *behaviour, NSUInteger index, BOOL *stop) 
        UICollectionViewLayoutAttributes *item = (UICollectionViewLayoutAttributes*)[[behaviour items] firstObject];
        [self.dynamicAnimator removeBehavior:behaviour];
        [self.visibleIndexPathsSet removeObject:[item indexPath]];
    ];


    // Add any newly visible behaviours.
    CGPoint touchLocation = [self.collectionView.panGestureRecognizer locationInView:self.collectionView];

    // A "newly visible" item is one that is in the itemsInVisibleRect(Set|Array) but not in the visibleIndexPathsSet
    NSArray *newlyVisibleItems = [cells filteredArrayUsingPredicate:[NSPredicate predicateWithBlock:^BOOL(UICollectionViewLayoutAttributes *item, NSDictionary *bindings) 
        BOOL currentlyVisible = [self.visibleIndexPathsSet member:item.indexPath] != nil;
        return !currentlyVisible;
    ]];

    [newlyVisibleItems enumerateObjectsUsingBlock:^(UICollectionViewLayoutAttributes *item, NSUInteger idx, BOOL *stop) 
        CGPoint center = item.center;
        UIAttachmentBehavior *springBehaviour = [[UIAttachmentBehavior alloc] initWithItem:item attachedToAnchor:center];

        springBehaviour.length = 0.0f;
        springBehaviour.damping = 0.8f;
        springBehaviour.frequency = 1.0f;

        // If our touchLocation is not (0,0), we'll need to adjust our item's center "in flight"
        if (!CGPointEqualToPoint(CGPointZero, touchLocation)) 
            CGFloat yDistanceFromTouch = fabs(touchLocation.y - springBehaviour.anchorPoint.y);
            CGFloat xDistanceFromTouch = fabs(touchLocation.x - springBehaviour.anchorPoint.x);
            CGFloat scrollResistance = (yDistanceFromTouch + xDistanceFromTouch) / 1500.0f;

            if (self.latestDelta < 0) 
                center.y += MAX(self.latestDelta, self.latestDelta*scrollResistance);
            
            else 
                center.y += MIN(self.latestDelta, self.latestDelta*scrollResistance);
            
            item.center = center;
        

        [self.dynamicAnimator addBehavior:springBehaviour];
        [self.visibleIndexPathsSet addObject:item.indexPath];
    ];



-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds 

    UIScrollView *scrollView = self.collectionView;
    CGFloat delta = newBounds.origin.y - scrollView.bounds.origin.y;

    self.latestDelta = delta;

    CGPoint touchLocation = [self.collectionView.panGestureRecognizer locationInView:self.collectionView];

    __block UIDynamicAnimator *weakDynamicAnimator = self.dynamicAnimator;

    [self.dynamicAnimator.behaviors enumerateObjectsUsingBlock:^(UIAttachmentBehavior *springBehaviour, NSUInteger idx, BOOL *stop) 

        CGFloat yDistanceFromTouch = fabs(touchLocation.y - springBehaviour.anchorPoint.y);
        CGFloat xDistanceFromTouch = fabs(touchLocation.x - springBehaviour.anchorPoint.x);
        CGFloat scrollResistance = (yDistanceFromTouch + xDistanceFromTouch) / 1500.0f;

        UICollectionViewLayoutAttributes *item = (UICollectionViewLayoutAttributes*)[springBehaviour.items firstObject];
        CGPoint center = item.center;
        if (delta < 0) 
            center.y += MAX(delta, delta*scrollResistance);
        
        else 
            center.y += MIN(delta, delta*scrollResistance);
        
        item.center = center;

        [weakDynamicAnimator updateItemUsingCurrentState:item];
    ];

    return NO;


@end

SampleCode 的答案： 示例代码显示了这种奇怪的摆动效果，因为项目的大小是通过编程方式生成的并且没有四舍五入 - 计算的精度会给 UIDynamics 和物理引擎带来问题，并且永远无法达到平衡。简单地四舍五入生成的项目大小给物理一个机会。请参阅 NoteCollectionViewController.swift 第 77 行。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize 
    let w = round(CellAspectRatio.width * collectionView.frame.width)
    let h = round(CellAspectRatio.height * collectionView.frame.height)
    return CGSizeMake(w, h)

【讨论】：

嗨，这是一个最小项目的链接，显示类按预期工作，dropbox.com/s/m6wsfqbaim3xhmq/SpringyCollectionView.zip?dl=0

该项目实际上并没有编译，但无论如何......出于某种原因，我在我的项目中看到了上述行为。这没有回答最初的问题...我可能会继续发布一个暴露该问题的小型示例项目。

嘿，不知道为什么不在你的系统上编译。这是从头开始创建项目的 5 分钟视频。 dropbox.com/s/2ffptx2wfdbmm5g/OriginalSpringyDemo.mp4?dl=0也许你会发现一些东西。我在我的项目中尝试了几种变体，例如水平跳动等，但还无法重现您的问题。一个示例项目会很高兴直接看到这个问题。

嘿戴夫，我将提供一个示例项目；）

@Goles 我已经解决了。看我的示例项目（+CocoaPods）github.com/CoolCodeFactory/DynamicWaveCollectionView

【参考方案2】：

嗯，接受的答案大多是正确的。实际上，在屏幕比例为 3 的 iPhone + 上，它可能会再次失败并出现相同的症状。以 1/3 或 2/3 点的某个无理数拉动中心将再次导致永久圆周运动。

四舍五入到偶数 2.0 * floorf((number/2.0) + 0.5) - 从另一个帖子修改。 这将确保中心是整数而不是无理数。 然后只在一个维度上拉中心将使错误消失。