UICollectionView上的自定义动画重新加载数据

Question

我想动画重新加载一个集合视图，这样当一个单元格被选中时，我得到的动画类似于在单人纸牌游戏中发牌。 （成像旧的MS纸牌）

我一直在寻找“自定义UICollectionView重载动画”，并看到了诸如此类的解决方案

[self.collectionView performBatchUpdates:^{
[self.collectionView reloadItemsAtIndexPaths:myindexPaths]
} completion:nil];

并且想到了这一点

    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;

但它没有达到我想要的效果。 有什么想法可以做到吗？

Answer 1

你可以在这里提出一些建议

+ (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;
}

并将其添加到您的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];
}

结果：

Answer 2

我喜欢@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()
}

Answer 3

您需要创建一个自定义UICollectionViewLayout来执行自定义动画。 如果效果只是从A点到B点的转换，您可以使用内置动画的相当标准的使用。 您可以将单元格的位置设置为initialLayoutAttributesForAppearingItemAtIndexPath: A点， layoutAttributesForItemAtIndexPath: B点layoutAttributesForItemAtIndexPath: 当您想要处理这些卡时，只需使用performBatchUpdates:将相应的索引路径插入到集合视图中。 将卡片发送回经销商的类似动画应该使用finalLayoutAttributesForDisappearingItemAtIndexPath: .

如果你想做一个更复杂的动画，你将有更多的工作在你的手上。 这很可能包括在沿着CGPath进行动画CGPath之前对单元格进行快照并对其进行CGPath 。 动画完成后，您将告诉集合视图在最终位置绘制它。