热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

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

这篇文章给大家介绍了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 *)items;

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

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

总结

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


推荐阅读
  • 探讨如何在C++中,当子类实例存储在父类类型的向量中时,正确访问子类特有的成员变量或方法。 ... [详细]
  • 如何阻止iOS14下载的应用同步至其他苹果设备
    对于同时使用多台苹果设备(如iPhone和iPad)的用户而言,可能会遇到在一个设备上下载的应用自动同步到其他设备的情况。如果您希望避免这种自动同步,以节省存储空间或减少不必要的应用同步,下面的方法或许能帮助您。 ... [详细]
  • 本文介绍了DOM中用于获取节点信息的关键属性,包括父节点、子节点列表、首个及末个子节点、相邻兄弟节点以及节点类型等,同时提供了每个属性的具体使用说明。 ... [详细]
  • 本文介绍如何使用Java实现AC自动机(Aho-Corasick算法),以实现高效的多模式字符串匹配。文章涵盖了Trie树和KMP算法的基础知识,并提供了一个详细的代码示例,包括构建Trie树、设置失败指针以及执行搜索的过程。 ... [详细]
  • 端到端自动化测试框架设计 - 以京东商品搜索为例的Web应用测试
    本文将对前文介绍的京东商品搜索功能的端到端自动化测试进行总结,涵盖使用WebStorm、Node.js、Mocha、WebDriverIO及Selenium构建的测试环境,并特别讨论了如何通过会话保持用户登录状态。 ... [详细]
  • 本文详细介绍了Java库中com.badlogic.gdx.scenes.scene2d.Stage类下的mouseMoved()方法,并提供了多个实际应用场景的代码示例,帮助开发者更好地理解和使用这一方法。 ... [详细]
  • 本文探讨了Flutter和Angular这两个流行框架的主要区别,包括它们的设计理念、适用场景及技术实现。 ... [详细]
  • 如何调整主板上的硬盘启动顺序
    本文详细介绍了两种方法来设置主板上的硬盘启动顺序,包括临时设置和永久设置的方法。 ... [详细]
  • 在现代移动应用开发中,尤其是iOS应用,处理来自服务器的JSON数据是一项基本技能。无论是使用Swift还是PHP,有效地解析和利用JSON数据对于提升用户体验至关重要。本文将探讨如何在Swift中优雅地处理JSON,以及PHP中处理JSON的一些技巧。 ... [详细]
  • 移动端浏览器为了识别用户的双击放大操作,通常会在点击后引入300毫秒的延迟。虽然这种延迟在日常使用中可能不易察觉,但对于需要即时响应的应用(如网页游戏)来说,消除这一延迟至关重要。 ... [详细]
  • 解析 HTTP 头 'Vary: Accept-Encoding' 的作用与重要性
    本文详细探讨了 'Vary: Accept-Encoding' HTTP 头的作用,即指导缓存系统(如代理服务器和 CDN)根据不同的编码需求存储和提供适当的资源版本,确保不同类型的客户端能够接收到适合自己的内容。 ... [详细]
  • 本文探讨了Lua中元表和元方法的使用,通过具体的代码示例展示了如何利用这些特性来实现类似C语言中的运算符重载功能。 ... [详细]
  • 拖拉切割直线 ... [详细]
  • Python中调用Java代码的方法与实践
    本文探讨了如何在Python环境中集成并调用Java代码,通过具体的步骤和示例展示了这一过程的技术细节。适合对跨语言编程感兴趣的开发者阅读。 ... [详细]
  • VS Code 中 .vscode 文件夹配置详解
    本文介绍了 VS Code 中 .vscode 文件夹下的配置文件及其作用,包括常用的预定义变量和三个关键配置文件:launch.json、tasks.json 和 c_cpp_properties.json。 ... [详细]
author-avatar
心平
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有