icarousel - icarroussel 是否启用了这样的 3D 轮子？

Question

我必须在图片中呈现这样的菜单：

这个按钮可以围绕中心的圆环移动，类似于 3D 效果，这意味着您可以在移动时看到尺寸变换。

我记得 iCarroussel 项目可以做这样的事情，任何 pne 可以引导我找到提供此动画的正确控件吗？

谢谢。

编辑1：

好的，我可以看到 iCarousel 几乎是我所需要的，但是如何更改轮播垂直角度以获得第一张图片？看看 iCarousel 默认是怎样的。

Answer 1

您需要做的是以下（逐步如下所示）

下载 iCarousel ...

1. 打开 Tests/ARC iOS 下的示例项目（打开 iCarouselExample.xcodeproj）

2. 将默认设置为“Cylinder”而不是“Coverflow”（在 iCarouselExampleViewController.m 的 viewDidLoad 函数中）

   - (void)viewDidLoad 
   {
       [super viewDidLoad];
   
       carousel.type = iCarouselTypeCylinder;
       navItem.title = @"Cylinder";
   }
   

3. 由于您在自定义轮播中只需要六个项目，因此在 iCarouselExampleViewContoller.h 中将“窗格数”设置为 ...

   //NOTE! 
   #define NUMBER_OF_ITEMS 6
   

4. 使用此 NUMBER_OF_ITEMS 设置轮播（即在 iCarouselExampleViewContoller.m 中更改设置函数如下（使用 'wrap' 如图所示）

      - (void)setUp
   {
       //set up data
       wrap = YES;
       self.items = [NSMutableArray array];
   
       //NOTE! use preset number of vars in Carousel
       //for (int i = 0; i < 10000; i++)
       for (int i=0; i< NUMBER_OF_ITEMS; i++)
       {
          [items addObject:[NSNumber numberWithInt:i]];
       }
   }
   

5. 现在通过更新 uCarousel 类中的 _perspective 参数在 iCarousel 中提供透视图。在 iCarousel.m 的设置函数中执行此操作：

   - (void)setUp
   {
       _type = iCarouselTypeLinear;
       //NOTE! Tweak perspective parameters
       _perspective = -1.0f/750.0f; 
       ... etc ...
   }
   

6. 最后，通过围绕 x 轴将旋转木马旋转 15 度，使整个视图围绕 X 轴“倾斜”。这样做的方法是调整变换矩阵（设置 transform = CATransform3DRotate(transform, -15.0f*M_PI/180.0f, 1.0f, 0.0f, 0.0f) 在代码中，在 iCarousel.m 的 transformForItemView 函数中将其更新为如下：

   - (CATransform3D)transformForItemView:(UIView *)view withOffset:(CGFloat)offset
   {   
   //set up base transform
       CATransform3D transform = CATransform3DIdentity;
       transform.m34 = _perspective;
       transform = CATransform3DTranslate(transform, -_viewpointOffset.width, _viewpointOffset.height, 0.0f);
   
       //perform transform
       switch (_type)
       {
       .... SKIPPED THE INITIAL SECTIONS OF THIS CODE WE MAKE OUR CHANGE IN THE CYLINDER SECTION ... 
           case iCarouselTypeCylinder:
           case iCarouselTypeInvertedCylinder:
           {
   
           CGFloat count = [self circularCarouselItemCount];
           CGFloat spacing = [self valueForOption:iCarouselOptionSpacing withDefault:1.0f];
           CGFloat arc = [self valueForOption:iCarouselOptionArc withDefault:M_PI * 2.0f];
           CGFloat radius = [self valueForOption:iCarouselOptionRadius withDefault:fmaxf(0.01f, _itemWidth * spacing / 2.0f / tanf(arc/2.0f/count))];
           CGFloat angle = [self valueForOption:iCarouselOptionAngle withDefault:offset / count * arc];
   
           if (_type == iCarouselTypeInvertedCylinder)
           {
               radius = -radius;
               angle = -angle;
           }
   
           if (_vertical)
           {
               transform = CATransform3DTranslate(transform, 0.0f, 0.0f, -radius);
               transform = CATransform3DRotate(transform, angle, -1.0f, 0.0f, 0.0f);
               return CATransform3DTranslate(transform, 0.0f, 0.0f, radius + 0.01f);
           }
           else
           {
   
               transform = CATransform3DTranslate(transform, 0.0f, 0.0f, -radius);
   
               //NOTE! Give it a tilt about the "X" axis
               transform = CATransform3DRotate(transform, -15.0f*M_PI/180.0f, 1.0f, 0.0f, 0.0f);
   
               transform = CATransform3DRotate(transform, angle, 0.0f, 1.0f, 0.0f);
   
               return CATransform3DTranslate(transform, 0.0f, 0.0f, radius + 0.01f);
           }