Question

I’m trying to tweak iCarousel in order to achieve this carousel:

I’m using iCarousel : https://github.com/nicklockwood/iCarousel

Here is is my current work:

So what I need to do now is to change carousel perspective and enlarge central item. I’m a little bit lost, found this post related to same issue:

iPhone – Carousel

So I modified iCarousel class in this way:

- (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)
    {
        case iCarouselTypeCustom:
        {
            if ([_delegate respondsToSelector:@selector(carousel:itemTransformForOffset:baseTransform:)])
            {
                return [_delegate carousel:self itemTransformForOffset:offset baseTransform:transform];
            }

            //else, fall through to linear transform
        }
        case iCarouselTypeLinear:
        {
            CGFloat spacing = [self valueForOption:iCarouselOptionSpacing withDefault:1.0f];
            if (_vertical)
            {
                return CATransform3DTranslate(transform, 0.0f, offset * _itemWidth * spacing, 0.0f);
            }
            else
            {
                return CATransform3DTranslate(transform, offset * _itemWidth * spacing, 0.0f, 0.0f);
            }
        }
        case iCarouselTypeRotary:
        {
            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(_itemWidth * spacing / 2.0f, _itemWidth * spacing / 2.0f / tanf(arc/2.0f/count))];
            CGFloat angle = [self valueForOption:iCarouselOptionAngle withDefault:offset / count * arc];

            if (_type == iCarouselTypeInvertedRotary)
            {
                radius = -radius;
                angle = -angle;
            }

            if (_vertical)
            {
                return CATransform3DTranslate(transform, 0.0f, radius * sin(angle), radius * cos(angle) - radius);
            }
            else
            {
                float MAX_TILT_VALUE = 3.0f;
                float tilt = MAX_TILT_VALUE * cos(angle); // greater angle means greater vertical offset
                return CATransform3DTranslate(transform, radius * sin(angle), tilt, radius * cos(angle) - radius);
            }
        }

By the way, I’m using iCarouselTypeRotary. I was tweaking all the values with no luck.I will appreciate your help, I like graphic programming it’s new to me.

Thanks.

Answer 1

Here is how you can make an effect close to what you are trying to achieve:

    case iCarouselTypeInvertedRotary:
    {
        ...
        //-- you might need to multiply radius by a certain factor to make the carousel appear denser:
        CGFloat radius = 0.35 * [self valueForOption:iCarouselOptionRadius withDefault:fmaxf(_itemWidth * spacing / 2.0f, _itemWidth * spacing / 2.0f / tanf(arc/2.0f/count))];

        ...

        else
        {

            //-- for the not inverted case, you need to add
            //-- an y-axis translation factor to add depth-tilting of the carousel plane
            //-- + a factor to increase depth-scaling effect:

            return CATransform3DTranslate(transform,
                            radius * sin(angle),
                            0.5 * radius * cos(angle),
                            2.0 * (radius * cos(angle) - radius));
        }
    }

I have used sample values that you might need to tweak to get the correct effect.

btw, the correct way to do this is not modifying transformForItemView, rather you need to made your carousel into a iCarouselTypeCustom and then return the transform in your delegate carousel:itemTransformForOffset:baseTransform:.