UIDynamicAnimator +自定義UICollectionViewLayout導致永久性圓周運動

我一直在複製2013年WWDC會話217「探索iOS 7上的滾動視圖」。我使用的是Xcode 7 beta 2，我的項目只有iOS 9。UIDynamicAnimator +自定義UICollectionViewLayout導致永久性圓周運動

我正在嘗試使用UIDynamicAnimator與我的UICollectionViewLayout以類似於會話217中呈現的方式來模仿Messages.app的感覺。我的UICollectionViewLayout是一個自定義的，由於某種原因，我的細胞似乎在我的項目中以圓周運動反彈。

下面是問題的video更清晰。

這是我的自定義佈局代碼。

// 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或更高版本）時，系統會提示您使用滑塊，一直拖動到右側以可視化「集合視圖單元」。

來源

2015-07-04 Goles

下面的代碼應該可以幫助你指出正確的方向。它還有一些額外功能 - 比如清理不必要的動畫師行爲（如果不在視圖中），跟蹤觸摸動畫師的行爲。剝離舊項目，所以應該工作。有示範創建視頻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和Physics引擎帶來了問題，並且它永遠達不到平衡。簡單地四捨五入生成的項目大小爲物理學提供了一個機會。請參閱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) 
}

來源

2015-07-09 12:53:14

嗨，這裏是一個最小項目的鏈接，顯示了類的工作原理，https://www.dropbox.com/s/m6wsfqbaim3xhmq/SpringyCollectionView.zip?dl=0 –

該項目並沒有實際編譯，但無論如何......出於某種原因，我在我的項目中看到了上述行爲。這不回答原來的問題... 我可能會繼續併發佈一個小樣本項目揭露這個問題。 – Goles

嘿，不知道爲什麼不在你的系統上編譯。這是一個從頭開始創建項目的5分鐘視頻。 https://www.dropbox.com/s/2ffptx2wfdbmm5g/OriginalSpringyDemo.mp4?dl=0也許你會發現一些東西。我在我的項目中嘗試了多種變化，例如水平跳動等，但無法再現您的問題。一個示例項目將非常適合親眼看到問題。 –

那麼接受的答案大多是正確的。它實際上可能會在屏幕比例爲3的iPhone +上再次出現相同的症狀。以1/3或2/3點的一些不合理的數字拉中心，將再次導致永久性的圓周運動。

舍入爲偶數 2.0 * floorf((number/2.0) + 0.5) - 從其他帖子修改。這將確保中心是整數，而不是非理性。然後通過只在一個維度拉動中心會使bug消失。

來源

2017-06-05 03:12:38 user3234220

UIDynamicAnimator +自定義UICollectionViewLayout導致永久性圓周運動

回答

相關問題