一种以基于视差原理的组合动画实现用户行为引导的方法

文档序号:8499011阅读:666来源:国知局
一种以基于视差原理的组合动画实现用户行为引导的方法
【技术领域】
[0001]本发明属于软件应用中用户行为引导领域,尤其涉及一种基于视差原理的组合动画实现用户行为引导的方法。
【背景技术】
[0002]用户行为引导是为了聚焦用户的焦点,对用户进行视觉优化,提前让用户预知一个产品的部分界面以及功能体验。但是目前在普遍的用户行为引导当中,大多数的处理方式就是通过文字与图片组合或者是文字与界面插图组合的方式以及引导用户去点击按钮进行操作的方式,来引导用户,通过这些图片与文字的介绍或者通过引导用户点击按钮,让用户对应用有了部分认知,提升应用在用户眼中的第一印象。
[0003]但是,这种在一张图片配上几段文字、或是在一张应用的截图上配上相关文字描述、或是在应用里放些文字按钮要求用户去点击体验、更或是拍一个视频进行简短播放的引导方式存在许多不足。图文显示有时候会显得整个用户引导行为非常杂乱,而且不能一下子让用户进行视觉聚焦,如果当引导文字过多,用户还很容易遗忘、出现记忆偏差;而对于视频播放,就会显得应用过大,产生用户等待视频加载的时间,甚至有时候在播放时候出现卡顿现象。这些方式过于模式化,显得千篇一律,不能够让用户对产品产生情感上的联系,增加产品粘度。

【发明内容】

[0004]为了解决上述问题,本发明提供一种以基于视差原理的组合动画实现用户行为引导的方法。
[0005]为了达到上述目的,本发明采用的技术方案是:
一种以基于视差原理的组合动画实现用户行为引导的方法,包括以下步骤:
51、准备一个组装动画的翻页容器;
52、将无限自动循环动画置放在翻页容器的第一页;
53、将图片播放展示动画置放在翻页容器的第二页;
54、将图片延迟飞入动画置放在翻页容器的第三页;
55、将刷图分割对比效果动画置放在翻页容器的第四页;
56、翻页到翻页容器的第一页,执行无限自动循环动画;
57、翻页到翻页容器的第二页,执行图片播放展示动画;
58、翻页到翻页容器的第三页,执行图片延迟飞入动画;
59、翻页到翻页容器的第四页,执行刷图分割对比效果动画。
[0006]进一步的,所述翻页容器至少有四页,每页可以进行左右切换,且每页的大小等于应用的显示区域大小,每翻到一页就会执行当前页的动画。
[0007]进一步的,步骤S2中将无限自动循环动画置放在翻页容器的第一页的过程如下:
S21、在翻页容器的第一页上设定第一动画可视区域的位置及大小; S22、设定图片容器ImageViewl和ImageView2并放入第一动画可视区域,ImageView2默认显不在ImageViewl最底部。
[0008]进一步的,步骤S3中将图片播放展示动画置放在翻页容器的第二页的过程如下:
531、在翻页容器的第二页上设定第二动画可视区域的位置及大小;
532、设定一个图片容器ImageVieW并把该容器放入第二动画可视区域;
S33、准备四张图片以及四张图片对应的图片说明文字描述,并依次按顺序排好,默认把第一张图片和与其对应的文字描述添加显示到ImageView3中。
[0009]进一步的,步骤S4中将图片延迟飞入动画置放在翻页容器的第三页的过程如下:
541、在翻页容器的第三页上设定第三动画可视区域的位置及大小,并对第三动画可视区域设置背景图片;
542、准备三个图片容器ImageView4、ImageView5、ImageView6,在每一个图片容器内放置一张图片,并将这三个图片容器放置在翻页容器第三页上的第三动画可视区域外。
[0010]进一步的,步骤S5中将刷图分割对比效果动画置放在翻页容器的第四页的过程如下:
551、在翻页容器的第四页上设定第四动画可视区域的位置及大小为(0,0,640,640),其中前两个数分别是横坐标X和纵坐标1,坐标位置是相对于当前页的起点坐标,后两个数分别是宽width和高height ;
552、准备一个图片容器ImageView7,将其放入第四动画可视区域,并把原图放入到该图片容器中,默认设置该图片容器的位置及大小为(0,0,640,640);准备效果图容器ImageView8,并把对比的效果图放入到ImageView8中,默认设置ImageView8的位置及大小也为(0,0,640,640);准备一个分割容器View,并把ImageView8放入到View中,View放入第四动画可视区域,默认设置分割容器View的位置及大小(0,0,0,640),由于View此时默认的宽度为0,所以分割容器View里面的ImageView8是不可见的。
[0011]更进一步的,步骤S6中翻页到翻页容器的第一页,执行无限自动循环动画具体过程如下:
561、图片容器ImageViewl开始向上滚动;
562、图片容器ImageView2跟随图片容器ImageViewl—起向上滚动;
563、若图片容器ImageViewl完全滚动出第一动画可视区域,则进入下一步,否则继续执行上一步;
564、移动图片容器ImageViewl至图片容器ImageVieW的底部;
565、图片容器ImageViewl跟随图片容器ImageView2—起向上滚动;
566、若图片容器ImageVieW完全滚动出第一动画可视区域,则进入下一步,否则继续执行上一步;
567、移动图片容器ImageVieW至图片容器ImageViewl的底部;
568、重新执行步骤S61-S67。
[0012]更进一步的,步骤S7翻页到翻页容器的第二页,执行图片播放展示动画的具体过程如下:
S71、第一张图片开始在规定时间进行Scale放大动画,并展示与其对应的文字描述,完成后ImageVieW切换至第二张图片; 572、第二张图片开始在规定时间进行Scale缩小动画,并展示与其对应的文字描述,完成后ImageVieW切换至第三张图片;
573、第三张图片开始在规定时间进行Scale放大动画,并展示与其对应的文字描述,完成后ImageVieW切换至第四张图片;
574、第四张图片开始在规定时间进行Scale缩小动画,并展示与其对应的文字描述;
575、若重新展示播放动画,则重新执行步骤S71-S74,否则,结束。
[0013]更进一步的,步骤S8翻页到翻页容器的第三页,执行图片延迟飞入动画具体过程如下:
581、ImageView4开始飞入到第三动画可视区域内的指定位置,当ImageView4动画执行完毕,等待0.3秒;
582、ImageView5开始飞入到第三动画可视区域内的指定位置,当ImageView5动画执行完毕,等待0.3秒;
583、ImageView6开始飞入到第三动画可视区域内的指定位置,当ImageView6动画执行完毕,结束。
[0014]更进一步的,步骤S9翻页到翻页容器的第四页,执行刷图分割对比效果动画具体过程如下:
591、将分割容器View的宽度在规定的时间内由O变成640,此时View里的ImageView8完全显不并覆盖ImageView7 ;
592、再将分割容器View的宽度在规定的时间内由640变成320,此时View里的ImageView8可见范围是一半并显示在左边,ImageView7可见范围也是一半并显示右边。
[0015]采用本技术方案的有益效果:
通过实现四种视差动画,进行组合应用于用户行为引导中,使得整个行为引导过程更紧凑有序,减少了过多的文字引导,通过动画增强了用户对引导的印象,而且不会有视频引导加载时间长的问题,采用本发明的行为引导方法可以向用户传达更明确的信息,体验更吸引人,让用户在体验时感觉更有趣,注意力更为集中,而且可以让用户非常直观的感受应用所带来的活力,让用户感觉应用更贴近生活,使用户对产品产生情感上的联系,增加产品粘度。
【附图说明】
[0016]图1是本发明的整体流程示意图;
图2是执行无限自动循环动画的流程示意图;
图3是执行图片播放展示动画的流程示意图;
图4是执行图片延迟飞入动画的流程示意图;
图5是执行刷图分割对比效果动画的流程示意图。
【具体实施方式】
[0017]为了更好的理解本发明,下面结合附图对本发明作进一步阐述。
[0018]如图1所示,一种以基于视差原理的组
当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1