前言
最近越来越多的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;