CollectionViewCell中的约束动画问题

Question

不幸的是，我在约束方面仍然存在问题。。。我肯定是我的问题，但我真的不能理解他们。。。

我已经创建了一个带有自定义单元格的UICollectionView。

在单元格中，我插入了一个UIView及其所有约束。

Uiew高度约束默认设置为ZERO，并根据collectionView从NSMutableArray 收集的数据进行更改

在cellForItemAtIndexPath方法中，增加或减少自定义单元格中的uiview高度。。。

一切都很好，数据收集得很完美，但我不明白为什么每次滚动集合时uiview高度动画都会继续。。

我希望在显示collectionView时为视图的高度设置动画，但不希望在前后滚动时设置动画。。。我制作了一个视频向你展示这个

https://streamable.com/d32fy

我不明白我错在哪里，是不是因为一些问题而陷入困境，这些问题我无法理解约束和它们的动画。。。

这是我正在使用的代码

主视图控制器

-(void)setupCollectionView {
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.minimumLineSpacing = 2;
flowLayout.minimumInteritemSpacing = 0;
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
_chartCollection = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
[_chartCollection registerClass:[KPHomeChartCell class] forCellWithReuseIdentifier:kChartCellIdentifier];
_chartCollection.backgroundColor = [UIColor clearColor];
_chartCollection.delegate = self;
_chartCollection.dataSource = self;
_chartCollection.pagingEnabled = YES;
_chartCollection.showsHorizontalScrollIndicator = NO;
_chartCollection.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:_chartCollection];
self.topChartCollectionAnchor = [self.chartCollection.topAnchor constraintEqualToAnchor:self.customSwitch.bottomAnchor constant:20];
self.topChartCollectionAnchor.active = YES;
[self.chartCollection.leftAnchor constraintEqualToAnchor:self.leftAnchor constant:30].active = YES;
[self.chartCollection.rightAnchor constraintEqualToAnchor:self.rightAnchor].active = YES;
[self.chartCollection.bottomAnchor constraintEqualToAnchor:self.bottomAnchor constant:-35].active = YES;
[self buildYAxis];
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
KPHomeChartCell *chartCell = [collectionView dequeueReusableCellWithReuseIdentifier:kChartCellIdentifier forIndexPath:indexPath];
NSInteger n = [[self returnXAxis][indexPath.item] integerValue];
UILabel *yLabelValue = (UILabel *)[self viewWithTag:n];
chartCell.leftBarHeightConstraint.constant = [self offsetBarFromChart:collectionView] - yLabelValue.center.y;
chartCell.rightBarHeightConstraint.constant = [self offsetBarFromChart:collectionView] - yLabelValue.center.y +30;
return chartCell;
}

自定义集合ViewCell

-(void)animateHeightOfBarWithConstant {
// Crea la linea a tratti per ogni barra
CAShapeLayer *dashedLine = [CAShapeLayer layer];
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath, nil, 0, 0);
CGPathAddLineToPoint(thePath, nil, 0, self.contentView.frame.size.height);
dashedLine.path = thePath;
CGPathRelease(thePath);
dashedLine.lineDashPattern = @[@4];
dashedLine.strokeColor =  [UIColor colorWithHexString:@"#FFFFFF" setAlpha:.1].CGColor;
[self.contentView.layer addSublayer:dashedLine];

// BUILD BAR UIVIEW
_bar = [[UIView alloc] init];
_bar.layer.cornerRadius = 4;
_bar.translatesAutoresizingMaskIntoConstraints = NO;
CGFloat barWidth = 15;
[self.contentView addSubview:_bar];
dispatch_async(dispatch_get_main_queue(), ^{
dashedLine.frame = CGRectMake(_bar.center.x, 0, self.contentView.frame.size.width , 15);
});

[self.bar.bottomAnchor constraintEqualToAnchor:self.contentView.bottomAnchor].active = YES;
[self.bar.widthAnchor constraintEqualToConstant:barWidth].active = YES;
[self.bar.centerXAnchor constraintEqualToAnchor:self.contentView.centerXAnchor constant:-13.5].active = YES;
self.leftBarHeightConstraint = [self.bar.heightAnchor constraintEqualToConstant:0];
self.leftBarHeightConstraint.active = YES;
[UIView animateWithDuration:.9 animations:^{
[self.contentView layoutIfNeeded];
}];
}

Answer 1

您可以尝试此代码

主视图控制器

@interface MainViewController () <UITableViewDelegate>
@property (nonatomic, assign) NSUInteger lastCellDisplayedIndex;
@end
@implementation MainViewController
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
_lastCellDisplayedIndex = indexPath.row;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath {
KPHomeChartCell *chartCell = [collectionView dequeueReusableCellWithReuseIdentifier:kChartCellIdentifier forIndexPath:indexPath];
NSInteger n = [[self returnXAxis][indexPath.item] integerValue];
UILabel *yLabelValue = (UILabel *)[self viewWithTag:n];
chartCell.leftBarHeightConstraint.constant = [self offsetBarFromChart:collectionView] - yLabelValue.center.y;
chartCell.rightBarHeightConstraint.constant = [self offsetBarFromChart:collectionView] - yLabelValue.center.y +30;
if (_lastCellDisplayedIndex >= indexPath) {
[chartCell updateHeightOfBarAnimated:NO];
} else {
[chartCell updateHeightOfBarAnimated:YES];
}
return chartCell;
}
@end

自定义集合ViewCell

-(void)updateHeightOfBarAnimated:(BOOL)animated {
// Crea la linea a tratti per ogni barra
CAShapeLayer *dashedLine = [CAShapeLayer layer];
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath, nil, 0, 0);
CGPathAddLineToPoint(thePath, nil, 0, self.contentView.frame.size.height);
dashedLine.path = thePath;
CGPathRelease(thePath);
dashedLine.lineDashPattern = @[@4];
dashedLine.strokeColor =  [UIColor colorWithHexString:@"#FFFFFF" setAlpha:.1].CGColor;
[self.contentView.layer addSublayer:dashedLine];

// BUILD BAR UIVIEW
_bar = [[UIView alloc] init];
_bar.layer.cornerRadius = 4;
_bar.translatesAutoresizingMaskIntoConstraints = NO;
CGFloat barWidth = 15;
[self.contentView addSubview:_bar];
dispatch_async(dispatch_get_main_queue(), ^{
dashedLine.frame = CGRectMake(_bar.center.x, 0, self.contentView.frame.size.width , 15);
});

[self.bar.bottomAnchor constraintEqualToAnchor:self.contentView.bottomAnchor].active = YES;
[self.bar.widthAnchor constraintEqualToConstant:barWidth].active = YES;
[self.bar.centerXAnchor constraintEqualToAnchor:self.contentView.centerXAnchor constant:-13.5].active = YES;
self.leftBarHeightConstraint = [self.bar.heightAnchor constraintEqualToConstant:0];
self.leftBarHeightConstraint.active = YES;
if (animated) {
[UIView animateWithDuration:.9 animations:^{
[self.contentView layoutIfNeeded];
}];
} else {
[self.contentView layoutIfNeeded];
}
}
- (void)prepareForReuse {
if (_bar) {
[_bar removeFromSuperview];
_bar = nil;
}
}

仅在cellForItemAtIndexPath中使用updateHeightOfBarAnimated

Answer 2

如果只需要1的动画。外观做这样的事情：

1. 在视图中显示并保存当前时间(以秒为单位)NSTimeInterval startTime=[[NSDate date]timeIntervalSinceReferenceDate]
2. 在cellForIndexPath中，如果初始动画的时间已过->([NSDate date]timeintervalSinceReferenceData]-startTime)>animationTime将视图的大小设置为动画的最终状态(因此不会发生动画)
3. 函数animateHeightOfBarWithConstant()可能应该为参数化器(BOOL)设置动画。如果设置为YES，则执行动画(动画时间为非零)，如果发送NO，则动画时间为0或使用[UIWiew performWithoutAnimation:]

对单元格使用-prepareForReuse()方法。单元格是重复使用的，您需要在cellForIndexPath方法中设置右开始条件或设置所有元素。