使用iCarousel缩放项目 [英] Scale items with iCarousel

问题描述

我试图使用iCarousel作为我的解决方案，我需要实现类似下面的图像

I was trying to use iCarousel for one my solutions, I need to achieve something like the image below

这应该是正确的方式

iCarouselOptionFadeMin iCarouselOptionFadeMax iCarouselOptionFadeRange iCarouselOptionFadeMinAlpha 适用于使用

- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value

我试图创建一个与

- (CGFloat)alphaForItemWithOffset:(CGFloat)offset

我发现它可能是使用偏移值完成，但事情不起作用，任何人都可以帮我实现这个目标吗？

I discovered that it cane be done using offset values, but things are not working me, can any one can help me achieving this?

谢谢。

推荐答案

你可以通过 iCarousel 's iCarouselTypeCustom 在委托方法中输入

You can do this via the iCarousel's iCarouselTypeCustom type in the delegate method

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform

Just设置轮播的类型（例如在旋转木马的视图控制器的 viewDidLoad 中：

Just set the type of the carousel (e.g. in viewDidLoad of the carousel's view controller):

self.carousel.type = iCarouselTypeCustom;

并根据需要计算变换。我把物体放在双曲线上，当它们远离中心时，它们会稍微收缩。这非常类似于你的形象，我认为：

And calculate the transform as you like. I've laid the objects on a hyperbola, and shrink them in addition a bit as they move away from the center. That quite resembles your image, I think:

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
    const CGFloat offsetFactor = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.0f]*carousel.itemWidth;

    //The larger these values, as the items move away from the center ...

    //... the faster they move to the back
    const CGFloat zFactor = 150.0f;

    //... the faster they move to the bottom of the screen
    const CGFloat normalFactor = 50.0f;

    //... the faster they shrink
    const CGFloat shrinkFactor = 3.0f;

    //hyperbola
    CGFloat f = sqrtf(offset*offset+1)-1;

    transform = CATransform3DTranslate(transform, offset*offsetFactor, f*normalFactor, f*(-zFactor));
    transform = CATransform3DScale(transform, 1/(f/shrinkFactor+1.0f), 1/(f/shrinkFactor+1.0f), 1.0);
    return transform;
}

，结果：

and the result:

您可以根据自己的喜好调整浮点常数。

you can adjust the float constants to your liking.

对于在缩放时围绕圆圈移动项目，只需使用测角功能进行翻译，然后旋转和缩放：

For moving items around a circle while scaling them just use goniometric functions for translation, then rotate and scale:

- (CGFloat)carousel:(iCarousel *)carousel valueForOption:(iCarouselOption)option withDefault:(CGFloat)value
{
    if (option == iCarouselOptionSpacing)
    {
        return value * 2.0f;
    }
    if(option == iCarouselOptionVisibleItems)
    {
        return 11;
    }
    if(option == iCarouselOptionWrap) return YES;
    return value;
}

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
    const CGFloat radius = [self carousel:carousel valueForOption:iCarouselOptionRadius withDefault:200.0];
    const CGFloat offsetFactor = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.0f]*carousel.itemWidth;
    const CGFloat angle = offset*offsetFactor/radius;

    //... the faster they shrink
    const CGFloat shrinkFactor = 2.0f;
    //hyperbola (now only for shrinking purposes)
    CGFloat f = sqrtf(offset*offset+1)-1;


    transform = CATransform3DTranslate(transform, radius*sinf(angle), radius*(1-cosf(angle)), 0.0);
    transform = CATransform3DRotate(transform, angle, 0, 0, 1);
    transform = CATransform3DScale(transform, 1/(f*shrinkFactor+1.0f), 1/(f*shrinkFactor+1.0f), 1.0);
    return transform;
} 

再次，结果：

and again, the result:

你可以调整<$ c $中的间距和半径c> carousel：valueForOption：withDefault： method。

you can adjust the spacing and the radius in the carousel:valueForOption:withDefault: method.

享受！ ：）

这篇关于使用iCarousel缩放项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！