动画 UICollectionViewCell 时 bounds.size 和 frame.size 之间的相关性是什么
What is the correlation between bounds.size and frame.size when animating UICollectionViewCell
我在几篇文章(如 and )上读到要使用动画调整 UIView 的大小,我们不能为框架设置动画,我们必须混合使用 bounds.size, bounds.origin 和位置。
但是,我找不到这些属性与框架的属性之间的相关性。
我有一个带有自定义布局的 UICollectionView。当一个单元格被删除时,布局被刷新,每个单元格通过 prepareLayout
和 layoutAttributesForElementsInRect:
方法获得它的新框架。然后,finalizeCollectionViewUpdates
方法(我们可以在其中编辑动画)被调用,最后单元格移动并调整大小。
我通过对单元格动画的反复试验进行了大量探索,以下是我的发现:
- 3 个动画默认设置为我的可见单元格,它们是位置 bounds.origin 和 bounds.size
- 当我更改这些动画的 from/to 值时,只有单元格的 POSITION 受到影响,而不会影响其 SIZE
详细结果
默认值
当我坚持动画的默认值并使用这些日志检查它们的值时,
- (void)finalizeCollectionViewUpdates {
for(UICollectionViewCell* cell in [self.collectionView visibleCells]) {
NSLog(@"cell: %@", cell);
for(NSString* key in cell.layer.animationKeys) {
CABasicAnimation* animation = (CABasicAnimation*)[cell.layer animationForKey:key];
NSLog(@"animation %@: from %@ to %@", key, animation.fromValue, animation.toValue);
}
}
}
我为 收缩 单元格(它的框架代表它的最终状态)得到这个:
cell: <PlayQueueSongCell: 0x7fbf1bc8ebe0; baseClass = UICollectionViewCell; frame = (53.3333 80; 480 480); opaque = NO; animations = { position=<CABasicAnimation: 0x7fbf1bf54e20>; bounds.origin=<CABasicAnimation: 0x7fbf1bf556b0>; bounds.size=<CABasicAnimation: 0x7fbf1bf557a0>; }; layer = <CALayer: 0x7fbf1bc8e9f0>>
animation position: from NSPoint: {666.66666666666674, 0} to NSPoint: {0, 0}
animation bounds.origin: from NSPoint: {0, 0} to NSPoint: {0, 0}
animation bounds.size: from NSSize: {160, 160} to NSSize: {0, 0}
这是 expending 单元格(它的框架代表它的最终状态):
cell: <PlayQueueSongCell: 0x7fbf1bd6cd00; baseClass = UICollectionViewCell; frame = (640 0; 640 640); opaque = NO; animations = { position=<CABasicAnimation: 0x7fbf1bf55b70>; bounds.origin=<CABasicAnimation: 0x7fbf1bf55e20>; bounds.size=<CABasicAnimation: 0x7fbf1bf55f10>; }; layer = <CALayer: 0x7fbf1bd73200>>
animation position: from NSPoint: {666.66666666666652, 0} to NSPoint: {0, 0}
animation bounds.origin: from NSPoint: {0, 0} to NSPoint: {0, 0}
animation bounds.size: from NSSize: {-160, -160} to NSSize: {0, 0}
慢动作查看结果:
无bounds.size动画
当我用这段代码删除 bounds.size 动画时,
- (void)finalizeCollectionViewUpdates {
for(UICollectionViewCell* cell in [self.collectionView visibleCells]) {
for(NSString* key in cell.layer.animationKeys) {
[cell.layer removeAnimationForKey:@"bounds.size"];
}
}
}
我可以看到只有单元格的位置受到影响...
bounds.size 从 (0,0) 到 (1000,1000) 的动画
当我使用这段代码将 bounds.size 的值更改为 (0,0) -> (1000,1000) 时:
- (void)finalizeCollectionViewUpdates {
for(UICollectionViewCell* cell in [self.collectionView visibleCells]) {
for(NSString* key in cell.layer.animationKeys) {
[cell.layer removeAnimationForKey:@"bounds.size"];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
[animation setFromValue:[NSValue valueWithCGSize:CGSizeZero]];
[animation setToValue:[NSValue valueWithCGSize:CGSizeMake(1000, 1000)]];
[animation setDuration:0.3];
[cell.layer addAnimation:animation forKey:@"bounds.size"];
}
}
}
我仍然可以看到只有单元格的位置受到影响...
问题
由于单元格在动画开始之前获得其新帧并且 bounds.size 不影响单元格的大小,我无法找到一种平滑地更改其大小的方法。
大家都在谈论的bounds.size和frame.size之间有什么关系,如何让单元格的大小动画化?
我找到的解决方案是首先删除 bounds.size 动画,因为它以不需要的方式移动单元格。然后,我创建了一个 transform.scale 动画,该动画以模拟其先前大小的值开始,并以值 1 结束。
if([cell.layer animationForKey:@"bounds.size"]) {
[cell.layer removeAnimationForKey:@"bounds.size"];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 0.3;
if(CGSizeEqualToSize(cell.frame.size, self.itemSize)) { //shrinking cell
animation.fromValue = @1.333;
animation.toValue = @1;
} else { //expending cell
animation.fromValue = @0.75;
animation.toValue = @1;
}
[cell.layer addAnimation:animation forKey:@"transform.scale"];
}
我在几篇文章(如 and )上读到要使用动画调整 UIView 的大小,我们不能为框架设置动画,我们必须混合使用 bounds.size, bounds.origin 和位置。
但是,我找不到这些属性与框架的属性之间的相关性。
我有一个带有自定义布局的 UICollectionView。当一个单元格被删除时,布局被刷新,每个单元格通过 prepareLayout
和 layoutAttributesForElementsInRect:
方法获得它的新框架。然后,finalizeCollectionViewUpdates
方法(我们可以在其中编辑动画)被调用,最后单元格移动并调整大小。
我通过对单元格动画的反复试验进行了大量探索,以下是我的发现:
- 3 个动画默认设置为我的可见单元格,它们是位置 bounds.origin 和 bounds.size
- 当我更改这些动画的 from/to 值时,只有单元格的 POSITION 受到影响,而不会影响其 SIZE
详细结果
默认值
当我坚持动画的默认值并使用这些日志检查它们的值时,
- (void)finalizeCollectionViewUpdates {
for(UICollectionViewCell* cell in [self.collectionView visibleCells]) {
NSLog(@"cell: %@", cell);
for(NSString* key in cell.layer.animationKeys) {
CABasicAnimation* animation = (CABasicAnimation*)[cell.layer animationForKey:key];
NSLog(@"animation %@: from %@ to %@", key, animation.fromValue, animation.toValue);
}
}
}
我为 收缩 单元格(它的框架代表它的最终状态)得到这个:
cell: <PlayQueueSongCell: 0x7fbf1bc8ebe0; baseClass = UICollectionViewCell; frame = (53.3333 80; 480 480); opaque = NO; animations = { position=<CABasicAnimation: 0x7fbf1bf54e20>; bounds.origin=<CABasicAnimation: 0x7fbf1bf556b0>; bounds.size=<CABasicAnimation: 0x7fbf1bf557a0>; }; layer = <CALayer: 0x7fbf1bc8e9f0>>
animation position: from NSPoint: {666.66666666666674, 0} to NSPoint: {0, 0}
animation bounds.origin: from NSPoint: {0, 0} to NSPoint: {0, 0}
animation bounds.size: from NSSize: {160, 160} to NSSize: {0, 0}
这是 expending 单元格(它的框架代表它的最终状态):
cell: <PlayQueueSongCell: 0x7fbf1bd6cd00; baseClass = UICollectionViewCell; frame = (640 0; 640 640); opaque = NO; animations = { position=<CABasicAnimation: 0x7fbf1bf55b70>; bounds.origin=<CABasicAnimation: 0x7fbf1bf55e20>; bounds.size=<CABasicAnimation: 0x7fbf1bf55f10>; }; layer = <CALayer: 0x7fbf1bd73200>>
animation position: from NSPoint: {666.66666666666652, 0} to NSPoint: {0, 0}
animation bounds.origin: from NSPoint: {0, 0} to NSPoint: {0, 0}
animation bounds.size: from NSSize: {-160, -160} to NSSize: {0, 0}
慢动作查看结果:
无bounds.size动画
当我用这段代码删除 bounds.size 动画时,
- (void)finalizeCollectionViewUpdates {
for(UICollectionViewCell* cell in [self.collectionView visibleCells]) {
for(NSString* key in cell.layer.animationKeys) {
[cell.layer removeAnimationForKey:@"bounds.size"];
}
}
}
我可以看到只有单元格的位置受到影响...
bounds.size 从 (0,0) 到 (1000,1000) 的动画
当我使用这段代码将 bounds.size 的值更改为 (0,0) -> (1000,1000) 时:
- (void)finalizeCollectionViewUpdates {
for(UICollectionViewCell* cell in [self.collectionView visibleCells]) {
for(NSString* key in cell.layer.animationKeys) {
[cell.layer removeAnimationForKey:@"bounds.size"];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
[animation setFromValue:[NSValue valueWithCGSize:CGSizeZero]];
[animation setToValue:[NSValue valueWithCGSize:CGSizeMake(1000, 1000)]];
[animation setDuration:0.3];
[cell.layer addAnimation:animation forKey:@"bounds.size"];
}
}
}
我仍然可以看到只有单元格的位置受到影响...
问题
由于单元格在动画开始之前获得其新帧并且 bounds.size 不影响单元格的大小,我无法找到一种平滑地更改其大小的方法。
大家都在谈论的bounds.size和frame.size之间有什么关系,如何让单元格的大小动画化?
我找到的解决方案是首先删除 bounds.size 动画,因为它以不需要的方式移动单元格。然后,我创建了一个 transform.scale 动画,该动画以模拟其先前大小的值开始,并以值 1 结束。
if([cell.layer animationForKey:@"bounds.size"]) {
[cell.layer removeAnimationForKey:@"bounds.size"];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 0.3;
if(CGSizeEqualToSize(cell.frame.size, self.itemSize)) { //shrinking cell
animation.fromValue = @1.333;
animation.toValue = @1;
} else { //expending cell
animation.fromValue = @0.75;
animation.toValue = @1;
}
[cell.layer addAnimation:animation forKey:@"transform.scale"];
}