Mac Dock就像放大iPad一样

时间:2013-10-04 09:49:49

标签: ios icarousel

我试图通过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);
}

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

2 个答案:

答案 0 :(得分:14)

这个功能可能是你的答案:

enter image description here

其图表(对于scaleMax = 3,xFactor = 1):

enter image description here

此功能直接用于计算轮播偏移量的比例因子。此外,您需要将元素向左和向右移动,以便不重叠(如您所做)。这可以通过使用函数的积分来移动项目来完成,这有效,但是中心的间隙很大。或者可以通过获取所有缩放项目的总和来手动计算。间隙可以保持不变,也可以单独缩放。

请注意,中心的比例等于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;
}

结果: enter image description here

您可以尝试更改不同行为的常量。同时将指数改为另一个偶数可以进一步扩大峰值并使下降趋于最小。

答案 1 :(得分:0)

您需要从WWDC 2012 - 高级集合视图和构建自定义布局观看第219集。我知道它与集合视图有关,但我相信你会找到一种方法来调整代码:)