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开发者们能有所帮助,如果有疑问大家可以留言交流。

(0)

相关推荐

  • iOS基于UIScrollView实现滑动引导页

    上代码前,我们先来看下实现的效果图: WelcomeViewController.h #import <UIKit/UIKit.h> @interface WelcomeViewController : UIViewController @end WelcomeViewController.m #import "WelcomeViewController.h" #define IMAGECOUNT 3 @interface WelcomeViewController ()

  • iOS 引导页的镂空效果实例

    初衷 最近项目新功能更改较大,产品童鞋要求加入新功能引导,于是一口气花了两天的时间做了一个引导页,当然加上后面的修修补补的时间,就不只两天了,不过这事情其实是一劳永逸的事情,值得做.同时为了能够更好的复用,我把它做成了pod库,项目地址在这里:EAFeatureGuideView. EAFeatureGuideView能做什么 EAFeatureGuideView是UIView的一个扩展,用来做新功能引导提示,达到这样的效果: 局部区域高亮(可以设置圆角) 有箭头指向高亮区域 可以设置一段介绍文

  • RxJava两步打造华丽的Android引导页

    前言 之前的一篇文章:基于RxJava实现酷炫启动页 中,我们尝试了用RxJava实现酷炫的启动页,今天我们在此基础上加入首次使用APP时的引导页功能. 效果如下图: 思路:思路其实很简单,就是在WelcomeActivity 中setContentView()之前判断是否是首次打开APP,若是,则去启动引导页(WelcomeGuideActivity)并return:若不是,则直接setContentView(),然后启动动画再启动MainActivity. 一.WelcomeActivity

  • Android实现绕球心旋转的引导页效果

    现在很多APP都会出现Android实现绕球心旋转的引导页效果,一个类似小车一直在往前开的旋转式动画效果. 先看一下预览效果: 嗯,整体效果还算理想,基本实现了页面绕屏幕底部中心旋转. 这里我们用到了Android系统的一个组件ViewFlipper,该控件的主要作用是为其中的View切换提供动画效果,主要的方法如下: setInAnimation:设置View进入屏幕时的动画. setOutAnimation:设置View退出屏幕时的动画. showNext:调用该方法可以显示下一个View.

  • iOS App初次启动时的用户引导页制作实例分享

    应用程序APP一般都有引导页,引导页可以作为操作指南指导用户熟悉使用:也可以展现给用户,让用户了解APP的功能作用.引导页制作简单,一般只需要一组图片,再把图片组展现出来就可以了.展示图片组常用UIScrollView来分页显示,并且由UIPageControl页面控制器控制显示当前页.UIScrollView和UIPageControl搭配会更加完美地展现引导页的功能作用.下面我们来看具体的实例: 我们用NSUserDefaults类来判断程序是不是第一次启动或是否更新,在 AppDelega

  • Android启动引导页使用ViewPager实现

    我们在安装某个APP的时候,基本都会有一个引导页的提示,他们可以打广告,或者介绍新功能的加入和使用说明等. 一般都支持滑动并且下面有几个点,显示共有多少页和当前图片的位置,在IOS上这个实现起来比较简单,但在安卓上如何实现呢. 今天就和大家一起来学习用官方v4支持包下的ViewPager来实现这个效果. 先上图: 下面是我的实现,一个xml布局,一个GuideActivity和一个GuidePageAdapter.  先上XML. <?xml version="1.0" enco

  • jQuery插件pagewalkthrough实现引导页效果

    现在很多网站不仅是介绍,更多的是有一些功能,怎么样让客户快速的知道网站有哪些功能呢?这里pagewalkthrough.js插件能帮我们实现,它是一个轻量级的jQuery插件,它可以帮助我们创建一个遮罩引导层,实现页面功能引导功能,引导完成显示页面内容. html代码: <div id="walkthrough-content"> <div id="walkthrough-1"> <h3>欢迎来到网页引导示例DEMO演示页<

  • 简洁易用的iOS引导页制作

    基本上每个app都有引导页,虽然现在这种demo已经比比皆是,但感觉都不全,所以自己整理了一个,只需要传入图片,就可以正常加载出来.由于UIPageControl的小圆点大小和颜色经常与UI设计的不相符,所以后面也会提到重写类方法,进行修改. 先看下效果(图片是在网上随便找的) Untitled.gif 把指导页图片传入guideImages中 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptio

  • Android开发实战之漂亮的ViewPager引导页

    目前很多软件安装时都会出现引导页面,用户体验很好. 下面就来DIY下: 因为视频上传很麻烦,所以截图了. 首先看看效果图: 点击小点可自由切换,滑动也可以自由切换,最后一个导航页添加了点击跳转. 开始实现引导页: 一.采集需要的图片放入drawable文件里 二.初始化每个导航页的视图 import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.suppo

  • iOS App引导页开发教程

    引导页功能简介 方式一: 判断程序是否首次启动,如果是将GuidePageViewController作为窗口的根视图控制器.GuidePageViewController有三个子控件:一个UIScrollView.一个UIPageControl.一个UIButton(默认隐藏),UIScrollView有多个UIImageView子控件,当滚动到最后一页UIButton展示,点击立即体验然后将窗口的根视图控制器设置为UITabBarController: 方式二: 也可以直接将根视图控制器设置

随机推荐