今天起为大家带来ios动画特效合集之立方体翻转,应用程序如美女,动画如衣裳,赶紧为她披上漂亮的衣装吧!
先来看看效果:
下面进入正题,是时候展现真正的技术了:
首先在控制器里添加一个
scrollView
,再在scrollView
上的对应位置上添加要展示的imageView
(立方体视图组),当然也可以放上其它子控制器的view
实现更多功能这个随意不是重点//*******添加滚动视图* * * * * * * *
[自行创建滚动视图];
//******创建立方体视图组******
【self createcubicyviewrarray】;
//添加视图到滚动视图上
for(int I=0;i _ viewArray.counti ) {
ui imageview * transView=_ view array[I];
//视图在滚动视图上对应的位置
横向视角。x=自我。查看。界限。尺寸。宽度* I;
监听
scrollView
的滑动事件,在这里要先获取到显示的当前页、上一页、下一页
,然后让这三个页面同时做3DTransform
变换#杂注标记-滚动视图滑动事件
-(void)滚动视图didscroll:(ui滚动视图*)滚动视图{
//当前页数
n整数当前页面=_当前页面;
//当前视图
ui view * current view=_ view数组[当前页面];
//上一个视图
UIView * lastView=nil
if (currentPage-1=0) {
last view=_ view数组[当前页-1];
}
//下一个视图控制器视图
UIView * nextView
if (currentPage 1=3) {
next view=_ view数组[当前第1页];
}
//本次偏移距离
CG浮动电流偏移=滚动视图。内容偏移量。x-当前页面*自身。查看。界限。尺寸。宽度;
//本次偏移角度
重心浮动角度=当前偏移/自身。查看。界限。尺寸。宽度* M _ PI _ 2;
//****************当前视图移动变幻***************
//设置锚点
当前视图。层。锚点=CGPointMake(0.5,0.5);
//向屏幕前方移动
cat transform 3d move=cat transform 3d make translation(0,0,self。查看。界限。尺寸。宽度/2);
//旋转
cat transform 3d rotate=cat transform 3d make rotation(-delta angle,0,1,0);
//平移
cat transform 3d plain tmove=cat transform 3d make translation(当前偏移量,0,0);
//向屏幕后方移动
cat transform 3d back=cat transform 3d make translation(0,0,-self。查看。界限。尺寸。宽度/2);
//连接
cat transform 3d concat=cat transform 3d concat(cat transform 3d concat(move,CATransform3DConcat(rotate,plaintMove))、back);
cat transform 3d transform=cat transform 3d perspect(concat,CGPointMake(currentOffset/2,self.view.bounds.size.height),5000.0 f);
//添加变幻特效
当前视图。层。transform=变换;
//****************下一个视图移动变幻***************
//设置锚点
nextview。层。锚点=CGPointMake(0.5,0.5);
//向屏幕前方移动
cat transform 3d move 2=cat transform 3d make translation(0,0,self。查看。界限。尺寸。宽度/2);
//旋转
cat transform 3d rotate 2=cat transform 3d make rotation(-delta angle M _ PI _ 2,0,1,0);
//平移
cat transform 3d plain t move 2=cat transform 3d make translation(当前偏移-自身。查看。界限。尺寸。宽度,0,0);
//向屏幕后方移动
cat transform 3d back 2=cat transform 3d make translation(0,0,-self。查看。界限。尺寸。宽度/2);
//拼接
cat transform 3d concat 2=cat transform 3d concat(cat transform 3d concat(move 2,CATransform3DConcat(rotate2,plaintMove2)),back 2);
cat transform 3d transform 2=cat transform 3d perspect(concat 2,CGPointMake(self。查看。界限。尺寸。width/2当前偏移量/2,self.view.bounds.size.height),5000.0 f);
//添加变幻特效
下一个视图。层。变换=变换2;
//****************上一个视图移动变幻***************
//设置锚点
最后一次查看。层。锚点=CGPointMake(0.5,0.5);
//向屏幕前方移动
cat transform 3d move 3=cat transform 3d make translation(0,0,self。查看。界限。尺寸。宽度/2);
//旋转
cat transform 3d rotate 3=cat transform 3d make rotation(-delta angle-M _ PI _ 2,0,1,0);
//平移
cat transform 3d plain t move 3=cat transform 3d make translation(当前偏移自身。查看。界限。尺寸。宽度,0,0);
//向屏幕后方移动
cat transform 3d back 3=cat transform 3d make translation(0,0,-self。查看。界限。尺寸。宽度/2);
//拼接
cat transform 3d concat 3=cat transform 3d concat(cat transform 3d concat(move 3,CATransform3DConcat(rotate3,plaintMove3)),back 3);
cat transform 3d transform 3=cat transform 3d perspect(concat 3,CGPointMake(-self。查看。界限。尺寸。width/2当前偏移量/2,self.view.bounds.size.height),5000.0 f);
//添加变幻特效
最后一次查看。层。变换=变换3;
}
这里记得要复原一下3D变换,不然滑快了会出现页面错乱
-(void)scrollviewdidenderming:(UIScrollView *)滚动视图{
//改变选中页序号
[自我改变指数];
//3D变幻恢复原状态
for (UIView * view in _viewArray) {
查看。层。transform=cat transform 3d identity;
}
}
对了,记得添加一个很重要的透视变换函数,核心在于仿射矩阵的m34属性,这样才会产生远小近大的三维(三维的缩写)效果,让动画更炫酷
//3D透视函数
三维变换三维变换透视(重心点中心,浮动显示)
{
cat transform 3d transToCenter=cat transform 3d make translation(-center。x,-center.y,0);
cat transform 3d trans back=cat transform 3d make translation(居中。x,center.y,0);
cat transform 3d scale=cat transform 3d identity;
规模。m34=-1.0f/disZ;
返回cat transform 3d concat(cat transform 3d concat(trans to center,scale),trans back);
}
这一篇文章就到这里了,大家有什么意见和问题记得及时反馈,希望本文对大家开发IOS有所帮助。