iOS实现动态元素的引导图效果

 更新时间:2016年09月27日 11:18:51   作者:MajorLMJ  
这篇文章给大家介绍了iOS实现动态元素的引导图效果的步骤,文章给出了示例代码介绍的很详细,有需要的朋友们可以参考借鉴,下面来一起看看吧。

前言

最近越来越多的APP,已经抛弃掉第一次进入的3-4页的导入页面,而是另外采取了在功能页面悬浮一个动态效果来展示相应的功能点。这个模块主要是实现app首次进入时显示的动态的引导图,在用户进行右滑或者左滑的时候,屏幕上的一些元素做出相应的隐藏消失以及位置移动。

实现效果:


图片资源来自网络,侵权即删

先来看看是如何使用的,然后再介绍相关的方法及属性

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

/* 动画元素的创建 */
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];

/* 模块的实现 */
_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)];
// 设置滑动屏数
[_welcomeView setAnimatedPageCount:5];

[self.view addSubview:_welcomeView];

首先来看元素类,也就是在引导图上移动的元素 (LMJAnimatedElement)

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

// - (LMJAnimatedElement *)initWithText:(NSString *)text; // 该功能尚未实现,敬请期待...

@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时,动画元素只有在所属页跟随动画出现;当设置为NO时,动画元素会一直在屏幕显示,只在其所属页移动

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

再来看一下该模块的方法(LMJDynamicWelcomeView)

/* 设置所有动画元素 */
- (void)setAnimatedItems:(NSArray<LMJAnimatedElement *> *)items;

/* 设置引导图滑动的屏数 */
- (void)setAnimatedPageCount:(NSInteger)count;

/* 设置背景图以及背景图的大小 */
- (void)setBackgroundImage:(UIImage *)image size:(CGSize)size;

总结

以上就是这篇文章的全部内容了,希望能对各位iOS开发者们能有所帮助,如果有疑问大家可以留言交流。

相关文章

  • iOS实现简单长截图

    iOS实现简单长截图

    这篇文章主要为大家详细介绍了iOS实现简单长截图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • IOS 中loadView,viewDidLoad,viewDidUnload详解及使用

    IOS 中loadView,viewDidLoad,viewDidUnload详解及使用

    这篇文章主要介绍了IOS 中loadView,viewDidLoad,viewDidUnload详解及使用的相关资料,需要的朋友可以参考下
    2017-02-02
  • iOS监听手机锁屏状态

    iOS监听手机锁屏状态

    iPhone的锁屏监测分为两种方式监听,本文给大家介绍的非常详细,具体内容详情大家通过本文详细了解下吧
    2017-05-05
  • iOS导航栏对控制器view的影响详解

    iOS导航栏对控制器view的影响详解

    这篇文章主要给大家介绍了关于iOS导航栏对控制器view的影响的相关资料,文中通过示例代码介绍的非常详细,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • iOS开发之WKWebViewJavascriptBridge Xcode9中导致crash的解决

    iOS开发之WKWebViewJavascriptBridge Xcode9中导致crash的解决

    大家都知道WebViewJavascriptBridge它主要帮助我们优雅的实现OC与JS的交互,下面这篇文章主要给大家介绍了关于iOS开发之WKWebViewJavascriptBridge Xcode9中导致crash的解决方法,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-10-10
  • IOS 开发中发送e-mail的几种方法总结

    IOS 开发中发送e-mail的几种方法总结

    这篇文章主要介绍了IOS 开发中发送e-mail的几种方法总结的相关资料,需要的朋友可以参考下
    2017-03-03
  • iOS判断身份证号码是否正确的方法

    iOS判断身份证号码是否正确的方法

    本篇文章主要介绍了iOS判断身份证号码是否正确的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • iOS 水波纹动画的实现效果

    iOS 水波纹动画的实现效果

    本篇文章主要介绍了iOS 水波纹的实现的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • iOS中SQLite的操作方法

    iOS中SQLite的操作方法

    这篇文章主要为大家详细介绍了iOS中SQLite的操作方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • iOS如何让tableview支持不同种类的cell详解

    iOS如何让tableview支持不同种类的cell详解

    这篇文章主要给大家介绍了关于iOS如何让tableview支持不同种类的cell的相关资料,文中通过示例代码详细的给大家介绍了实现的两种方法,对各位iOS开发者们具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-08-08

最新评论