CN106775379A - 一种图片折叠交互动画的实现方法和装置 - Google Patents

一种图片折叠交互动画的实现方法和装置 Download PDF

Info

Publication number
CN106775379A
CN106775379A CN201611059516.9A CN201611059516A CN106775379A CN 106775379 A CN106775379 A CN 106775379A CN 201611059516 A CN201611059516 A CN 201611059516A CN 106775379 A CN106775379 A CN 106775379A
Authority
CN
China
Prior art keywords
view component
shared
viewing area
component
slip
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201611059516.9A
Other languages
English (en)
Inventor
李伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Music Entertainment Technology Shenzhen Co Ltd
Original Assignee
Tencent Music Entertainment Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Music Entertainment Technology Shenzhen Co Ltd filed Critical Tencent Music Entertainment Technology Shenzhen Co Ltd
Priority to CN201611059516.9A priority Critical patent/CN106775379A/zh
Publication of CN106775379A publication Critical patent/CN106775379A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation

Landscapes

  • Engineering & Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

一种图片折叠交互动画的实现方法和装置
技术领域
本发明涉及计算机技术领域，尤其涉及一种图片折叠交互动画的实现方法和装置。
背景技术
在Android(操作系统)视觉交互风格界面中，有两种交互动画受到人们的青睐，其中一种交互动画是共享元素动画，即当两个页面中包含视觉相同的共享元素时，那么在这两个页面中进行切换时，会出现共享元素逐渐变化的一个过渡动画；另一种交互动画是图片折叠动画，即在有工具栏的页面中对列表视图进行滑动时，界面中的图片会随着列表视图的滑动折叠或展开，工具栏也会随着列表视图的滑动出现或消失。
本发明的发明人在研究过程中发现，现有技术中采用ActivityOptionsCompat(过渡动画兼容，指视觉交互设计中的一种方法)来实现共享元素动画，采用CoordinatorLayout(协调布局，指一种页面布局视图)布局、AppBarLayout(应用工具栏布局，指一种垂直布局视图)组件以及CollapsingToolbarLayout(折叠工具栏布局，指一种可折叠工具栏的布局)组件来实现图片折叠动画，其中，现有技术实现图片折叠动画的层级嵌套关系如图1所示，CoordinatorLayou布局为根布局，CoordinatorLayou布局下嵌套RecyclerView(循环视图，指一种滑动视图)组件和AppBarLayout组件，AppBarLayout组件下嵌套CollapsingToolbarLayout组件，CollapsingToolbarLayout组件下嵌套View(图片)组件和Toolbar(工具栏)组件，如果将图片折叠动画和共享元素动画进行结合则View组件中的内容为共享元素，即共享元素处于第4层级，而在Android 5.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组件。
可选的，获取用户在共享交互界面上针对滑动视图组件的滑动操作前可以将滑动视图组件的初始内部缩进设置为所述共享元素视图组件的显示区域的初始显示尺寸。
具体实现中，可以所述对滑动视图组件作如下设置：
android:layout_height＝"match_parent"，使得所述滑动视图组件的显示区域能与根布局相匹配；
clipToPadding＝"false"，其中，将Padding(内部缩进)的值设置为所述共享元素视图组件的显示区域的高度，即所述滑动视图组件的显示区域的上边缘到所述共享交互界面之间的距离为所述共享元素视图组件的显示区域的高度，保证所述共享元素视图组件的显示区域紧邻所述滑动视图组件的显示区域，将clipToPadding的属性设置为“false”使得所述滑动视图组件的显示区域可以移动到Padding的显示区域，保证所述滑动视图组件的显示区域一直位于所述共享元素视图滑动组件的显示区域的下方且与所述共享元素视图滑动组件的显示区域保持紧邻状态。
可选的，获取用户在共享交互界面上针对滑动视图组件的滑动操作前还可以检测所述滑动视图组件的item的数量是否小于预设阈值，当检测到所述滑动视图组件的item的数量小于预设阈值时，在所述滑动视图组件中添加一个透明item作为所述滑动视图组件的最后一个item，其中，所述透明item的显示尺寸由所述共享交互界面的显示区域和所述滑动视图组件中非透明的总显示尺寸确定。
S102、根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动。
具体的，所述滑动视图组件的显示区域在所述共享交互界面中的移动方向与所述滑动操作的滑动方向一致，即当所述用户的滑动操作为向上滑动时，在所述共享交互界面中将所述滑动视图组件的显示区域向上移动；当所述用户的滑动操作为向下滑动时，在所述共享交互界面中将所述滑动视图组件的显示区域向下移动；当所述用户的滑动操作为向左滑动时，在所述共享交互界面中将所述滑动视图组件的显示区域向左移动；当所述用户的滑动操作为向右滑动时，在所述共享交互界面中将所述滑动视图组件的显示区域向右移动。
S103、监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，当所述滑动视图组件为RecyclerView滑动视图组件时，调用RecyclerView.OnScrollListener滑动监听接口的onScrolled(RecyclerViewrecyclerView,int dx,int dy)方法监听RecyclerView滑动视图组件的显示区域的移动得到所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离；
根据所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，当所述滑动视图组组件为ScrollView滑动视图组件时，调用onScrollChanged(int left，int top，int oldleft，int oldtop)方法监听所述ScrollView滑动视图组件的显示区域的滑动得到所述滑动视图的移动方向与移动距离；
根据所述ScrollView滑动视图组件的显示区域的移动方向与移动距离在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，可以根据所述ScrollView滑动视图组件或所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离调用setTranslationY(float translationY)方法在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
具体的，当监听到所述滑动视图组件的显示区域的移动方向为向上移动时，在所述共享交互界面中缩小所述共享元素视图组件的显示区域，即将所述共享元素视图组件的显示区域向上移动；当监听到所述滑动视图组件的显示区域的移动方向为向下移动时，在所述共享交互界面中扩大所述共享元素视图组件的显示区域，即将所述共享元素视图组件的显示区域向下移动。
S104、根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。
可选的，可以根据所述共享元素视图组件的显示区域调整所述工具栏组件的颜色、透明度或字体。
可选的，可以调用setAlpha(float alpha)方法调整所述工具栏组件的颜色、透明度或字体。
具体的，当所述共享元素视图组件的显示区域缩小时，将所述工具栏及工具栏上的文字的颜色加深并将所述工具栏及工具栏上的文字的透明底调低；当所述共享元素视图组件的显示区域扩大时，将所述工具栏及工具栏上的文字的颜色变浅并将所述工具栏及工具栏上的文字的透明度调高。
可选的，所述共享交互界面还可以包括其他视图组件，所述其他视图组件均为所述共享交互界面的根布局下的子视图组件，可以根据所述滑动视图组件的显示区域的移动方向与移动距离确定所述其他视图组件的显示区域的移动方向与移动距离。
具体的，所述其他视图组件为控制组件。
所述方法还包括：
根据所述滑动视图组件的显示区域的移动将所述控制组件的显示区域在共享交互界面中进行移动。
可选的，所述控制组件可以为与所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件相互并列的子视图组件，也可以为所述共享元素视图组件中的子组件。
下面举例来对上述步骤进行说明，如图4-a，图4-b，图4-c所示，假设用户的滑动操作为向上滑动。图4-a是获取用户在共享交互界面上针对滑动视图组件的滑动操作前的共享交互界面图，图4-a中，图片所在的区域即为共享元素视图组件的显示区域，列表选项所在的区域即为所述滑动视图组件的显示区域，工具栏组件的显示区域位于共享交互界面的顶部，播放按钮所在的区域为所述控制组件的显示区域。图4-b是获取用户的滑动操作后显示图片折叠动画过程中的共享交互界面图，图4-b中，根据用户向上滑动的动作，滑动视图组件的显示区域向上移动(即列表向上移动)，共享元素视图组件的显示区域和控制组件的显示区域随着滑动视图组件的显示区域向上移动(即图片和播放按钮向上移动)，其中所述共享元素视图组件及控制组件的显示区域的移动方向与移动距离与所述滑动视图组件的显示区域的移动方向与移动距离一致，此时从图中可以看出共享元素视图组件的显示区域缩小，控制组件向上移动，工具栏组件的颜色随着共享元素视图组件的显示区域缩小加深，透明度随着共享元素视图组件的显示区域缩小而减小，隐约展现。图4-c是图片折叠动画显示完成后的共享交互界面图，图4-c中，滑动视图组件的显示区域停止移动，共享元素视图组件的显示区域已经缩小到最小，控制组件的显示区域已经不在共享交互界面中，工具栏组件的颜色进一步加深，透明度进一步减小，文字也随之显示出来，此时工具栏已经完全展现。
本发明实施例通过获取用户的滑动操作，根据所述滑动操作将滑动视图组件的显示区域在共享交互界面中进行移动，监听所述滑动视图组件的显示区域的移动，根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小共享元素视图组件的显示区域，实现图片的折叠与展开，同时根据所述共享元素视图组件的显示区域调整工具栏组件的显示效果，实现工具栏的出现与消失，所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件为所述共享交互界面的根布局下的相互并列的三个组件，可以减小共享元素的层级，与共享元素动画结合时保证共享元素动画的正常显示，直接利用滑动视图组件来实现滑动视图的滑动使得滑动视图的滑动更加流畅。
再请参见图5，图5是本发明实施例中的另一种图片折叠交互动画的实现方法，如图所示所述方法至少包括：
S201、获取用户在共享交互界面上针对滑动视图组件的目标item的点击操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠。
其中，所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件为所述共享交互界面的根布局下的并列的子视图组件。
可选的，所述滑动视图组件可以为RecyclerView滑动视图组件，也可以为ScrollView滑动视图组件。
可选的，所述共享交互界面的根布局可以为FrameLayout布局、LinearLayout布局或RelativeLayout布局等界面框架布局。
可选的，所述共享元素视图组件可以为ImageView组件。
可选的，所述工具栏组件可以为Toolbar组件。
具体的，所述目标item可以为共享交互界面上的列表选项中的一个选项。
S202、将所述目标item对应的共享元素传输至所述共享元素视图组件。
其中，所述共享元素为两个页面均有的视觉效果相同的一个元素，例如为两个页面都有的一张图片。
具体的，将当前页面上的共享元素传输给所述用户的点击操作对应的页面的共享元素视图组件。
S203、显示所述共享元素视图组件，并显示所述共享元素从所述滑动视图组件逐渐放大并移动到所述共享元素视图组件的共享动画。
具体的，在从当前页面跳转到所述用户的点击操作对应的页面过程中，在所述共享交互界面中显示所述共享元素的逐渐放大的共享动画，所述共享动画显示完后，跳转显示所述用户的点击操作对应的页面。
S204、在所述共享元素视图组件的显示区域中显示所述共享元素。
具体的，在所述用户的点击操作对应的界面的共享元素视图组件的显示区域中显示所述共享元素。
可选的，可以调用ActivityOptionsCompat组件来实现上述步骤S201～S204的方法。
下面举例对上述步骤S201～S204的方法进行说明，如图6-a，图6-b，图6-c所示，假设用户对共享交互界面上的列表选项中的第一个选项进行点击操作。图6-a是获取所述用户在共享交互界面上针对滑动视图组件的目标item的点击操作前时的共享交互界面图，图6-a中，列表选项所在的区域即为所述滑动视图组件的显示区域，共享元素视图组件和控制组件还未显示出来，工具栏组件的显示区域位于共享交互界面的顶部。图6-b是获取用户的点击操作后的显示共享元素动画过程中的共享交互界面图。图6-b中，滑动视图组件中的第一个item(即列表中的第一个选项)对应的小图图片为共享元素，将小图图片从滑动视图组件传输至共享元素视图组件后，此时共享交互界面上会出现小图图片逐渐放大的过渡动画。图6-c是共享元素动画显示完成后的共享交互界面图，图6-c中，共享元素动画显示完后，共享元素视图组件的显示区域出现，图片(共享元素)显示在共享元素视图组件的显示区域中，控制组件的显示区域出现，滑动视图组件的显示区域向下移动，工具栏消失。
S205、获取所述用户在所述共享交互界面上针对滑动视图组件的滑动操作。
可选的，获取用户在共享交互界面上针对滑动视图组件的滑动操作前可以将滑动视图组件的初始内部缩进设置为所述共享元素视图组件的显示区域的初始显示尺寸。
可选的，获取用户在共享交互界面上针对滑动视图组件的滑动操作前还可以检测所述滑动视图组件的item的数量是否小于预设阈值，当检测到所述滑动视图组件的item的数量小于预设阈值时，在所述在滑动视图组件中添加一个透明item作为所述滑动视图组件的最后一个item，其中，所述透明item的显示尺寸由所述共享交互界面的显示区域和所述滑动视图组件中非透明的总显示尺寸确定。
S206、根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动。
具体的，所述滑动视图组件的显示区域在所述共享交互界面中的移动方向与所述滑动操作的滑动方向一致，即当所述用户的滑动操作为向上滑动时，在所述共享交互界面中将所述滑动视图组件的显示区域向上移动；当所述用户的滑动操作为向下滑动时，在所述共享交互界面中将所述滑动视图组件的显示区域向下移动；当所述用户的滑动操作为向左滑动时，在所述共享交互界面中将所述滑动视图组件的显示区域向左移动；当所述用户的滑动操作为向右滑动时，在所述共享交互界面中将所述滑动视图组件的显示区域向右移动。
S207、监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，当所述滑动视图组件为RecyclerView滑动视图组件时，调用RecyclerView.OnScrollListener滑动监听接口的onScrolled(RecyclerViewrecyclerView,int dx,int dy)方法监听RecyclerView滑动视图组件的显示区域的移动得到所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离；
根据所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，当所述滑动视图组组件为ScrollView滑动视图组件时，调用onScrollChanged(int left，int top，int oldleft，int oldtop)方法监听所述ScrollView滑动视图组件的显示区域的滑动得到所述滑动视图的移动方向与移动距离；
根据所述ScrollView滑动视图组件的显示区域的移动方向与移动距离在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，可以根据所述ScrollView滑动视图组件或所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离调用setTranslationY(float translationY)方法在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
具体的，当监听到所述滑动视图组件的显示区域的移动方向为向上移动时，在所述共享交互界面中缩小所述共享元素视图组件的显示区域，即将所述共享元素视图组件的显示区域向上移动；当监听到所述滑动视图组件的显示区域的移动方向为向下移动时，在所述共享交互界面中扩大所述共享元素视图组件的显示区域，即将所述共享元素视图组件的显示区域向下移动。
S208、根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。
可选的，可以根据所述共享元素视图组件的显示区域调整所述工具栏组件的颜色、透明度或字体。
可选的，可以调用setAlpha(float alpha)方法调整所述工具栏组件的颜色、透明度或字体。
具体的，当所述共享元素视图组件的显示区域缩小时，将所述工具栏及工具栏上的文字的颜色加深并将所述工具栏及工具栏上的文字的透明底调低；当所述共享元素视图组件的显示区域扩大时，将所述工具栏及工具栏上的文字的颜色变浅并将所述工具栏及工具栏上的文字的透明度调高。
可选的，所述共享交互界面还可以包括其他视图组件，所述其他视图组件均为所述共享交互界面的根布局下的子视图组件，可以根据所述滑动视图组件的显示区域的移动方向与移动距离确定所述其他视图组件的显示区域的移动方向与移动距离。
具体的，所述其他视图组件为控制组件。
所述方法还包括：
根据所述滑动视图组件的显示区域的移动将所述控制组件的显示区域在共享交互界面中进行移动。
可选的，所述控制组件可以为与所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件相互并列的子视图组件，也可以为所述共享视图元素组件中的子组件。
步骤S205～S208的具体说明在结合图4-a、图4-b、图4-c的具体例子中已经阐述，在此不再赘述。
本发明实施例通过获取用户的点击操作将滑动视图组件中的目标item对应的共享元素传输至共享元素视图组件，实现在共享交互界面上显示从当前页面跳转到下一页面的共享元素动画，接着获取用户的滑动操作并根据所述滑动操作将滑动视图组件的显示区域在共享交互界面中进行移动，监听所述滑动视图组件的显示区域的移动，根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小共享元素视图组件的显示区域，实现图片的折叠与展开，同时根据所述共享元素视图组件的显示区域调整工具栏组件的显示效果，实现工具栏的出现与消失，所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件为所述共享交互界面的根布局下的相互并列的三个组件，在实现共享元素动画和图片折叠动画的结合的同时保证共享元素的层级不超过3层，使得共享元素动画可以正常显示，直接利用滑动视图组件来实现滑动视图的滑动使得滑动视图的滑动更加流畅。
参见图7，图7是本发明实施例中的一种图片折叠交互动画的实现装置的组成结构示意图，如图所示所述装置至少包括：
滑动操作获取模块310，用于获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠。
其中，所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件为所述共享交互界面的根布局下的并列的子视图组件。
可选的，所述滑动视图组件可以为RecyclerView滑动视图组件，也可以为ScrollView滑动视图组件。
可选的，所述共享交互界面的根布局可以为FrameLayout布局、LinearLayout布局或RelativeLayout布局等界面框架布局。
可选的，所述共享元素视图组件可以为ImageView组件。
可选的，所述工具栏组件可以为Toolbar组件。
具体的，各组件之间的嵌套关系可以如图3所示，图3是本发明实施例中的实现图片折叠交互动画的层级嵌套关系示意图，图3中，FrameLayout布局为根布局，FrameLayout布局下嵌套RecyclerView滑动视图组件、ImageView组件以及Toolbar组件。
可选的，获取用户在共享交互界面上针对滑动视图组件的滑动操作前可以将滑动视图组件的初始内部缩进设置为所述共享元素视图组件的显示区域的初始显示尺寸。
具体实现中，可以所述对滑动视图组件作如下设置：
android:layout_height＝"match_parent"，使得所述滑动视图组件的显示区域能与根布局相匹配；
clipToPadding＝"false"，其中，将Padding(内部缩进)的值设置为所述共享元素视图组件的显示区域的高度，即所述滑动视图组件的显示区域的上边缘到所述共享交互界面之间的距离为所述共享元素视图组件的显示区域的高度，保证所述共享元素视图组件的显示区域紧邻所述滑动视图组件的显示区域，将clipToPadding的属性设置为“false”使得所述滑动视图组件的显示区域可以移动到Padding的显示区域，保证所述滑动视图组件的显示区域一直位于所述共享元素视图滑动组件的显示区域的下方且与所述共享元素视图滑动组件的显示区域保持紧邻状态。
可选的，获取用户在共享交互界面上针对滑动视图组件的滑动操作前还可以检测所述滑动视图组件的item的数量是否小于预设阈值，当检测到所述滑动视图组件的item的数量小于预设阈值时，在所述滑动视图组件中添加一个透明item作为所述滑动视图组件的最后一个item，其中，所述透明item的显示尺寸由所述共享交互界面的显示区域和所述滑动视图组件中非透明的总显示尺寸确定。
滑动视图移动模块320，用于根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动。
具体的，所述滑动视图组件的显示区域在所述共享交互界面中的移动方向与所述滑动操作的滑动方向一致，即当所述用户的滑动操作为向上滑动时，滑动视图移动模块320在所述共享交互界面中将所述滑动视图组件的显示区域向上移动；当所述用户的滑动操作为向下滑动时，滑动视图移动模块320在所述共享交互界面中将所述滑动视图组件的显示区域向下移动；当所述用户的滑动操作为向左滑动时，滑动视图移动模块320在所述共享交互界面中将所述滑动视图组件的显示区域向左移动；当所述用户的滑动操作为向右滑动时，滑动视图移动模块320在所述共享交互界面中将所述滑动视图组件的显示区域向右移动。
共享视图移动模块330，用于监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，当所述滑动视图组件为RecyclerView滑动视图组件时，共享视图移动模块330调用RecyclerView.OnScrollListener滑动监听接口的onScrolled(RecyclerViewrecyclerView,int dx,int dy)方法监听RecyclerView滑动视图组件的显示区域的移动得到所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离；
根据所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，当所述滑动视图组组件为ScrollView滑动视图组件时，共享视图移动模块330调用onScrollChanged(int left，int top，int oldleft，int oldtop)方法监听所述ScrollView滑动视图组件的显示区域的滑动得到所述滑动视图的移动方向与移动距离；
根据所述ScrollView滑动视图组件的显示区域的移动方向与移动距离在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
可选的，共享视图移动模块330可以根据所述ScrollView滑动视图组件或所述RecyclerView滑动视图组件的显示区域的移动方向与移动距离调用setTranslationY(float translationY)方法在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域。
具体的，当共享视图移动模块330监听到所述滑动视图组件的显示区域的移动方向为向上移动时，在所述共享交互界面中缩小所述共享元素视图组件的显示区域，即共享视图移动模块330将所述共享元素视图组件的显示区域向上移动；当共享视图移动模块330监听到所述滑动视图组件的显示区域的移动方向为向下移动时，在所述共享交互界面中扩大所述共享元素视图组件的显示区域，即共享视图移动模块330将所述共享元素视图组件的显示区域向下移动。
工具栏显示模块340，用于根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。
可选的，工具栏显示模块340具体用于根据所述共享元素视图组件的显示区域调整所述工具栏组件的颜色、透明度或字体。
可选的，工具栏显示模块340可以调用setAlpha(float alpha)方法调整所述工具栏组件的颜色、透明度或字体。
具体的，当所述共享元素视图组件的显示区域缩小时，工具栏显示模块340将所述工具栏及工具栏上的文字的颜色加深并将所述工具栏及工具栏上的文字的透明底调低；当所述共享元素视图组件的显示区域扩大时，工具栏显示模块340将所述工具栏及工具栏上的文字的颜色变浅并将所述工具栏及工具栏上的文字的透明度调高。
可选的，所述共享交互界面还可以包括其他视图组件，所述其他视图组件均为所述共享交互界面的根布局下的子视图组件，可以根据所述滑动视图组件的显示区域的移动方向与移动距离确定所述其他视图组件的显示区域的移动方向与移动距离。
具体的，所述其他视图组件为控制组件，所述控制组件的显示区域随着所述滑动视图组件的显示区域的移动而移动。
下面举例来对上述模块进行说明，如图4-a，图4-b，图4-c所示，假设用户的滑动操作为向上滑动。图4-a是获取用户在共享交互界面上针对滑动视图组件的滑动操作前的共享交互界面图，图4-a，中图片所在的区域即为共享元素视图组件的显示区域，列表选项所在的区域即为所述滑动视图组件的显示区域，工具栏组件的显示区域位于共享交互界面的顶部，播放按钮所在的区域为所述控制组件的显示区域。图4-b是获取用户的滑动操作后显示图片折叠动画过程中的共享交互界面图，图4-b中，根据用户向上滑动的动作，滑动视图组件的显示区域向上移动(即列表向上移动)，共享元素视图组件的显示区域和控制组件的显示区域随着滑动视图组件的显示区域向上移动(即图片和播放按钮移动)，其中所述共享元素视图组件及控制组件的显示区域的移动方向与移动距离与所述滑动视图组件的显示区域的移动方向与移动距离一致，此时从图中可以看出共享元素视图组件的显示区域缩小，控制组件向上移动，工具栏组件的颜色随着共享元素视图组件的显示区域缩小加深，透明度随着共享元素视图组件的显示区域的缩小而减小，隐约展现。图4-c是图片折叠动画显示完成后的共享交互界面图，图4-c中，滑动视图组件的显示区域停止移动，共享元素视图组件的显示区域已经缩小到最小，控制组件的显示区域已经不在共享交互界面中，工具栏组件的颜色进一步加深，透明度进一步缩小，文字也随之显示出来，此时工具栏已经完全展现。
可选的，所述装置还可以包括：
点击操作获取模块350，用于获取所述用户在所述共享交互界面上针对所述滑动视图组件的目标item的点击操作。
具体的，所述目标item可以为共享交互界面上的列表选项中的一个选项。
共享元素传输模块360，用于将所述目标item对应的共享元素传输至所述共享元素视图组件。
其中，所述共享元素为两个页面均有的视觉效果相同的一个元素，例如为两个页面都有的一张图片。
具体的，共享元素传输模块360将当前页面上的共享元素传输给所述用户的点击操作对应的页面的共享元素视图组件。
共享动画显示模块370，用于显示所述共享元素视图组件，并显示所述共享元素从所述滑动视图组件逐渐放大并移动到所述共享元素视图组件的共享动画。
具体的，在从当前页面跳转到所述用户的点击操作对应的页面过程中，共享动画显示模块370在所述共享交互界面中显示所述共享元素的逐渐放大的共享动画。
共享元素显示模块380，用于在所述共享元素视图组件的显示区域中显示所述共享元素。
具体的，共享元素显示模块380在所述用户的点击操作对应的界面的共享元素视图组件的显示区域中显示所述共享元素。
下面举例说明，如图6-a，图6-b，图6-c所示，假设用户对共享交互界面上的列表选项中的第一个选项进行点击操作。图6-a是获取所述用户在共享交互界面上针对滑动视图组件的目标item的点击操作前的共享交互界面，图6-a中，列表选项所在的区域即为所述滑动视图组件的显示区域，共享元素视图组件和控制组件还未显示出来，工具栏组件的显示区域位于共享交互界面的顶部。图6-b是获取用户的点击操作后的显示共享元素动画过程中的共享交互界面图。图6-b中，滑动视图组件中的第一个item(即列表中的第一个选项)对应的小图图片为共享元素，将小图图片从滑动视图组件传输至共享元素视图组件后，此时共享交互界面上会出现小图图片逐渐放大的过渡动画。图6-c是共享元素动画显示完成后的共享交互界面图，图6-c中，共享元素动画显示完后，共享元素视图组件的显示区域出现，图片(共享元素)显示在共享元素视图组件的显示区域中，控制组件的显示区域出现，滑动视图组件的显示区域向下移动，工具栏消失。
本发明实施例通过获取用户的滑动操作，根据所述滑动操作将滑动视图组件的显示区域在共享交互界面中进行移动，监听所述滑动视图组件的显示区域的移动，根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小共享元素视图组件的显示区域，实现图片的折叠与展开，同时根据所述共享元素视图组件的显示区域调整工具栏组件的显示效果，实现工具栏的出现与消失，所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件为所述共享交互界面的根布局下的相互并列的三个组件，可以减小共享元素的层级，与共享元素动画结合时保证共享元素动画的正常显示，直接对利用滑动视图组件来实现滑动视图的滑动使得滑动视图的滑动更加流畅。
这里需要指出的是，上述图片折叠交互动画的实现装置可以为PC这种电子设备，还可以为如PAD，平板电脑，手提电脑这种便携电子设备，不限于这里的描述，图片折叠交互动画的实现装置至少包括用于存储数据的数据库和用于数据处理的处理器，可以包括内置的存储介质或独立设置的存储介质。
其中，对于用于数据处理的处理器而言，在执行处理时，可以采用微处理器、中央处理器(CPU，Central Processing Unit)、数字信号处理器(DSP，DigitalSingnalProcessor)或可编程逻辑阵列(FPGA，Field－Programmable Gate Array)实现；对于存储介质来说，包含操作指令，该操作指令可以为计算机可执行代码，通过所述操作指令来实现上述本发明实施例如结合图2或图5所描述的图片折叠交互动画的实现流程中的各个步骤。
图片折叠交互动画的实现装置作为硬件实体的一个示例如图8所示。所述装置包括处理器401、存储介质402以及至少一个外部通信接口403；所述处理器401、存储介质402以及通信接口403均通过总线404连接。
图片折叠交互动画的实现装置的处理器401可以调用存储介质402中的操作指令执行以下流程：
获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠；
根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动；
监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域；
根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。
这里需要指出的是：以上涉及图片折叠交互动画的实现装置的描述，与图片折叠交互动画的实现方法的描述是类似的，同方法的有益效果描述，不做赘述。对于本发明图片折叠交互动画的实现装置实施例中未披露的技术细节，请参照本发明方法实施例的描述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。
本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。
本发明实施例装置中的模块可以根据实际需要进行合并、划分和删减。
以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (14)

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.一种图片折叠交互动画的实现装置，其特征在于，所述装置包括：
滑动操作获取模块，用于获取用户在共享交互界面上针对滑动视图组件的滑动操作，所述共享交互界面包括所述滑动视图组件、共享元素视图组件以及工具栏组件，其中所述滑动视图组件和所述共享元素视图组件在所述共享交互界面中的显示区域互不重叠；
滑动视图移动模块，用于根据所述滑动操作将所述滑动视图组件的显示区域在所述共享交互界面中进行移动；
共享视图移动模块，用于监听所述滑动视图组件的显示区域的移动，并根据所述滑动视图组件的显示区域的移动在所述共享交互界面中放大或缩小所述共享元素视图组件的显示区域；
工具栏显示模块，用于根据所述共享元素视图组件的显示区域调整所述工具栏组件的显示效果。
9.如权利要求8所述的装置，其特征在于，所述滑动视图组件、所述共享元素视图组件以及所述工具栏组件为所述共享交互界面的根布局下的并列的子视图组件。
10.如权利要求8或9所述的装置，其特征在于，所述滑动视图组件包括：
RecyclerView滑动视图组件或ScrollView滑动视图组件。
11.如权利要求8所述的装置，其特征在于，所述装置还包括：
item数量检测模块，用于检测所述滑动视图组件的item的数量是否小于预设阈值；
透明item添加模块，用于在所述滑动视图组件中添加一个透明item作为所述滑动视图组件的最后一个item，其中，所述透明item的显示尺寸由所述共享交互界面的显示区域和所述滑动视图组件中非透明item的总显示尺寸确定。
12.如权利要求8所述的装置，其特征在于，所述滑动视图组件中包含与各个item对应的共享元素；
所述装置还包括：
点击操作获取模块，用于获取所述用户在所述共享交互界面上针对所述滑动视图组件的目标item的点击操作；
共享元素传输模块，用于将所述目标item对应的共享元素传输至所述共享元素视图组件；
共享动画显示模块，用于显示所述共享元素视图组件，并显示所述共享元素从所述滑动视图组件逐渐放大并移动到所述共享元素视图组件的共享动画；
共享元素显示模块，用于在所述共享元素视图组件的显示区域中显示所述共享元素。
13.如权利要求8所述的装置，其特征在于，所述工具栏显示模块具体用于：
根据所述共享元素视图组件的显示区域调整所述工具栏组件的颜色、透明度或字体。
14.如权利要求8所述的装置，其特征在于，所述共享交互界面还包括控制组件；
所述装置还包括：
控制组件显示模块，用于根据所述滑动视图组件的显示区域的移动将所述控制组件的显示区域在所述共享交互界面中进行移动。
CN201611059516.9A 2016-11-22 2016-11-22 一种图片折叠交互动画的实现方法和装置 Pending CN106775379A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201611059516.9A CN106775379A (zh) 2016-11-22 2016-11-22 一种图片折叠交互动画的实现方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201611059516.9A CN106775379A (zh) 2016-11-22 2016-11-22 一种图片折叠交互动画的实现方法和装置

Publications (1)

Publication Number Publication Date
CN106775379A true CN106775379A (zh) 2017-05-31

Family

ID=58911600

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201611059516.9A Pending CN106775379A (zh) 2016-11-22 2016-11-22 一种图片折叠交互动画的实现方法和装置

Country Status (1)

Country Link
CN (1) CN106775379A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107861680A (zh) * 2017-10-18 2018-03-30 福建中金在线信息科技有限公司 轮播图的缩放方法、装置和移动终端
CN109492178A (zh) * 2018-11-05 2019-03-19 腾讯科技（深圳）有限公司 一种切换视图的方法及装置
CN113608816A (zh) * 2021-08-18 2021-11-05 北京字跳网络技术有限公司 进度的调整方法、装置、电子设备和存储介质
US11169697B2 (en) * 2019-01-28 2021-11-09 Samsung Electronics Co., Ltd. Electronic device and method for displaying contextual information of application
CN114237780A (zh) * 2020-09-09 2022-03-25 华为技术有限公司 一种界面间的转换方法、设备及系统
WO2022111698A1 (zh) * 2020-11-30 2022-06-02 华为技术有限公司 应用切换的转场动画生成方法及相关设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080279475A1 (en) * 2007-05-03 2008-11-13 Ying-Chu Lee Method for manipulating pictures via a wheel mouse
CN103376977A (zh) * 2012-04-23 2013-10-30 腾讯科技（深圳）有限公司 浏览器的显示方法及显示装置
US20140181697A1 (en) * 2012-12-20 2014-06-26 Dropbox, Inc. Systems and methods for facilitating communication between users of a content management service
CN104156156A (zh) * 2013-05-13 2014-11-19 腾讯科技（深圳）有限公司 应用交互界面信息展示方法及装置
CN105511740A (zh) * 2015-12-30 2016-04-20 小米科技有限责任公司 应用界面切换方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20080279475A1 (en) * 2007-05-03 2008-11-13 Ying-Chu Lee Method for manipulating pictures via a wheel mouse
CN103376977A (zh) * 2012-04-23 2013-10-30 腾讯科技（深圳）有限公司 浏览器的显示方法及显示装置
US20140181697A1 (en) * 2012-12-20 2014-06-26 Dropbox, Inc. Systems and methods for facilitating communication between users of a content management service
CN104156156A (zh) * 2013-05-13 2014-11-19 腾讯科技（深圳）有限公司 应用交互界面信息展示方法及装置
CN105511740A (zh) * 2015-12-30 2016-04-20 小米科技有限责任公司 应用界面切换方法及装置

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107861680A (zh) * 2017-10-18 2018-03-30 福建中金在线信息科技有限公司 轮播图的缩放方法、装置和移动终端
CN109492178A (zh) * 2018-11-05 2019-03-19 腾讯科技（深圳）有限公司 一种切换视图的方法及装置
US11169697B2 (en) * 2019-01-28 2021-11-09 Samsung Electronics Co., Ltd. Electronic device and method for displaying contextual information of application
CN114237780A (zh) * 2020-09-09 2022-03-25 华为技术有限公司 一种界面间的转换方法、设备及系统
CN114237780B (zh) * 2020-09-09 2024-09-17 华为技术有限公司 一种界面间的转换方法、设备及系统
WO2022111698A1 (zh) * 2020-11-30 2022-06-02 华为技术有限公司 应用切换的转场动画生成方法及相关设备
CN113608816A (zh) * 2021-08-18 2021-11-05 北京字跳网络技术有限公司 进度的调整方法、装置、电子设备和存储介质
CN113608816B (zh) * 2021-08-18 2023-05-23 北京字跳网络技术有限公司 进度的调整方法、装置、电子设备和存储介质

Similar Documents

Publication Publication Date Title
CN106775379A (zh) 一种图片折叠交互动画的实现方法和装置
US20200089380A1 (en) Information processing apparatus, information processing method, and program
US9304668B2 (en) Method and apparatus for customizing a display screen of a user interface
US20190155497A1 (en) Native overlay for rapid editing of web content
US20150113428A1 (en) Widget Setting Method and Terminal Device
US9552129B2 (en) Interactive visual representation of points of interest data
CN109844816A (zh) 用于显示代表性图像的系统和方法
US20160357365A1 (en) Document Channel Selection for Document Viewing Application
US10088999B2 (en) Scroll end effects for websites and content
CN106484242A (zh) 界面的信息显示方法和装置
TW201525851A (zh) 頁面元件之接觸式重組
KR20170026274A (ko) 콘텐츠 편집 장치 및 편집 방법
CN104571829A (zh) 一种终端的显示控制方法及终端
CN106201200A (zh) 一种分屏显示方法及终端
CN106681616B (zh) 一种浏览器功能栏显示方法、装置及设备
CN107272984A (zh) 一种应用图标预览方法、装置及电子设备
CN104951193B (zh) 菜单显示方法及装置
CN102830910A (zh) 实现触屏设备网页阅读模式的方法和系统
US20140282231A1 (en) Dynamically reconfigurable multiframe user interface for a computing device
CN103116442B (zh) 终端界面的展示方法和装置
CN112464121B (zh) 数据加载方法、装置、计算机设备和存储介质
CN110633035A (zh) 一种动态悬浮菜单的实现方法和装置
CN110007829A (zh) 内容显示方法、装置、终端及存储介质
CN105892794A (zh) 一种浏览器界面显示方法及装置
CN105630366A (zh) 用于在屏幕显示设备上展示客体信息的方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20170531