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

摘要

本发明公开了一种以基于视差原理的组合动画实现用户行为引导的方法，包括以下步骤：S1准备一个组装动画的翻页容器；S2将无限自动循环动画置放在翻页容器的第一页；S3将图片播放展示动画置放在翻页容器的第二页；S4将图片延迟飞入动画置放在翻页容器的第三页；S5将刷图分割对比效果动画置放在翻页容器的第四页；S6翻页到第一页，执行无限自动循环动画；S7翻页第二页，执行图片播放展示动画；S8翻页到第三页，执行图片延迟飞入动画；S9翻页到第四页，执行刷图分割对比效果动画。通过实现四种视差动画，使得整个行为引导过程更紧凑有序，增强了用户对引导的印象，向用户传达更明确的信息，使用户对产品产生情感上的联系，增加产品粘度。

说明书

技术领域

    本发明属于软件应用中用户行为引导领域，尤其涉及一种基于视差原理的组合动画实现用户行为引导的方法。

背景技术

用户行为引导是为了聚焦用户的焦点，对用户进行视觉优化，提前让用户预知一个产品的部分界面以及功能体验。但是目前在普遍的用户行为引导当中，大多数的处理方式就是通过文字与图片组合或者是文字与界面插图组合的方式以及引导用户去点击按钮进行操作的方式，来引导用户，通过这些图片与文字的介绍或者通过引导用户点击按钮，让用户对应用有了部分认知，提升应用在用户眼中的第一印象。

    但是，这种在一张图片配上几段文字、或是在一张应用的截图上配上相关文字描述、或是在应用里放些文字按钮要求用户去点击体验、更或是拍一个视频进行简短播放的引导方式存在许多不足。图文显示有时候会显得整个用户引导行为非常杂乱，而且不能一下子让用户进行视觉聚焦，如果当引导文字过多，用户还很容易遗忘、出现记忆偏差；而对于视频播放，就会显得应用过大，产生用户等待视频加载的时间，甚至有时候在播放时候出现卡顿现象。这些方式过于模式化，显得千篇一律，不能够让用户对产品产生情感上的联系，增加产品粘度。

发明内容

为了解决上述问题，本发明提供一种以基于视差原理的组合动画实现用户行为引导的方法。

为了达到上述目的，本发明采用的技术方案是：

一种以基于视差原理的组合动画实现用户行为引导的方法，包括以下步骤：

S1、准备一个组装动画的翻页容器；

S2、将无限自动循环动画置放在翻页容器的第一页；

S3、将图片播放展示动画置放在翻页容器的第二页；

S4、将图片延迟飞入动画置放在翻页容器的第三页；

S5、将刷图分割对比效果动画置放在翻页容器的第四页；

S6、翻页到翻页容器的第一页，执行无限自动循环动画；

S7、翻页到翻页容器的第二页，执行图片播放展示动画；

S8、翻页到翻页容器的第三页，执行图片延迟飞入动画；

S9、翻页到翻页容器的第四页，执行刷图分割对比效果动画。

进一步的，所述翻页容器至少有四页，每页可以进行左右切换， 且每页的大小等于应用的显示区域大小，每翻到一页就会执行当前页的动画。

进一步的，步骤S2中将无限自动循环动画置放在翻页容器的第一页的过程如下：

S21、在翻页容器的第一页上设定第一动画可视区域的位置及大小；

S22、设定图片容器ImageView1和ImageView2并放入第一动画可视区域， ImageView2默认显示在ImageView1最底部。

进一步的，步骤S3中将图片播放展示动画置放在翻页容器的第二页的过程如下：

S31、在翻页容器的第二页上设定第二动画可视区域的位置及大小；

S32、设定一个图片容器ImageView3并把该容器放入第二动画可视区域；

 S33、准备四张图片以及四张图片对应的图片说明文字描述，并依次按顺序排好，默认把第一张图片和与其对应的文字描述添加显示到ImageView3中。

进一步的，步骤S4中将图片延迟飞入动画置放在翻页容器的第三页的过程如下：

S41、在翻页容器的第三页上设定第三动画可视区域的位置及大小，并对第三动画可视区域设置背景图片；

S42、准备三个图片容器ImageView4、ImageView5、ImageView6，在每一个图片容器内放置一张图片，并将这三个图片容器放置在翻页容器第三页上的第三动画可视区域外。

进一步的，步骤S5中将刷图分割对比效果动画置放在翻页容器的第四页的过程如下：

S51、在翻页容器的第四页上设定第四动画可视区域的位置及大小为（0，0，640，640），其中前两个数分别是横坐标x和纵坐标y，坐标位置是相对于当前页的起点坐标，后两个数分别是宽width和高height；

S52、准备一个图片容器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是不可见的。

更进一步的，步骤S6中翻页到翻页容器的第一页，执行无限自动循环动画具体过程如下：

S61、图片容器ImageView1开始向上滚动；

S62、图片容器ImageView2跟随图片容器ImageView1一起向上滚动；

S63、若图片容器ImageView1完全滚动出第一动画可视区域，则进入下一步，否则继续执行上一步；

S64、移动图片容器ImageView1至图片容器ImageView2的底部；

S65、图片容器ImageView1跟随图片容器ImageView2一起向上滚动；

S66、若图片容器ImageView2完全滚动出第一动画可视区域，则进入下一步，否则继续执行上一步；

S67、移动图片容器ImageView2至图片容器ImageView1的底部；

S68、重新执行步骤S61-S67。

更进一步的，步骤S7翻页到翻页容器的第二页，执行图片播放展示动画的具体过程如下：

S71、第一张图片开始在规定时间进行Scale放大动画，并展示与其对应的文字描述，完成后ImageView3切换至第二张图片；

S72、第二张图片开始在规定时间进行Scale缩小动画，并展示与其对应的文字描述，完成后ImageView3切换至第三张图片；

S73、第三张图片开始在规定时间进行Scale放大动画，并展示与其对应的文字描述，完成后ImageView3切换至第四张图片；

S74、第四张图片开始在规定时间进行Scale缩小动画，并展示与其对应的文字描述；

S75、若重新展示播放动画，则重新执行步骤S71-S74，否则，结束。

更进一步的，步骤S8翻页到翻页容器的第三页，执行图片延迟飞入动画具体过程如下：

S81、ImageView4开始飞入到第三动画可视区域内的指定位置，当ImageView4动画执行完毕，等待0.3秒；

S82、ImageView5开始飞入到第三动画可视区域内的指定位置，当ImageView5动画执行完毕，等待0.3秒；

S83、ImageView6开始飞入到第三动画可视区域内的指定位置，当ImageView6动画执行完毕，结束。

更进一步的，步骤S9翻页到翻页容器的第四页，执行刷图分割对比效果动画具体过程如下：

S91、 将分割容器View的宽度在规定的时间内由0变成640，此时View里的ImageView8完全显示并覆盖ImageView7；

S92、再将分割容器View的宽度在规定的时间内由640变成320，此时View里的ImageView8可见范围是一半并显示在左边，ImageView7可见范围也是一半并显示右边。

采用本技术方案的有益效果：

通过实现四种视差动画，进行组合应用于用户行为引导中，使得整个行为引导过程更紧凑有序，减少了过多的文字引导，通过动画增强了用户对引导的印象，而且不会有视频引导加载时间长的问题，采用本发明的行为引导方法可以向用户传达更明确的信息，体验更吸引人，让用户在体验时感觉更有趣，注意力更为集中，而且可以让用户非常直观的感受应用所带来的活力，让用户感觉应用更贴近生活，使用户对产品产生情感上的联系，增加产品粘度。

附图说明

图1是本发明的整体流程示意图；

图2是执行无限自动循环动画的流程示意图；

图3是执行图片播放展示动画的流程示意图；

图4是执行图片延迟飞入动画的流程示意图；

图5是执行刷图分割对比效果动画的流程示意图。

具体实施方式

为了更好的理解本发明，下面结合附图对本发明作进一步阐述。

如图1所示，一种以基于视差原理的组合动画实现用户行为引导的方法，包括以下步骤：

S1、准备一个组装动画的翻页容器。

该翻页容器为ScrollView，为了保证翻页容器能把所有的动画组装起来，翻页容器至少有四页，每页可以进行左右切换， 且每页的大小等于应用的显示区域大小，每翻到一页就会执行当前页的动画。

S2、将无限自动循环动画置放在翻页容器的第一页，具体过程如下：

S21、在翻页容器的第一页上设定第一动画可视区域的位置及大小。

本实施例中设定第一动画可视区域位置大小为（0，0，640，640），其中前两个数代表坐标x和y，坐标位置是相对于当前页的起点坐标，后两个数代表宽width和高height；默认设定翻页容器第一页上第一动画可视区域外的地方是不可见的，即是如果有图片被放在第一动画可视区域外面，该图片是不可见的。

S22、设定图片容器ImageView1和ImageView2并放入第一动画可视区域， ImageView2默认显示在ImageView1最底部。

这两个图片容器装载显示的是同一张容器，ImageView1和ImageView2的高度与第一动画可视区域的高度一样。

S3、将图片播放展示动画置放在翻页容器的第二页，具体过程如下：

S31、在翻页容器的第二页上设定第二动画可视区域的位置及大小。

本实施例中设定第二动画可视区域位置大小为（0，0，640，640），其中前两个数代表坐标x和y，坐标位置是相对于当前页的起点坐标，后两个数代表宽width和高height；默认设定翻页容器第二页上第二动画可视区域外的地方是不可见的，即是如果有图片被放在第二动画可视区域外面，该图片是不可见的。

S32、设定一个图片容器ImageView3并把该容器放入第二动画可视区域；

S33、准备四张图片以及四张图片对应的图片说明文字描述，并依次按顺序排好，默认把第一张图片和与其对应的文字描述添加显示到ImageView3中。

S4、将图片延迟飞入动画置放在翻页容器的第三页，具体过程如下：

S41、在翻页容器的第三页上设定第三动画可视区域的位置及大小，并对第三动画可视区域设置背景图片。

本实施例中设定第三动画可视区域位置大小为（0，0，640，640），其中前两个数代表坐标x和y，坐标位置是相对于当前页的起点坐标，后两个数代表宽width和高height；默认设定翻页容器第三页上第三动画可视区域外的地方是不可见的，即是如果有图片被放在第三动画可视区域外面，该图片是不可见的。

S42、准备三个图片容器ImageView4、ImageView5、ImageView6，在每一个图片容器内放置一张图片，并将这三个图片容器放置在翻页容器第三页上的第三动画可视区域外。

S5、将刷图分割对比效果动画置放在翻页容器的第四页，具体过程如下：

S51、在翻页容器的第四页上设定第四动画可视区域的位置及大小为（0，0，640，640），其中前两个数分别是横坐标x和纵坐标y，坐标位置是相对于当前页的起点坐标，后两个数分别是宽width和高height。

默认设定翻页容器第四页上第四动画可视区域外的地方是不可见的，即是如果有图片被放在第四动画可视区域外面，该图片是不可见的。

S52、准备一个图片容器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是不可见的。

S6、翻页到翻页容器的第一页，执行无限自动循环动画，如图2所示，具体过程如下：

S61、图片容器ImageView1开始向上滚动；

S62、图片容器ImageView2跟随图片容器ImageView1一起向上滚动；

S63、若图片容器ImageView1完全滚动出第一动画可视区域，则进入下一步，否则继续执行上一步；

S64、移动图片容器ImageView1至图片容器ImageView2的底部；

S65、图片容器ImageView1跟随图片容器ImageView2一起向上滚动；

S66、若图片容器ImageView2完全滚动出第一动画可视区域，则进入下一步，否则继续执行上一步；

S67、移动图片容器ImageView2至图片容器ImageView1的底部；

S68、重新执行步骤S61-S67。

    整个过程中，一直循环重复交替滚动两个相同的图片，让人感觉只有一张图片在滚动，加强视差敢。同时在动画外需要放置一个标题，用以表达该动画引导的内容是让用户可以做什么。

S7、翻页到翻页容器的第二页，执行图片播放展示动画，如图3所示，具体过程如下：

S71、第一张图片开始在规定时间进行Scale放大动画，并展示与其对应的文字描述，完成后ImageView3切换至第二张图片；本实施中放大动画时是由正常的1.0倍放大至1.5倍，且图片的描述文字从左边展开飞入至动画。

S72、第二张图片开始在规定时间进行Scale缩小动画，并展示与其对应的文字描述，完成后ImageView3切换至第三张图片；本实施例中缩小动画时是由1.5倍缩小至正常的1.0倍，且图片的描述文字从左边展开飞入至动画。

S73、第三张图片开始在规定时间进行Scale放大动画，并展示与其对应的文字描述，完成后ImageView3切换至第四张图片；本实施中放大动画时是由正常的1.0倍放大至1.5倍，且图片的描述文字从左边展开飞入至动画。

S74、第四张图片开始在规定时间进行Scale缩小动画，并展示与其对应的文字描述；本实施例中缩小动画时是由1.5倍缩小至正常的1.0倍，且图片的描述文字从左边展开飞入至动画。

S75、若重新展示播放动画，则重新执行步骤S71-S74，否则，结束。

    整个过程中依次替换图片，并对新替换图片进行与上一张图片相反的动画，同时显示当前图片对应的图片文字，直至所有的图片的动画执行完成；这样可以让用户更直观感受到视差效果。同时在动画外需要放置一个动画的标题，用以表达该动画引导的内容是让用户可以做什么。

S8、翻页到翻页容器的第三页，执行图片延迟飞入动画，如图4所示，具体过程如下：

S81、ImageView4开始飞入到第三动画可视区域内的指定位置，当ImageView4动画执行完毕，等待0.3秒；本实施例中ImageView4是从翻页容器第三页的右边向左飞入到第三动画可视区域内的指定位置的。

S82、ImageView5开始飞入到第三动画可视区域内的指定位置，当ImageView5动画执行完毕，等待0.3秒；本实施例中ImageView5是从翻页容器第三页的右边向左飞入到第三动画可视区域内的指定位置的。

S83、ImageView6开始飞入到第三动画可视区域内的指定位置，当ImageView6动画执行完毕，结束；本实施例中ImageView6是从翻页容器第三页的右边向左飞入到第三动画可视区域内的指定位置的。

    这个过程中，由于存在图片的延迟飞入，可以让用户更直观感受到视差效果。同时在动画外需要放置一个动画的标题，用以表达该动画引导的内容是让用户可以做什么。

S9、翻页到翻页容器的第四页，执行刷图分割对比效果动画，如图5所示，具体过程如下：

S91、 将分割容器View的宽度在规定的时间内由0变成640，此时View里的ImageView8完全显示并覆盖ImageView7；

S92、再将分割容器View的宽度在规定的时间内由640变成320，此时View里的ImageView8可见范围是一半并显示在左边，ImageView7可见范围也是一半并显示右边。

    在分割容器View的宽度在规定的时间内由0变成640的过程中，整个动画感觉就像一把刷子从左往右给原图刷了一层特效上去；而在分割容器View的宽度在规定的时间内由640变成320后，ImageView8可见范围是一半并显示在左边，ImageView7可见范围也是一半并显示右边，即左边显示效果图，右边显示原图，在效果图和原图中间有一条明显的分割线，让效果图和原图有明显的对比，这样可以让用户更直观感受到视差效果。同时在动画外需要放置一个动画的标题，用以表达该动画引导的内容是让用户可以做什么。

    通过实现四种视差动画，进行组合应用于用户行为引导中，使得整个行为引导过程更紧凑有序，减少了过多的文字引导，通过动画增强了用户对引导的印象，而且不会有视频引导加载时间长的问题，采用本发明的行为引导方法可以向用户传达更明确的信息，体验更吸引人，让用户在体验时感觉更有趣，注意力更为集中，而且可以让用户非常直观的感受应用所带来的活力，让用户感觉应用更贴近生活，使用户对产品产生情感上的联系，增加产品粘度。

本领域的普通技术人员将会意识到，这里所述的实施例是为了帮助读者理解本发明的原理，应被理解为本发明的保护范围并不局限于这样的特别陈述和实施例。本领域的普通技术人员可以根据本发明公开的这些技术启示做出各种不脱离本发明实质的其它各种具体变形和组合，这些变形和组合仍然在本发明的保护范围内。