Mac Dock就像放大iPad一样 [英] Mac Dock like magnification for iPad

问题描述

我试图通过iCarousel库为我的iPad应用程序带来放大效果。有了这个，我可以使用下面的代码放大旋转木马的中心项目，但尝试缩放中心项目的相邻项目，缩放级别略小于中心项目。

I am trying to bring out dock like magnification effect for my iPad app thru iCarousel library. With that i am able to zoom in the center item of the carousel with the following piece of code, but trying to zoom the adjacent items of the centre item with zoom level little less than the centre item.

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

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

Looking forward for any kind of help. thanks.

推荐答案

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

This function could be your answer:

< img src =https://i.imgur.com/hsH4zxo.gifalt =在此处输入图像说明>

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

its graph (for scaleMax = 3, xFactor = 1):

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

This function is used directly for calculating the scale factor from the carousel offset. In addition you need to shift the elements to left and right, so that don't overlap (as you already did). This can be done either by shifting the items by the function's integral, which works, but the gap in the center is huge this way. Or it can be calculated manually by taking a sum of all scaled items. The gap can stay constant, or it can be scaled separately.

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

Notice that the scale is equal to 1 in the center and descends to 1/scale_max by the edges. This is because scaling down doesn't create undesirable pixelated effects. Make your item view as you want it to appear in the center and the views on the edges will get scaled down.

这可能是用法：

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

结果：

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

You can try to alter constants for different behaviors. Also changing the exponent to another even number can further widen the peak and sharpen the descent to the minimum scale.

这篇关于Mac Dock就像放大iPad一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！