iOS實現(xiàn)動態(tài)元素的引導圖效果
更新時間：2016年09月27日 11:18:51 作者：MajorLMJ
這篇文章給大家介紹了iOS實現(xiàn)動態(tài)元素的引導圖效果的步驟，文章給出了示例代碼介紹的很詳細，有需要的朋友們可以參考借鑒，下面來一起看看吧。
前言
最近越來越多的APP，已經(jīng)拋棄掉第一次進入的3-4頁的導入頁面，而是另外采取了在功能頁面懸浮一個動態(tài)效果來展示相應的功能點。這個模塊主要是實現(xiàn)app首次進入時顯示的動態(tài)的引導圖，在用戶進行右滑或者左滑的時候，屏幕上的一些元素做出相應的隱藏消失以及位置移動。
實現(xiàn)效果：
圖片資源來自網(wǎng)絡，侵權(quán)即刪
先來看看是如何使用的，然后再介紹相關的方法及屬性
NSMutableArray * elementsDataArr = [[NSMutableArray alloc] init]; /* 動畫元素的創(chuàng)建 */ LMJAnimatedElement * element1 = [[LMJAnimatedElement alloc] initWithImage:[UIImage imageNamed:@"umbrella"]]; element1.belongToScreen = 0; // 設置所屬第幾屏 element1.size = CGSizeMake(64, 64); // 元素大小 element1.startPoint = CGPointMake(130, 420); // 元素在屏幕的起始點位置 element1.endPoint = CGPointMake(130, 420); // 元素在屏幕的終點位置 element1.isGradient = NO; // 是否淡入淡出 [elementsDataArr addObject:element1]; LMJAnimatedElement * element2 = [[LMJAnimatedElement alloc] initWithImage:[UIImage imageNamed:@"cocktail"]]; element2.belongToScreen = 1; element2.size = CGSizeMake(64, 64); element2.startPoint = CGPointMake(40, 350); element2.endPoint = CGPointMake(40, 480); element2.isGradient = YES; [elementsDataArr addObject:element2]; LMJAnimatedElement * element3 = [[LMJAnimatedElement alloc] initWithImage:[UIImage imageNamed:@"flip_flops"]]; element3.belongToScreen = 2; element3.size = CGSizeMake(64, 64); element3.startPoint = CGPointMake(-70, 500); element3.endPoint = CGPointMake(190, 470); element3.isGradient = YES; [elementsDataArr addObject:element3]; LMJAnimatedElement * element4 = [[LMJAnimatedElement alloc] initWithImage:[UIImage imageNamed:@"surfboard"]]; element4.belongToScreen = 3; element4.size = CGSizeMake(96, 96); element4.startPoint = CGPointMake(300, 440); element4.endPoint = CGPointMake(40, 440); element4.isGradient = NO; [elementsDataArr addObject:element4]; LMJAnimatedElement * element5 = [[LMJAnimatedElement alloc] initWithImage:[UIImage imageNamed:@"beach_chair"]]; element5.belongToScreen = 4; element5.size = CGSizeMake(64, 64); element5.startPoint = CGPointMake(320, 440); element5.endPoint = CGPointMake(220, 440); element5.isGradient = YES; [elementsDataArr addObject:element5]; /* 模塊的實現(xiàn) */ _welcomeView = [[LMJDynamicWelcomeView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.height)]; // 設置動畫元素 [_welcomeView setAnimatedItems:elementsDataArr]; // 設置背景圖片，以及背景圖片的尺寸，當圖片尺寸超過屏幕寬度時，會自動計算背景圖每屏的位移量，以致滑到最后一屏的時候，背景圖移到最右端 [_welcomeView setBackgroundImage:[UIImage imageNamed:@"beach_bg.png"] size:CGSizeMake(_welcomeView.frame.size.height/620.f*992.f, _welcomeView.frame.size.height)]; // 設置滑動屏數(shù) [_welcomeView setAnimatedPageCount:5]; [self.view addSubview:_welcomeView];
首先來看元素類，也就是在引導圖上移動的元素 （LMJAnimatedElement）
- (LMJAnimatedElement *)initWithImage:(UIImage *)image; // - (LMJAnimatedElement *)initWithText:(NSString *)text; // 該功能尚未實現(xiàn)，敬請期待... @property (nonatomic,assign) NSInteger belongToScreen; // 屬于第幾屏 （取值范圍：0~...） @property (nonatomic,assign) CGSize size; // 元素大小 @property (nonatomic,assign) CGPoint startPoint; // 動畫起點 @property (nonatomic,assign) CGPoint endPoint; // 動畫終點 @property (nonatomic,assign) BOOL isGradient; // 是否有漸變效果 當設置為YES時，動畫元素只有在所屬頁跟隨動畫出現(xiàn)；當設置為NO時，動畫元素會一直在屏幕顯示，只在其所屬頁移動 @property (nonatomic,strong) UIView * elementView; // 元素容器
再來看一下該模塊的方法（LMJDynamicWelcomeView）
/* 設置所有動畫元素 */ - (void)setAnimatedItems:(NSArray<LMJAnimatedElement *> *)items; /* 設置引導圖滑動的屏數(shù) */ - (void)setAnimatedPageCount:(NSInteger)count; /* 設置背景圖以及背景圖的大小 */ - (void)setBackgroundImage:(UIImage *)image size:(CGSize)size;
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望能對各位iOS開發(fā)者們能有所幫助，如果有疑問大家可以留言交流。
相關文章
這篇文章主要為大家詳細介紹了iOS仿網(wǎng)易新聞滾動導航條效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
iOS11實現(xiàn)App內(nèi)自動連接Wi-Fi的方法
這篇文章主要給大家介紹了關于iOS11實現(xiàn)App內(nèi)自動連接Wi-Fi的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-10-10
iOS項目中用到對通訊錄的聯(lián)系人或是會員按姓名為關鍵字進行排序,這篇文章就為大家詳細介紹了如何自定義iOS通訊錄,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
本文是IOS開發(fā)之路的第四篇，主要講訴如何一步步搭建起微博的骨架，并附上源碼，希望對大家的IOS開發(fā)能提供些借鑒2014-08-08
這篇文章主要給大家介紹了關于iOS Runtime的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-02-02
小編在更新xcode9后，在運行老項目時遇到iOS 11 AppIcon不顯示問題，下面小編大家分享一下我的思路，需要的朋友參考下吧2017-10-10
這篇文章主要為大家詳細介紹了iOS push側(cè)滑返回功能實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
iOS開發(fā)使用JSON解析網(wǎng)絡數(shù)據(jù)
JSON是一種輕量級的數(shù)據(jù)格式，一般用于數(shù)據(jù)交互，服務器返回給客戶端的數(shù)據(jù)，一般都是JSON格式或者XML格式（文件下載除外）下面我們就看下在IOS開發(fā)中如何結(jié)合json呢2016-02-02
這篇文章主要介紹了怎樣優(yōu)化今日頭條IOS安裝包，對IOS優(yōu)化感興趣的同學，可以參考下2021-04-04
實例講解iOS應用UI開發(fā)之基礎動畫的創(chuàng)建
這篇文章主要介紹了iOS應用UI開發(fā)之基礎動畫的創(chuàng)建,以關鍵幀動畫作為重要知識點進行講解,需要的朋友可以參考下2015-11-11