5

我正在尝试通过 iCarousel 库为我的 iPad 应用程序带来像码头一样的放大效果。有了它，我可以使用以下代码放大轮播的中心项目，但尝试缩放中心项目的相邻项目，其缩放级别略低于中心项目。

- (CATransform3D)carousel:(iCarousel *)_carousel itemTransformForOffset: 
                         :(CGFloat)offset baseTransform:(CATransform3D)transform
 {
    CGFloat MAX_SCALE = 1.95f; //max scale of center item 
    CGFloat MAX_SHIFT = 40.0f; //amount to shift items to keep spacing the same 

    CGFloat shift = fminf(1.0f, fmaxf(-1.0f, offset));
    CGFloat scale = 1.0f + (1.0f - fabs(shift)) * (MAX_SCALE - 1.0f);
    transform = CATransform3DTranslate(transform, 
    offset * _carousel.itemWidth * 1.08f + shift * MAX_SHIFT, 0.0f, 0.0f);
    return CATransform3DScale(transform, scale, scale, scale);
}

期待任何形式的帮助。谢谢。

4

2 回答 2

16

这个函数可能是你的答案：

在此处输入图像描述

它的图表（对于 scaleMax = 3，xFactor = 1）：

在此处输入图像描述

此函数直接用于根据轮播偏移量计算比例因子。此外，您需要将元素向左和向右移动，以免重叠（就像您已经做过的那样）。这可以通过按函数的积分移动项目来完成，这很有效，但是这样中心的差距很大。或者可以通过对所有缩放项目求和来手动计算。间隙可以保持不变，也可以单独缩放。

请注意，中心的比例等于 1，边缘下降到 1/scale_max。这是因为按比例缩小不会产生不良的像素化效果。使您的项目视图显示在中心，边缘的视图将按比例缩小。

这可能是用法：

-(CGFloat) scaleForX:(CGFloat)x xFactor:(CGFloat)xFactor centerScale:(CGFloat)centerScale
{
    return (1+1/(sqrtf(x*x*x*x*xFactor*xFactor*xFactor*xFactor+1))*(centerScale-1.0))/centerScale;
}

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform
{
    //items in the center are scaled by this factor
    const CGFloat centerScale = 4.0f;
    //the larger the xFactor, the smaller the magnified area
    const CGFloat xFactor = 1.5f;
    //should the gap also be scaled? or keep it constant.
    const BOOL scaleGap = NO;

    const CGFloat spacing = [self carousel:carousel valueForOption:iCarouselOptionSpacing withDefault:1.025];
    const CGFloat gap = scaleGap?0.0:spacing-1.0;

    //counting x offset to keep a constant gap
    CGFloat scaleOffset = 0.0;
    float x = fabs(offset);
    for(;x >= 0.0; x-=1.0)
    {
        scaleOffset+=[self scaleForX:x xFactor:xFactor centerScale:centerScale];
        scaleOffset+= ((x>=1.0)?gap:x*gap);
    }
    scaleOffset -= [self scaleForX:offset xFactor:xFactor centerScale:centerScale]/2.0;
    scaleOffset += (x+0.5)*[self scaleForX:(x+(x>-0.5?0.0:1.0)) xFactor:xFactor centerScale:centerScale];
    scaleOffset *= offset<0.0?-1.0:1.0;
    scaleOffset *= scaleGap?spacing:1.0;

    CGFloat scale = [self scaleForX:offset xFactor:xFactor centerScale:centerScale];
    transform = CATransform3DTranslate(transform, scaleOffset*carousel.itemWidth, 0.0, 0.0);
    transform = CATransform3DScale(transform, scale, scale, 1.0);
    return transform;
}

结果： 在此处输入图像描述

您可以尝试更改不同行为的常量。同样将指数更改为另一个偶数可以进一步扩大峰值并将下降幅度锐化到最小范围。

于 2013-10-24T15:03:44.740 回答
0

您需要观看WWDC 2012 - Advanced Collection Views and Building Custom Layouts的第 219 集。我知道它与集合视图有关，但我相信你会找到一种方法来调整该代码:)

于 2013-10-04T10:15:47.777 回答