iCarousel实现轮播(带缩放效果)

效果图

gif5.gif

关键代码

这是iCarousel自定义部分的关键代码,iCarousel的用法大家应该都知道,没接触过的可以百度,这里就不贴其他代码啦

- (CATransform3D)carousel:(iCarousel *)carousel itemTransformForOffset:(CGFloat)offset baseTransform:(CATransform3D)transform{
    transform = CATransform3DTranslate(transform, offset * (bannerwidth), 0, 0);
    CGFloat scalex = MAX(0, (1-(6.0/bannerwidth * fabs(offset))));
    CGFloat scaley = MAX(0, (1-(12.0/(130.0) * fabs(offset))));
    return CATransform3DScale(transform, scalex, scaley, 1);
}

详解

itemTransformForOffset:(CGFloat)offset

offset 是item的索引

offset == 0是当前展示的item

offset < 0是当前展示item左边的item

offset > 0是当前展示item右边的item

baseTransform:(CATransform3D)transform

transform 是iCarousel的基础变换,对应到每个item
在xcode查看的层次是这样的


dy20180526104944193.jpg
transform = CATransform3DTranslate(transform, offset * (bannerwidth), 0, 0);

这句代码将每个item按照offset偏移item的宽度,如下图效果


dy20180526105410425.jpg
CGFloat scalex = MAX(0, (1-(6.0/bannerwidth * fabs(offset))));

宽度的缩放比例

CGFloat scaley = MAX(0, (1-(12.0/(130.0) * fabs(offset))));

高度的缩放比例

完整代码
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容