Swift实现3D轮播图效果

Swift实现3D轮播图效果

本文主要详细介绍了用Swift实现3D旋转木马的效果。本文中的示例代码非常详细,具有一定的参考价值。感兴趣的朋友可以参考一下。

本文分享Swift实现3D轮播效果的具体代码,供大家参考。具体内容如下

我整天逛淘宝,偶尔看到展示页面上有炫目的效果。没事干的时候,我会试着写一个。先来看看效果:

简单写下思路,这里我选择使用UICollectionView控件,先根据它的复用和滚动特性做出无限转盘的效果。关键代码:

//数据源数组

让totalCount=100

var模型:[String]=[String]() {

didSet {

//判断元素的个数

如果型号.计数2 {

collection view . isscrollenabled=false

}

//我找到了一个方法,在线添加100组数据源对应的索引数组indexArr。

0中的for _ in.totalCount {

对于0中的j.模型.计数{

indexArr.append(j)

}

}

//滚动到第50个数据源的开头。

collectionView.scrollToItem(位于:index path(item:total count/2 * models . count,section: 0),位于:水平居中,动画:假)

}

}

用滚动和行走的方法进行加工:

func scrollviewdidenddurring(_ scroll view:ui scroll view){

//找到滚动停止点对应的collectionView的indexPath。

let point=self . convert(collection view . center,to: collectionView)

let index=collection view . indexpathforitem(at:point)

设indexpath=(index?划?0) % models.count

collectionView.scrollToItem(位于:index path(item:total count/2 * models . count index path,section: 0),位于:水平居中,动画:假)

}

以上是滚动过程,后面是item的渐变效果过程。看到这里,我想到了写一个UICollectionViewFlowLayout。

对于collectionView类,UIcollectionViewFlowLayout用于管理项的显示方式。首先在显示视图中重写layoutAttributes方法,找到属性对应的项及其属性,以及CollectionView在该方法中的偏移量和中心点,进行一系列计算:

覆盖func layoutAttributesForElements(in rect:CG rect)-[UICollectionViewLayoutAttributes]?{

//集合视图的宽度和高度(此处默认宽度和高度相等)

let item height=self . collection view?框架.高度?0

//可以是视图中的属性数组。

let array=super . layoutattributesforelements(in:rect)

//当项目的透明度开始改变时,项目的中心点x

let centerX=self.collectionView! contentOffset.x itemHeight/2

打印(self.collectionView? contentOffset.x?0)

对于数组中的属性!{

//将改变开始时项目的中心点X与实际中心点进行比较

让value=attributes . center . x-centex

让delta=abs(值)

//设置缩放比例,其中4*itemHeight可以根据缩放效果进行修改。

让scale=1 - delta/(4*itemHeight)

//设置缩放比例

attributes . transform=cgaffinetransform . init(scaleX:scale,y: scale)

//层次关系。设置该属性使项目依次上下排列。

attributes . zindex=Int(1-ABS(delta))

//value=0表示向左移动,最前面的项目停止一定距离。

如果值=0{

//实际中心点小于或等于以项目中心点为变化起点的设定边界值。

如果delta=0,delta=itemHeight

{

//项目的中心点是固定的。

attributes . center . x=centex

//根据推进值更改项目的透明度。这里的delta10希望物品到达目标区域时有暂停效果,而不是直接进入改变透明度的阶段。

attributes.alpha=(delta 10)?(1 - delta/(项目高度/4)) : 1

//设置缩放比例,暂停阶段不放大。

attributes . transform=cgaffinitetransform . init(scaleX:1,y: 1)

}否则{

//运动大于边界值,即从暂停阶段到透明度变化。接下来是下一个项目,当前项目的透明度变为0。

attributes.alpha=0

}

}

}

返回数组

}

解决最后一个小问题,拖动项目开始滚动,滚动结束时让它自动滚动到网格区域,而不是停在当前或许不适当的地方,重写UICollectionViewFlowLayout另一个方法:

override func targetContentOffset(for proposedContentOffset proposedContentOffset:重心点,滚动速度速度:重心点)-重心点{

设target rect=CG rect(x:proposedcontentoffset。x,y: 0.0,宽度:self.collectionView!bounds.size.width,height: self.collectionView!边界。大小。高度)

//目标区域中包含的细胞

设attrArray=super。layoutattributesforelements(in:目标矩形)为![UICollectionViewLayoutAttributes]

//collectionView落在屏幕重点的x坐标

设水平centex=proposedcontentoffset。x(自我。收藏观?框架。高度?0)/2

var offsetAdjustment=重心浮动(最大浮动)

对于attrArray中的布局属性{

let itemhorizontalcentx=布局属性。居中。x

//找出离中心店最近的

if(ABS(itemhorizontalcentex-horizontal centex)ABS(offsetAdjustment)){

offsetAdjustment=itemhorizontalcentx-水平百分比

}

}

//返回集合视图最终停留的位置

返回CG点(x:proposedcontentoffset。x offsetAdjustment,y: proposedContentOffset.y)

}

//当集合视图的显示范围发生改变的时候,是否重新布局

override func应使布局无效(对于边界更改新边界:CG rect)-Bool {

返回真实的

}

最后一个方法不写看不到渐变的效果。

源码地址:点击打开链接

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

Swift实现3D轮播图效果