一种图片折叠交互动画的实现方法和装置制造方法及图纸

本发明专利技术实施例提供一种图片折叠交互动画的实现方法和装置。一种图片折叠交互动画的实现方法，包括：获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件；根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动；监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域；根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。本发明专利技术的技术方案可以在与共享元素动画结合时保证共享元素动画的正常显示，使滑动视图的滑动效果更流畅。

Method and device for realizing picture folding interactive animation

The embodiment of the invention provides a method and a device for realizing picture folding interactive animation. Including the implementation method, a picture of folding interactive animation: acquiring user interface for sliding in shared view components sliding operation, the shared interface including the slide view component, component and component elements share the view toolbar; according to the sliding operation of the slide view components in the display area the sharing of mobile interface in the display area; mobile monitor the slide view component, and according to the slide view component display sharing interface to enlarge or shrink the shared display area element view components in the mobile area; according to the shared display area to adjust the toolbar the component elements of view components. The technical proposal of the invention can ensure the normal display of the shared element animation when combined with the shared element animation, and the sliding effect of the sliding view is smoother.

【技术实现步骤摘要】
一种图片折叠交互动画的实现方法和装置
本专利技术涉及计算机
，尤其涉及一种图片折叠交互动画的实现方法和装置。
技术介绍
在Android(操作系统)视觉交互风格界面中，有两种交互动画受到人们的青睐，其中一种交互动画是共享元素动画，即当两个页面中包含视觉相同的共享元素时，那么在这两个页面中进行切换时，会出现共享元素逐渐变化的一个过渡动画；另一种交互动画是图片折叠动画，即在有工具栏的页面中对列表视图进行滑动时，界面中的图片会随着列表视图的滑动折叠或展开，工具栏也会随着列表视图的滑动出现或消失。本专利技术的专利技术人在研究过程中发现，现有技术中采用ActivityOptionsCompat(过渡动画兼容，指视觉交互设计中的一种方法)来实现共享元素动画，采用CoordinatorLayout(协调布局，指一种页面布局视图)布局、AppBarLayout(应用工具栏布局，指一种垂直布局视图)组件以及CollapsingToolbarLayout(折叠工具栏布局，指一种可折叠工具栏的布局)组件来实现图片折叠动画，其中，现有技术实现图片折叠动画的层级嵌套关系如图1所示，CoordinatorLayou布局为根布局，CoordinatorLayou布局下嵌套RecyclerView(循环视图，指一种滑动视图)组件和AppBarLayout组件，AppBarLayout组件下嵌套CollapsingToolbarLayout组件，CollapsingToolbarLayout组件下嵌套View(图片)组件和Toolbar(工具栏)组件，如果将图片折叠动画和共享元素动画进行结合则View组件中的内容为共享元素，即共享元素处于第4层级，而在Android5.0系统上共享元素所在层级超过3层会导致共享元素动画失效，即采用现有技术实现图片折叠动画与共享元素动画的结合会导致共享元素动画失效，另外，采用CoordinatorLayout布局实现图片折叠动画时滑动视图的滑动效果不流畅。
技术实现思路
本专利技术提供一种图片折叠交互动画的实现方法和装置，与共享元素动画结合时保证共享元素动画的正常显示，同时使滑动视图的滑动效果更为流畅。本专利技术实施例第一方面提供一种折叠交互动画的实现方法，所述方法包括：获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠；根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动；监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域；根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。相应的，本专利技术实施例第二方面提供一种图片折叠交互动画的实现装置，所述装置包括：滑动操作获取模块，用于获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠；滑动视图移动模块，用于根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动；共享视图移动模块，用于监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域；工具栏显示模块，用于根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。本专利技术实施例通过获取用户的滑动操作，根据所述滑动操作将滑动视图组件的显示区域在共享交互界面中进行移动，监听所述滑动视图组件的显示区域的移动，根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小共享元素视图组件的显示区域，实现图片的折叠与展开，同时根据所述共享元素视图组件的显示区域调整工具栏组件的显示效果，实现工具栏的出现与消失，直接利用滑动视图组件来实现滑动视图的滑动使得滑动视图的滑动更加流畅。附图说明为了更清楚地说明本专利技术实施例中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是现有技术中实现图片折叠交互动画的层级嵌套关系示意图；图2是本专利技术实施例中的一种图片折叠交互动画的实现方法；图3是本专利技术实施例中的实现图片折叠交互动画的层级嵌套关系示意图；图4-a是获取用户在共享交互界面上针对滑动视图组件的滑动操作前的共享交互界面图；图4-b是获取用户的滑动操作后显示图片折叠动画过程中的共享交互界面图；图4-c是图片折叠动画显示完成后的共享交互界面图；图5是本专利技术实施例中的另一种图片折叠交互动画的实现方法；图6-a是获取所述用户在共享交互界面上针对滑动视图组件的目标item的点击操作前的共享交互界面；图6-b是获取用户的点击操作后的显示共享元素动画过程中的共享交互界面图；图6-c是共享元素动画显示完成后的共享交互界面图；图7是本专利技术实施例中的一种图片折叠交互动画的实现装置的组成结构示意图；图8是本专利技术实施例中的图片折叠交互动画的实现装置的一个硬件组成结构示意图。具体实施方式下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。首先参见图2，图2是本专利技术实施例中的一种图片折叠交互动画的实现方法，本专利技术实施例的方法可以实现在手机、笔记本、IPAD、台式电脑等可以显示交互动画的设备上，如图所示所述方法至少包括：S101、获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠。其中，所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件为所述共享交互界面的根布局下的并列的子视图组件。可选的，所述滑动视图组件可以为RecyclerView滑动视图组件，也可以为ScrollView(卷形视图，指一种滑动视图)滑动视图组件。可选的，所述共享交互界面的根布局可以为FrameLayout(框架布局)布局、LinearLayout(直线布局)布局或RelativeLayout(相对布局)布局等界面框架布局。可选的，所述共享元素视图组件可以为ImageView(图片视图)组件。可选的，所述工具栏组件可以为Toolbar组件。具体的，各组件之间的嵌套关系如图3所示，图3是本专利技术实施例中的实现图片折叠交互动画的层级嵌套关系示意图，图3中，FrameLayout布局为根布局，FrameLayout布局下嵌套RecyclerView滑动视图组件、ImageView组件以及Toolbar组件。可选的，获取用户在共享交互界面上针对滑动视图组件的滑动操作前可以将滑动本文档来自技高网...

【技术保护点】
一种图片折叠交互动画的实现方法，其特征在于，所述方法包括：获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠；根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动；监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域；根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。

【技术特征摘要】
1.一种图片折叠交互动画的实现方法，其特征在于，所述方法包括：获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠；根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动；监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域；根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。2.如权利要求1所述的方法，其特征在于，所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件为所述共享交互界面的根布局下的并列的子视图组件。3.如权利要求1或2所述的方法，其特征在于，所述滑动视图组件包括：RecyclerView滑动视图组件或ScrollView滑动视图组件。4.如权利要求1所述的方法，其特征在于，所述方法还包括：检测所述滑动视图组件的item的数量是否小于预设阈值；若是，则在所述滑动视图组件中添加一个透明item作为所述滑动视图组件的最后一个item，其中，所述透明item的显示尺寸由所述共享交互界面的显示区域和所述滑动视图组件中非透明item的总显示尺寸确定。5.如权利要求1所述的方法，其特征在于，所述滑动视图组件中包含与各个item对应的共享元素；所述获取用户在共享交互界面上针对滑动视图组件的滑动操作之前包括：获取所述用户在所述共享交互界面上针对所述滑动视图组件的目标item的点击操作；将所述目标item对应的共享元素传输至所述共享元素视图组件；显示所述共享元素视图组件，并显示所述共享元素从所述滑动视图组件逐渐放大并移动到所述共享元素视图组件的共享动画；在所述共享元素视图组件的显示区域中显示所述共享元素。6.如权利要求1所述的方法，其特征在于，所述根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果包括：根据所述共享元素视图组件的显示区域调整所述工具栏组件的颜色、透明度或字体。7.如权利要求1所述的方法，其特征在于，所述共享交互界面还包括控制组件；所述方法还包括：根据所述滑动视图组件的显示区域的移动将所述控制组件的显示区域在所述共享交互界面中进行移动。8.一种图片折叠交互动画的实现装置，其特征在于，所述装置包括：滑动操作获取模块...

【专利技术属性】
技术研发人员：李伟，
申请(专利权)人：腾讯音乐娱乐深圳有限公司，
类型：发明
国别省市：广东,44