Search code examples
icarousel

Did icarroussel enable 3D wheel like this?

I have to present a menu like this in the picture :

enter image description here

where this buttons can move arround the cercle in the center similar to 3D effect, means you can see there dimensions transformation while moving.

I remember that iCarroussel project can do such things, Could Any pne guide me to the right control that provide this animation?

Thanks.

EDIT1 :

Ok I am able to see that iCarousel is almost what I need, but how to change the carousel vertical angle to get like the first picture? see how iCarousel is by default.

enter image description here

Solution

  • What you need to do is the following (Step by step as indicated below)

    Download iCarousel ...

    1. Open the sample project under Tests/ARC iOS (open iCarouselExample.xcodeproj)

    2. Set default to "Cylinder" instead of "Coverflow" (in the viewDidLoad function of iCarouselExampleViewController.m)

      - (void)viewDidLoad 
{
    [super viewDidLoad];

    carousel.type = iCarouselTypeCylinder;
    navItem.title = @"Cylinder";
}

    3. Since you need just six items in your custom carousel set a "number of panes" in iCarouselExampleViewContoller.h as ...

      //NOTE! 
#define NUMBER_OF_ITEMS 6

    4. Use this NUMBER_OF_ITEMS to setup the carousel (i.e. in iCarouselExampleViewContoller.m change the setup function as follows (use 'wrap' as shown)

         - (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. Now provide the perspective in iCarousel by updating the _perspective parameter in the uCarousel class. Do this in the setup function of iCarousel.m:

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

    6. Finally give the entire view a "tilt" about the X axis by rotating the carousel by 15 degrees about the x axis. The way to do this is to tweak the transform matrix (set transform = CATransform3DRotate(transform, -15.0f*M_PI/180.0f, 1.0f, 0.0f, 0.0f) In code, in the iCarousel.m's transformForItemView function update this as follows:

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