前言
最近越来越多的app，已经抛弃掉第一次进入的3-4页的导入页面，而是另外采取了在功能页面悬浮一个动态效果来展示相应的功能点。这个模块主要是实现app首次进入时显示的动态的引导图，在用户进行右滑或者左滑的时候，屏幕上的一些元素做出相应的隐藏消失以及位置移动。
实现效果：
图片资源来自网络，侵权即删
先来看看是如何使用的，然后再介绍相关的方法及属性
|
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
