快捷導(dǎo)航

iOS實(shí)現(xiàn)動(dòng)態(tài)元素的引導(dǎo)圖效果

更新時(shí)間：2016年09月27日 11:18:51 作者：MajorLMJ

這篇文章給大家介紹了iOS實(shí)現(xiàn)動(dòng)態(tài)元素的引導(dǎo)圖效果的步驟，文章給出了示例代碼介紹的很詳細(xì)，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。

前言

最近越來(lái)越多的APP，已經(jīng)拋棄掉第一次進(jìn)入的3-4頁(yè)的導(dǎo)入頁(yè)面，而是另外采取了在功能頁(yè)面懸浮一個(gè)動(dòng)態(tài)效果來(lái)展示相應(yīng)的功能點(diǎn)。這個(gè)模塊主要是實(shí)現(xiàn)app首次進(jìn)入時(shí)顯示的動(dòng)態(tài)的引導(dǎo)圖，在用戶(hù)進(jìn)行右滑或者左滑的時(shí)候，屏幕上的一些元素做出相應(yīng)的隱藏消失以及位置移動(dòng)。

實(shí)現(xiàn)效果：

圖片資源來(lái)自網(wǎng)絡(luò)，侵權(quán)即刪

先來(lái)看看是如何使用的，然后再介紹相關(guān)的方法及屬性

NSMutableArray * elementsDataArr = [[NSMutableArray alloc] init];

/* 動(dòng)畫(huà)元素的創(chuàng)建 */
LMJAnimatedElement * element1 = [[LMJAnimatedElement alloc] initWithImage:[UIImage imageNamed:@"umbrella"]];
element1.belongToScreen = 0;      // 設(shè)置所屬第幾屏
element1.size    = CGSizeMake(64, 64); // 元素大小
element1.startPoint  = CGPointMake(130, 420); // 元素在屏幕的起始點(diǎn)位置
element1.endPoint   = CGPointMake(130, 420); // 元素在屏幕的終點(diǎn)位置
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];

/* 模塊的實(shí)現(xiàn) */
_welcomeView = [[LMJDynamicWelcomeView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.height)];
// 設(shè)置動(dòng)畫(huà)元素
[_welcomeView setAnimatedItems:elementsDataArr];
// 設(shè)置背景圖片，以及背景圖片的尺寸，當(dāng)圖片尺寸超過(guò)屏幕寬度時(shí)，會(huì)自動(dòng)計(jì)算背景圖每屏的位移量，以致滑到最后一屏的時(shí)候，背景圖移到最右端
[_welcomeView setBackgroundImage:[UIImage imageNamed:@"beach_bg.png"] size:CGSizeMake(_welcomeView.frame.size.height/620.f*992.f, _welcomeView.frame.size.height)];
// 設(shè)置滑動(dòng)屏數(shù)
[_welcomeView setAnimatedPageCount:5];

[self.view addSubview:_welcomeView];

首先來(lái)看元素類(lèi)，也就是在引導(dǎo)圖上移動(dòng)的元素（LMJAnimatedElement）

- (LMJAnimatedElement *)initWithImage:(UIImage *)image;

// - (LMJAnimatedElement *)initWithText:(NSString *)text; // 該功能尚未實(shí)現(xiàn)，敬請(qǐng)期待...

@property (nonatomic,assign) NSInteger belongToScreen; // 屬于第幾屏 （取值范圍：0~...）

@property (nonatomic,assign) CGSize size; // 元素大小

@property (nonatomic,assign) CGPoint startPoint; // 動(dòng)畫(huà)起點(diǎn)
@property (nonatomic,assign) CGPoint endPoint; // 動(dòng)畫(huà)終點(diǎn)

@property (nonatomic,assign) BOOL isGradient; // 是否有漸變效果 當(dāng)設(shè)置為YES時(shí)，動(dòng)畫(huà)元素只有在所屬頁(yè)跟隨動(dòng)畫(huà)出現(xiàn)；當(dāng)設(shè)置為NO時(shí)，動(dòng)畫(huà)元素會(huì)一直在屏幕顯示，只在其所屬頁(yè)移動(dòng)

@property (nonatomic,strong) UIView * elementView; // 元素容器

再來(lái)看一下該模塊的方法（LMJDynamicWelcomeView）

/* 設(shè)置所有動(dòng)畫(huà)元素 */
- (void)setAnimatedItems:(NSArray<LMJAnimatedElement *> *)items;

/* 設(shè)置引導(dǎo)圖滑動(dòng)的屏數(shù) */
- (void)setAnimatedPageCount:(NSInteger)count;

/* 設(shè)置背景圖以及背景圖的大小 */
- (void)setBackgroundImage:(UIImage *)image size:(CGSize)size;

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望能對(duì)各位iOS開(kāi)發(fā)者們能有所幫助，如果有疑問(wèn)大家可以留言交流。

您可能感興趣的文章: