iOS黑科技【動畫特效篇】第一期
今天起為大家?guī)韎OS動畫特效合集，APP如美女，動畫如衣裳疆偿，別讓你家的美女再裸奔了，趕緊為她披上漂亮的衣裝吧搓幌！
廢話不多說杆故，直接上效果：
CubicTurning.gif
親喜歡的話就直接帶走吧：
https://github.com/XMDashen/CubicPageTurning.git
順便給個贊哦！(* ￣3)(ε￣ *)
下面進入正題溉愁，是時候展現(xiàn)真正的技術(shù)了：
首先在控制器里添加一個scrollView处铛，再在scrollView上的對應位置上添加要展示的imageView(立方體視圖組)，當然也可以放上其它子控制器的view實現(xiàn)更多功能這個隨意不是重點
//*******添加scrollView*******
[self createScrollView];
//******創(chuàng)建立方體視圖組******
[self createCubicViewArray];
//添加視圖到scrollView上
for (int i=0; i<_viewArray.count; i++) {
UIImageView *transView=_viewArray[i];
//視圖在scrollView上對應的位置
transView.x=self.view.bounds.size.width * i;
監(jiān)聽scrollView的滑動事件拐揭，在這里要先獲取到顯示的當前頁撤蟆、上一頁、下一頁堂污，然后讓這三個頁面同時做3DTransform變換
#pragma mark - scrollView滑動事件
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
//當前頁數(shù)
NSInteger currentPage=_currentPage;
//當前視圖
UIView *currentView=_viewArray[currentPage];
//上一個視圖
UIView *lastView=nil;
if (currentPage-1>=0) {
lastView=_viewArray[currentPage-1];
}
//下一個視圖控制器視圖
UIView *nextView;
if (currentPage+1<=3) {
nextView=_viewArray[currentPage+1];
}
//本次偏移距離
CGFloat currentOffset=scrollView.contentOffset.x-currentPage*self.view.bounds.size.width;
//本次偏移角度
CGFloat deltaAngle=currentOffset/self.view.bounds.size.width * M_PI_2;
//****************當前視圖移動變幻***************
//設(shè)置錨點
currentView.layer.anchorPoint=CGPointMake(0.5, 0.5);
//向屏幕前方移動
CATransform3D move = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2);
//旋轉(zhuǎn)
CATransform3D rotate = CATransform3DMakeRotation(-deltaAngle, 0, 1, 0);
//平移
CATransform3D plaintMove=CATransform3DMakeTranslation( currentOffset, 0, 0);
//向屏幕后方移動
CATransform3D back = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2);
//連接
CATransform3D concat=CATransform3DConcat( CATransform3DConcat(move, CATransform3DConcat(rotate, plaintMove)),back);
CATransform3D transform=CATransform3DPerspect(concat, CGPointMake(currentOffset/2, self.view.bounds.size.height), 5000.0f);
//添加變幻特效
currentView.layer.transform=transform;
//****************下一個視圖移動變幻***************
//設(shè)置錨點
nextView.layer.anchorPoint=CGPointMake(0.5, 0.5);
//向屏幕前方移動
CATransform3D move2 = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2);
//旋轉(zhuǎn)
CATransform3D rotate2 = CATransform3DMakeRotation(-deltaAngle+M_PI_2, 0, 1, 0);
//平移
CATransform3D plaintMove2=CATransform3DMakeTranslation( currentOffset-self.view.bounds.size.width, 0, 0);
//向屏幕后方移動
CATransform3D back2 = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2);
//拼接
CATransform3D concat2=CATransform3DConcat( CATransform3DConcat(move2, CATransform3DConcat(rotate2, plaintMove2)),back2);
CATransform3D transform2=CATransform3DPerspect(concat2, CGPointMake(self.view.bounds.size.width/2+currentOffset/2, self.view.bounds.size.height), 5000.0f);
//添加變幻特效
nextView.layer.transform=transform2;
//****************上一個視圖移動變幻***************
//設(shè)置錨點
lastView.layer.anchorPoint=CGPointMake(0.5, 0.5);
//向屏幕前方移動
CATransform3D move3 = CATransform3DMakeTranslation(0, 0, self.view.bounds.size.width/2);
//旋轉(zhuǎn)
CATransform3D rotate3 = CATransform3DMakeRotation(-deltaAngle-M_PI_2, 0, 1, 0);
//平移
CATransform3D plaintMove3=CATransform3DMakeTranslation( currentOffset+self.view.bounds.size.width, 0, 0);
//向屏幕后方移動
CATransform3D back3 = CATransform3DMakeTranslation(0, 0, -self.view.bounds.size.width/2);
//拼接
CATransform3D concat3=CATransform3DConcat(CATransform3DConcat(move3, CATransform3DConcat(rotate3, plaintMove3)),back3);
CATransform3D transform3=CATransform3DPerspect(concat3, CGPointMake(-self.view.bounds.size.width/2+currentOffset/2, self.view.bounds.size.height), 5000.0f);
//添加變幻特效
lastView.layer.transform=transform3;
}
這里記得要復原一下3D變換家肯，不然滑快了會出現(xiàn)頁面錯亂
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//改變選中頁序號
[self changeIndex];
//3D變幻恢復原狀態(tài)
for (UIView * view in _viewArray) {
view.layer.transform=CATransform3DIdentity;
}
}
對了，記得添加一個很重要的透視變換函數(shù)盟猖，核心在于仿射矩陣的m34屬性讨衣，這樣才會產(chǎn)生遠小近大的3D效果，讓動畫更炫酷
//3D透視函數(shù)
CATransform3D CATransform3DMakePerspective(CGPoint center, float disZ)
{
CATransform3D transToCenter = CATransform3DMakeTranslation(-center.x, -center.y, 0);
CATransform3D transBack = CATransform3DMakeTranslation(center.x, center.y, 0);
CATransform3D scale = CATransform3DIdentity;
scale.m34 = -1.0f/disZ;
return CATransform3DConcat(CATransform3DConcat(transToCenter, scale), transBack);
}
這一期就到這里了式镐，親們有什么意見和問題記得及時反饋哦反镇，喜歡的話點個關(guān)注給個贊(づ￣3￣)づ╭?～
