【问题标题】:UIDynamicAnimator + custom UICollectionViewLayout resulting in perpetual circular motionUIDynamicAnimator + 自定义 UICollectionViewLayout 导致永久圆周运动
【发布时间】: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。

【问题讨论】:

    标签: ios swift uicollectionview uicollectionviewlayout uidynamicanimator


    【解决方案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) - 从另一个帖子修改。 这将确保中心是整数而不是无理数。 然后只在一个维度上拉中心将使错误消失。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-09-09
      • 2011-01-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-03-03
      • 2018-12-11
      相关资源
      最近更新 更多