8

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. （成像旧的 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;

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

4

3 回答 3

6

你可以像这里建议的那样做一些技巧

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

结果：

在此处输入图像描述

于 2016-03-18T10:23:33.770 回答
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()
}
于 2017-06-11T09:29:12.240 回答
1

您需要创建一个自定义UICollectionViewLayout来执行您的自定义动画。如果效果只是从 A 点到 B 点的平移，您可以通过非常标准地使用内置动画来使用 get away。您可以将单元格的位置设置为点 A ininitialLayoutAttributesForAppearingItemAtIndexPath:和点 B in layoutAttributesForItemAtIndexPath:。当您想处理卡片时，您只需将相应的索引路径插入到集合视图中即可performBatchUpdates:。应该使用类似的动画来将牌发回给庄家finalLayoutAttributesForDisappearingItemAtIndexPath:。

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

于 2015-04-20T17:08:40.310 回答