本文主要详细介绍了用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 {
返回真实的
}
最后一个方法不写看不到渐变的效果。
源码地址:点击打开链接
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。