ios中的圆轮动画实现

Posted 2023-03-10

【中文标题】ios中的圆轮动画实现

【英文标题】：Circular wheel animation implementation in ios

【发布时间】：2015-08-31 10:59:53

【问题描述】：

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

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

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

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

【问题讨论】：

github.com/nicklockwood/iCarousel 使用和定制它。

我试过用这个旋转木马，但这并不能解决我的问题。

【参考方案1】：

---

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

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

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

您可以重用现有代码。

---

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

https://github.com/sarn/ARNRouletteWheelView

---

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

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

如果您想缩小项目并禁用项目本身的旋转（参见 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