ios - ios中圆轮动画的实现

Question

我必须做一个像这样的动画:

https://www.flickr.com/photos/134104584@N07/20409116003/in/datetaken/

目前我正在尝试使用自定义 Collection View 布局和子类化 UICollectionViewLayout 来实现这一点。

有什么帮助或方法可以实现这一目标吗？

Answer 1

---

我有同样的任务，这就是我发现的:

1. 您可以按照 Rounak Jain 制作的精彩教程制作自己的解决方案。该教程可在此处获得:

   https://www.raywenderlich.com/107687/uicollectionview-custom-layout-tutorial-spinning-wheel

2. 您可以重用现有代码。

---

由于时间限制，我选择了第二个变体，我发现的最佳 repo 是:

https://github.com/sarn/ARNRouletteWheelView

---

用法非常简单，但有两个有用的提示:

1. scrollToItemAtIndexPath 无法正常工作并导致应用程序崩溃。修复它的合并请求:https://github.com/sarn/ARNRouletteWheelView/pull/3/commits/7056e4bac2a04f2c8208d6d43e25d62a848f032d

2. 如果您想缩小项目并禁用项目本身的旋转(参见 gif)，您可以在 UICollectionViewCell 子类中执行以下操作:

#import "ARNRouletteWheelCellScaledAndRotated.h"
#import <ARNRouletteWheelView/ARNRouletteWheelLayoutAttributes.h>

@implementation ARNRouletteWheelCellScaledAndRotated

- (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes {
    [super applyLayoutAttributes:layoutAttributes];
    if(layoutAttributes != nil && [layoutAttributes isKindOfClass:[ARNRouletteWheelLayoutAttributes class]]) {
        ARNRouletteWheelLayoutAttributes *rouletteWheelLayoutAttributes = (ARNRouletteWheelLayoutAttributes *)layoutAttributes;
        self.layer.anchorPoint = rouletteWheelLayoutAttributes.anchorPoint;

        // update the Y center to reflect the anchor point
        CGPoint center = CGPointMake(self.center.x, self.center.y + ((rouletteWheelLayoutAttributes.anchorPoint.y - 0.5) * CGRectGetHeight(self.bounds)));
        self.center = center;

        // rotate back
        CGAffineTransform rotate = CGAffineTransformMakeRotation(-rouletteWheelLayoutAttributes.angle);
        // scale
        CGFloat scale = 1 - fabs(rouletteWheelLayoutAttributes.angle);
        CGAffineTransform translate = CGAffineTransformMakeScale(scale, scale);
        // Apply them to a view
        self.imageView.transform = CGAffineTransformConcat(translate, rotate);
    }
}

@end