iOS動畫特效之立方體翻轉(zhuǎn)
先來看看效果:
下面進(jìn)入正題,是時候展現(xiàn)真正的技術(shù)了:
首先在控制器里添加一個scrollView,再在scrollView上的對應(yīng)位置上添加要展示的imageView(立方體視圖組),當(dāng)然也可以放上其它子控制器的view實現(xiàn)更多功能這個隨意不是重點
//*******添加scrollView******* [self createScrollView]; //******創(chuàng)建立方體視圖組****** [self createCubicViewArray];
//添加視圖到scrollView上 for (int i=0; i<_viewArray.count; i++) { UIImageView *transView=_viewArray[i]; //視圖在scrollView上對應(yīng)的位置 transView.x=self.view.bounds.size.width * i;
監(jiān)聽scrollView的滑動事件,在這里要先獲取到顯示的當(dāng)前頁、上一頁、下一頁,然后讓這三個頁面同時做3DTransform變換
#pragma mark - scrollView滑動事件 -(void)scrollViewDidScroll:(UIScrollView *)scrollView{ //當(dāng)前頁數(shù) NSInteger currentPage=_currentPage; //當(dāng)前視圖 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; //****************當(dāng)前視圖移動變幻*************** //設(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; }
這里記得要復(fù)原一下3D變換,不然滑快了會出現(xiàn)頁面錯亂
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{ //改變選中頁序號 [self changeIndex]; //3D變幻恢復(fù)原狀態(tài) for (UIView * view in _viewArray) { view.layer.transform=CATransform3DIdentity; } }
對了,記得添加一個很重要的透視變換函數(shù),核心在于仿射矩陣的m34屬性,這樣才會產(chǎn)生遠(yuǎ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); }
這一篇文章就到這里了,大家有什么意見和問題記得及時反饋,希望本文對大家開發(fā)IOS有所幫助。
相關(guān)文章
詳解iOS中多個網(wǎng)絡(luò)請求的同步問題總結(jié)
這篇文章主要介紹了詳解iOS中多個網(wǎng)絡(luò)請求的同步問題總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05iOS自定義UICollectionViewLayout實現(xiàn)瀑布流布局
這篇文章主要為大家詳細(xì)介紹了iOS自定義UICollectionViewLayout實現(xiàn)瀑布流布局,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12實例講解設(shè)計模式中的命令模式在iOS App開發(fā)中的運用
這篇文章主要介紹了設(shè)計模式中的命令模式在iOS App開發(fā)中的運用,文中還講到了Cocoa框架下使用的例子,實例代碼為傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-03-03iOS中containsString和rangeOfString的區(qū)別小結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于iOS中containsString和rangeOfString的一些區(qū)別,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01