服务器之家

服务器之家 > 正文

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

时间:2021-02-02 15:22     来源/作者:MajorLMJ

前言

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

实现效果:

iOS实现动态元素的引导图效果
图片资源来自网络,侵权即删

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
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)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (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)

?
1
2
3
4
5
6
7
8
/* 设置所有动画元素 */
- (void)setanimateditems:(nsarray<lmjanimatedelement *> *)items;
 
/* 设置引导图滑动的屏数 */
- (void)setanimatedpagecount:(nsinteger)count;
 
/* 设置背景图以及背景图的大小 */
- (void)setbackgroundimage:(uiimage *)image size:(cgsize)size;

总结

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

原文链接:http://www.jianshu.com/p/f7f81ed57931

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
返回顶部