[英]Custom animation on UICollectionView reload data
I would like to animate the reload of a collection view such that when a cell is selected I get an animation similar to dealing cards in a solitaire game. 我想动画重新加载一个集合视图,这样当一个单元格被选中时,我得到的动画类似于在单人纸牌游戏中发牌。 (Imaging old MS solitaire card dealt) (成像旧的MS纸牌)
I've searched around for "custom UICollectionView reload animatation" and seen solutions such as 我一直在寻找“自定义UICollectionView重载动画”,并看到了诸如此类的解决方案
[self.collectionView performBatchUpdates:^{
[self.collectionView reloadItemsAtIndexPaths:myindexPaths]
} completion:nil];
and have conjured up this 并且想到了这一点
CATransition *transition = [CATransition animation];
transition.duration = 1;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionMoveIn;
[self.collectionView.layer addAnimation:transition forKey:nil];
[self.collectionView reloadData];
return;
But it is not getting my desired effect. 但它没有达到我想要的效果。 Any ideas how it can be done? 有什么想法可以做到吗?
u can make some trick like suggested here 你可以在这里提出一些建议
+ (CATransition *)swipeTransitionToLeftSide:(BOOL)leftSide
{
CATransition* transition = [CATransition animation];
transition.startProgress = 0;
transition.endProgress = 1.0;
transition.type = kCATransitionPush;
transition.subtype = leftSide ? kCATransitionFromRight : kCATransitionFromLeft;
transition.duration = AnimationDuration;
return transition;
}
and add it to your collectionView
并将其添加到您的collectionView
UISwipeGestureRecognizer *swipeGestureL = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(didSwipeToLeftCollectionView:)];
swipeGestureL.direction = UISwipeGestureRecognizerDirectionLeft;
[self.collectionView addGestureRecognizer:swipeGestureL];
- (void)didSwipeToLeftCollectionView:(UISwipeGestureRecognizer *)swipeGesture
{
[self.collectionView.layer addAnimation:[Animation swipeTransitionToLeftSide:YES] forKey:nil];
[self.collectionView reloadData];
}
result: 结果:
I like @gbk's answer so here it is in Swift 3.1 for both left and right 我喜欢@gbk的答案,所以这里左右都是Swift 3.1
override func viewDidLoad() {
super.viewDidLoad()
let swipeGestureL = UISwipeGestureRecognizer(target: self, action: #selector(swipeLeft))
swipeGestureL.direction = .left
collectionView.addGestureRecognizer(swipeGestureL)
let swipeGestureR = UISwipeGestureRecognizer(target: self, action: #selector(swipeRight))
swipeGestureR.direction = .right
collectionView.addGestureRecognizer(swipeGestureR)
}
func swipeTransitionToLeftSide(_ leftSide: Bool) -> CATransition {
let transition = CATransition()
transition.startProgress = 0.0
transition.endProgress = 1.0
transition.type = kCATransitionPush
transition.subtype = leftSide ? kCATransitionFromRight : kCATransitionFromLeft
transition.duration = 0.3
return transition
}
@IBAction func swipeLeft() {
collectionView.layer.add(swipeTransitionToLeftSide(true), forKey: nil)
updateDasource()
}
@IBAction func swipeRight() {
collectionView.layer.add(swipeTransitionToLeftSide(false), forKey: nil)
updateDatasource()
}
func updateDatasource() {
self.collectionView.reloadData()
}
You need to create a custom UICollectionViewLayout
that does your custom animation. 您需要创建一个自定义UICollectionViewLayout
来执行自定义动画。 If the effect is just a translation from point A to point B, you can use get away with a pretty standard use of the built-in animations. 如果效果只是从A点到B点的转换,您可以使用内置动画的相当标准的使用。 You would set the cell's location to point A in initialLayoutAttributesForAppearingItemAtIndexPath:
and to point B in layoutAttributesForItemAtIndexPath:
. 您可以将单元格的位置设置为initialLayoutAttributesForAppearingItemAtIndexPath:
A点, layoutAttributesForItemAtIndexPath:
B点layoutAttributesForItemAtIndexPath:
When you want to deal the cards, you would simply insert the corresponding index paths into the collection view with performBatchUpdates:
. 当您想要处理这些卡时,只需使用performBatchUpdates:
将相应的索引路径插入到集合视图中。 A similar animation to send the cards back to the dealer should use finalLayoutAttributesForDisappearingItemAtIndexPath:
. 将卡片发送回经销商的类似动画应该使用finalLayoutAttributesForDisappearingItemAtIndexPath:
.
If you want to do a more complex animation, you'll have a lot more work on your hands. 如果你想做一个更复杂的动画,你将有更多的工作在你的手上。 This would most likely include snapshotting a cell and transforming it before animating along a CGPath
. 这很可能包括在沿着CGPath
进行动画CGPath
之前对单元格进行快照并对其进行CGPath
。 Once the animation is done you would then tell the collection view to draw it in its final location. 动画完成后,您将告诉集合视图在最终位置绘制它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.