CN116974446B - 一种动画效果的显示方法及装置 - Google Patents
一种动画效果的显示方法及装置 Download PDFInfo
- Publication number
- CN116974446B CN116974446B CN202311196800.0A CN202311196800A CN116974446B CN 116974446 B CN116974446 B CN 116974446B CN 202311196800 A CN202311196800 A CN 202311196800A CN 116974446 B CN116974446 B CN 116974446B
- Authority
- CN
- China
- Prior art keywords
- animation effect
- coordinate position
- application
- scaling
- screen coordinate
- 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.)
- Active
Links
- 230000000694 effects Effects 0.000 title claims abstract description 282
- 238000000034 method Methods 0.000 title claims abstract description 116
- 230000008569 process Effects 0.000 claims abstract description 48
- 238000003825 pressing Methods 0.000 claims abstract description 7
- 238000007667 floating Methods 0.000 claims description 109
- 230000004044 response Effects 0.000 claims description 29
- 238000004590 computer program Methods 0.000 claims description 12
- 238000006073 displacement reaction Methods 0.000 claims description 12
- 230000000007 visual effect Effects 0.000 abstract description 12
- 239000010410 layer Substances 0.000 description 50
- 230000006870 function Effects 0.000 description 22
- 238000010586 diagram Methods 0.000 description 16
- 238000012545 processing Methods 0.000 description 15
- 238000009877 rendering Methods 0.000 description 8
- 239000011159 matrix material Substances 0.000 description 7
- 238000004891 communication Methods 0.000 description 6
- 230000008859 change Effects 0.000 description 5
- 230000003993 interaction Effects 0.000 description 5
- 230000007704 transition Effects 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 4
- 238000010422 painting Methods 0.000 description 4
- 230000001360 synchronised effect Effects 0.000 description 4
- 239000011230 binding agent Substances 0.000 description 3
- 230000033001 locomotion Effects 0.000 description 3
- 230000002441 reversible effect Effects 0.000 description 3
- 229920001621 AMOLED Polymers 0.000 description 2
- 230000003190 augmentative effect Effects 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 238000009792 diffusion process Methods 0.000 description 2
- 230000001788 irregular Effects 0.000 description 2
- 238000002156 mixing Methods 0.000 description 2
- 239000002356 single layer Substances 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 241001422033 Thestylus Species 0.000 description 1
- 230000001133 acceleration Effects 0.000 description 1
- 230000003044 adaptive effect Effects 0.000 description 1
- 238000013528 artificial neural network Methods 0.000 description 1
- 210000000988 bone and bone Anatomy 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 239000004020 conductor Substances 0.000 description 1
- 239000000470 constituent Substances 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 239000013078 crystal Substances 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000000605 extraction Methods 0.000 description 1
- 230000005057 finger movement Effects 0.000 description 1
- 238000009432 framing Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000001939 inductive effect Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000004807 localization Effects 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 238000007781 pre-processing Methods 0.000 description 1
- 239000002096 quantum dot Substances 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
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/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
- G06F3/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- 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
- G06F3/04817—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 using icons
-
- 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
- G06F3/0486—Drag-and-drop
-
- 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
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
技术领域
本申请涉及电子设备领域,并且更具体地,涉及一种动画效果的显示方法及装置。
背景技术
随着智能终端的飞速发展,智能终端已经成为用户生活中不可或缺的设备。通过智能终端中的应用程序,智能终端可为用户提供各类体验。用户在使用智能终端时会涉及到长按某个对象进行拖拽的场景,比如,当用户长按图库应用中的某个照片缩略图,对其进行拖拽的场景。目前智能终端提供的拖拽流程的动画效果仅为简单跟随手指移动的动画效果,这种动画效果较为生硬。因此,如何对拖拽过程中的动画效果进行优化,是一个亟待解决的问题。
发明内容
有鉴于此,本申请提供了一种动画效果的显示方法、装置、计算机可读存储介质和计算机程序产品,提供了一种针对拖拽操作的动画效果,能够提供较为自然且流畅的动画效果,丰富了用户的视觉体验。
第一方面,提供了一种动画效果的显示方法,包括:
显示第一界面,所述第一界面包括第一元素;
检测到长按所述第一元素后的拖拽操作;
响应于所述拖拽操作,显示第一动画效果,所述第一动画效果是从第一屏幕坐标位置到第二屏幕坐标位置的拖拽动画效果,所述第一屏幕坐标位置是所述第一动画效果的首个图像帧的屏幕坐标位置,所述第一屏幕坐标位置基于所述第一元素的尺寸、所述第一元素的屏幕坐标位置、所述首个图像帧的尺寸以及预设的触点位置确定的,所述第二屏幕坐标位置是所述拖拽操作停留时对应的屏幕坐标位置;
所述第一动画效果是根据以下中的一项或多项参数生成的:所述首个图像帧的尺寸、所述第一屏幕坐标位置、所述第二屏幕坐标位置、目标缩放参数以及动画曲线参数。
上述方案可以由电子设备或电子设备中的芯片执行。基于上述方案,电子设备在检测到长按所述第一元素后的拖拽操作后,响应于拖拽操作,显示第一动画效果(或者称作拖拽动画效果),该第一动画效果是从首个图像帧(或者称作浮起阴影帧)的屏幕坐标位置逐渐过渡到拖拽停留位置的动画效果。相比于直接跟手的动画效果,本申请实施例的第一动画效果增加了从浮起阴影帧到长按操作对应的触点位置之间的过渡动画效果,使得整个拖拽过程的动效更为流畅自然,丰富了用户的视觉体验。并且,浮起阴影帧对应的屏幕坐标位置与拖拽操作停留时对应的屏幕坐标位置无关。
本申请实施例的动画效果的显示方法应用于调用拖拽接口的场景。比如,拖拽接口是指安卓架构中的startDragAndDrop。也就是说,只要涉及到调用startDragAndDrop接口响应用户的拖拽操作的应用场景,均可采用本申请实施例的动画效果的显示方法。
可选地,为了实现本申请实施例的动画效果的显示方法,本申请实施例在原生框架中增加了视图扩展类和拖拽功能扩展类,以生成本申请实施例的动画效果。
在一些可能的实现方式中,所述第一动画效果包括:从所述第一屏幕坐标位置到第三屏幕坐标位置的动画效果,以及,从所述第三屏幕坐标位置到所述第二屏幕坐标位置的动画效果,其中,所述第三屏幕坐标位置是用户在所述第一元素进行长按时对应的触点位置;
其中,从所述第三屏幕坐标位置到所述第二屏幕坐标位置的动画效果包括位移动画效果和缩放动画效果,所述缩放动画效果对应的目标缩放参数是基于预设的缩放规则确定的。
也就是说,第一动画效果包括两个阶段的动画效果,分别为:响应于长按操作后生成的过渡动画效果;响应于长按以后的拖拽操作的跟手动画效果。其中,响应于长按操作后生成的过渡动画效果是指:从首个浮起阴影帧的屏幕坐标位置(或者说是第一屏幕坐标位置)移动到长按操作对应的触点位置(或者说是第三屏幕坐标位置)的动画效果。响应于拖拽操作后的跟手动画效果是指:从长按操作对应的触点位置到拖拽操作停留的坐标位置的动画效果,该动画效果包括位移动画以及缩放动画效果。这样获得的第一动画效果更为流畅自然,比较生动。
第一元素的值被拖拽的对象或元素,具体指继承于视图(View)的元素。本申请实施例对第一元素的类型不作具体限定。第一元素可以是以下元素中的一项或多项:图片类元素、文本类元素、文件列表类元素、图标类元素、统一资源定位符(uniform resourcelocator,URL)元素以及卡片类元素等界面元素。
对于不同类型的拖拽对象,可提供不同的缩放规则。
在一些可能的实现方式中,在第一元素是照片缩略图时,可采用1.1倍的缩放规则进行缩放处理。
在一些可能的实现方式中,在所述第一元素是图片类元素时,所述预设的缩放规则包括:根据所述第一元素的高度和宽度确定的缩放规则,或者,根据所述首个图像帧的高度和宽度确定的缩放规则。
在一些可能的实现方式中,对于第一元素是图片大图的情况,所述预设的缩放规则包括:
在所述第一元素的高大于或等于第一阈值时,按照第一缩放比例进行缩放,所述第一缩放比例为所述第一阈值;
在所述第一元素的高小于所述第一阈值,且所述第一元素的宽大于或等于第二阈值时,按照第二缩放比例进行缩放,所述第二缩放比例为所述第二阈值;
在所述第一元素的高小于所述第一阈值,且所述第一元素的宽小于第二阈值时,不进行缩放。
在一些可能的实现方式中,所述第一界面包括第一显示区域和第二显示区域,所述第一元素位于所述第一显示区域,所述第一显示区域对应于所述第一应用,所述第二显示区域对应于所述第二应用,所述拖拽操作包括将所述第一元素从所述第一显示区域拖拽到所述第二显示区域的操作,所述第一应用与所述第二应用不同。也就是说,本申请实施例可应用于跨应用拖拽的场景。
为了提供完整的拖拽动效流程,本申请实施例还设计了释放动画效果。并且,基于不同的释放位置,设计了相应的释放动画效果,以使得释放动画效果更符合用户的感受。
在一些可能的实现方式中,所述方法还包括:
检测到在第一位置释放所述第一元素的操作,所述第一位置位于所述第二显示区域;
响应于所述第一元素被所述第二应用接收,显示第一释放动画效果,所述第一释放动画效果是图像帧逐渐缩小直至消失的动画效果。
因此,对于在跨应用的释放操作(比如,在第二应用对应的界面检测到的释放操作),如果被拖拽的对象被第二应用接收,可以生成返图像帧逐渐缩小直至消失的动画效果,以便使得用户能够直观看到被拖拽的对象被第二应用接收的过程,或者说被拖拽的对象落到第二应用的过程,丰富用户的视觉体验。
在一些可能的实现方式中,所述方法还包括:
检测到在第二位置释放所述第一元素的操作,所述第二位置位于所述第二显示区域;
响应于所述第一元素未被所述第二应用接收,显示第二释放动画效果,所述第二释放动画效果是图像帧逐渐放大直至消失的动画效果。
因此,对于在跨应用的释放操作(比如,在第二应用对应的界面检测到的释放操作),如果被拖拽的对象没有被第二应用接收,可以生成返图像帧逐渐放大直至消失的动画效果,以便使得用户能够直观看到被拖拽的对象没有被第二应用接收的过程,丰富用户的视觉体验。
在一些可能的实现方式中,所述方法还包括:
检测到在第三位置释放所述第一元素的操作,所述第三位置位于所述第一显示区域;
响应于释放所述第一元素的操作,显示第三释放动画效果,所述第三释放动画效果是从所述第三位置返回到所述第一元素的原始屏幕坐标位置的动画效果。
因此,对于在同一应用内的释放操作,可以生成返回到第一元素的原始屏幕位置的动画效果,以便使得用户能够直观看到被拖拽的对象返回到原始屏幕位置的过程,丰富用户的视觉体验。
第二方面,提供了一种电子设备,包括用于执行第一方面中任一种方法的单元。该电子设备可以是终端设备,也可以是终端设备内的芯片。该电子设备包括输入单元、显示单元和处理单元。
当该电子设备是终端设备时,该处理单元可以是处理器,该输入单元可以是通信接口,该显示单元可以是图形处理模块和屏幕;该终端设备还可以包括存储器,该存储器用于存储计算机程序代码,当该处理器执行该存储器所存储的计算机程序代码时,使得该终端设备执行第一方面中任一实现方式中的方法。
当该电子设备是终端设备内的芯片时,该处理单元可以是芯片内部的逻辑处理单元,该输入单元可以是输入接口、管脚或电路等,该显示单元可以是芯片内部的图形处理单元;该芯片还可以包括存储器,该存储器可以是该芯片内的存储器(例如,寄存器、缓存等),也可以是位于该芯片外部的存储器(例如,只读存储器、随机存取存储器等);该存储器用于存储计算机程序代码,当该处理器执行该存储器所存储的计算机程序代码时,使得该芯片执行第一方面的任一种方法。
第三方面,提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序代码,当所述计算机程序代码被电子设备运行时,使得该电子设备执行第一方面中的任一种方法。
第四方面,提供了一种计算机程序产品,所述计算机程序产品包括:计算机程序代码,当所述计算机程序代码被电子设备运行时,使得该电子设备执行第一方面中的任一种方法。
附图说明
图1是本申请实施例的一种电子设备的硬件***示意图;
图2是本申请实施例的一种电子设备的软件***示例图;
图3A是本申请实施例提供的拖拽动画效果的一个界面示例图;
图3B是本申请实施例提供的拖拽动画效果的另一个界面示例图;
图3C是本申请实施例提供的拖拽动画效果的又一个界面示例图;
图4是本申请实施例提供的一个释放动画效果的一个界面示例图;
图5是本申请实施例提供的另一个释放动画效果的一个界面示例图;
图6是本申请实施例提供的又一个释放动画效果的一个界面示例图;
图7是本申请实施例提供的计算浮起阴影帧的屏幕坐标位置的示例图;
图8是本申请实施例提供的一个预设缩放规则的方法流程示例图;
图9是本申请实施例提供的动画效果的显示方法的一个时序流程示例图;
图10是本申请实施例提供的动画效果的显示方法的另一个时序流程示例图。
具体实施方式
下面将结合附图,对本申请实施例中的技术方案进行描述。
在本申请实施例中,除非另有说明,“多个”的含义可以是两个或两个以上。
目前,手机响应于用户长按某一内容的操作,会浮起一个图像帧,但是不生成动画效果。随后,当用户针对该内容执行拖拽操作后,手机在屏幕显示该内容跟手移动的画面。进一步地,当用户抬手释放掉该内容时,手机响应于用户抬手释放的操作,在屏幕显示的该内容的跟手画面帧会直接消失,没有相应的消失动画效果。整个拖拽流程(比如,起拖阶段和释放阶段)比较生硬或者说不够自然,没有动画效果过渡,体验不佳。
有鉴于此,本申请提供了一种动画效果的显示方法,电子设备显示第一界面,第一界面包括第一元素;检测到长按所述第一元素后的拖拽操作后,响应于拖拽操作,显示第一动画效果(或者称作拖拽动画效果),该第一动画效果是从首个图像帧的屏幕坐标位置逐渐过渡到拖拽停留位置的动画效果。相比于直接跟手的动画效果,本申请实施例的第一动画效果增加了从浮起阴影帧到长按操作对应的触点位置之间的过渡动画效果,使得整个拖拽过程的动效更为流畅自然,且更生动,丰富了用户的视觉体验。并且,浮起阴影帧对应的屏幕坐标位置与拖拽操作停留时对应的屏幕坐标位置无关。浮起阴影帧对应的屏幕坐标位置是基于所述第一元素的尺寸、所述第一元素的屏幕坐标位置、所述首个图像帧的尺寸以及预设的触点位置确定的。
进一步地,电子设备响应于用户释放拖拽该第一元素的操作,生成释放动画效果,从而使得拖拽过程中的动画效果更为自然流畅,更为生动且符合用户感受,显著提升用户的视觉体验。
本申请实施例应用于电子设备响应于用户针对某一元素、内容或某对象执行拖拽操作的场景。对于涉及到拖拽操作的场景,本申请实施例的动画效果的显示方法均是适用的。
在一些实施例中,本申请实施例的动画效果的显示方法应用于调用拖拽接口的场景。比如,拖拽接口是指安卓架构中的startDragAndDrop。也就是说,只要涉及到调用startDragAndDrop接口响应用户的拖拽操作的应用场景,均可采用本申请实施例的动画效果的显示方法。
动画效果(可简称为动效),是通过逐帧播放多个图像帧形成的动态画面(比如,多个图像帧中包含的画面元素或内容发生变化),以使用户直观感受某种真实场景。
在一些实施例中,本申请实施例的动画效果的显示方法应用于跨应用(即应用程序)的拖拽操作场景。比如,响应于用户将第一元素从第一应用拖拽到第二应用的操作,电子设备显示相应的拖拽效果。
本申请实施例对应用程序的类型不作具体限定。应用程序可以是第三方应用程序,也可以是***应用程序。比如,第一应用与第二应用均为***应用程序。又比如,第一应用为第三方应用程序,第二应用为***应用程序。又比如,第一应用为***应用程序,第二应用为第三方应用程序。
本申请实施例对被拖拽的元素或内容不作具体限定。被拖拽的元素是指继承于视图(View)的元素。以被拖拽的元素是第一元素为例,第一元素可以是以下元素中的一项或多项:图片类元素、文本类元素、文件列表类元素、图标类元素、统一资源定位符(uniformresource locator,URL)元素以及卡片类元素等界面元素。
在介绍本申请实施例的动画效果的显示方法之前,首先结合图1和图2描述本申请实施例的硬件***和软件***。
参考图1,图1示出了本申请实施例提供的一种电子设备的硬件***示意图。
装置100可以是手机、智慧屏、平板电脑、可穿戴电子设备、车载电子设备、增强现实(augmented reality,AR)设备、虚拟现实(virtual reality,VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer,UMPC)、上网本、个人数字助理(personal digital assistant,PDA)、投影仪等等,本申请实施例对装置100的具体类型不作任何限制。
装置100可以包括处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,充电管理模块140,电源管理模块141,电池142,天线1,天线2,移动通信模块150,无线通信模块160,音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,传感器模块180,按键190,马达191,指示器192,摄像头193,显示屏194,以及用户标识模块(subscriber identification module,SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A,陀螺仪传感器180B,气压传感器180C,磁传感器180D,加速度传感器180E,距离传感器180F,接近光传感器180G,指纹传感器180H,温度传感器180J,触摸传感器180K,环境光传感器180L,骨传导传感器180M等。
需要说明的是,图1所示的结构并不构成对装置100的具体限定。在本申请另一些实施例中,装置100可以包括比图1所示的部件更多或更少的部件,或者,装置100可以包括图1所示的部件中某些部件的组合,或者,装置100可以包括图1所示的部件中某些部件的子部件。图1示的部件可以以硬件、软件、或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元。例如,处理器110可以包括以下处理单元中的至少一个:应用处理器(application processor,AP)、调制解调处理器、图形处理器(graphics processing unit,GPU)、图像信号处理器(image signal processor,ISP)、控制器、视频编解码器、数字信号处理器(digital signal processor,DSP)、基带处理器、神经网络处理器(neural-network processing unit,NPU)。其中,不同的处理单元可以是独立的器件,也可以是集成的器件。
在一些可能的实施例中,处理器110用于检测到长按第一元素后的拖拽操作;响应于所述拖拽操作,调用显示屏194显示第一动画效果,所述第一动画效果是从第一屏幕坐标位置移动到第二屏幕坐标位置的拖拽动画效果,所述第一屏幕坐标位置是所述第一动画效果的首个图像帧的屏幕坐标位置,所述第一屏幕坐标位置是基于所述第一元素的尺寸、所述第一元素的屏幕坐标位置、所述首个图像帧的尺寸以及预设的触点位置确定的,所述第二屏幕坐标位置是所述拖拽操作停留时对应的屏幕坐标位置;所述第一动画效果是根据以下中的一项或多项生成的:所述第一屏幕坐标位置、所述第二屏幕坐标位置、目标缩放参数以及动画曲线参数。
控制器可以根据指令操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。
处理器110中还可以设置存储器,用于存储指令和数据。在一些实施例中,处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据,可从所述存储器中直接调用。避免了重复存取,减少了处理器110的等待时间,因而提高了***的效率。
在一些实施例中,处理器110可以包括一个或多个接口。
图1所示的各模块间的连接关系只是示意性说明,并不构成对装置100的各模块间的连接关系的限定。可选地,装置100的各模块也可以采用上述实施例中多种连接方式的组合。
装置100可以通过GPU、显示屏194以及应用处理器实现显示功能。GPU为图像处理的微处理器,连接显示屏194和应用处理器。GPU用于执行数学和几何计算,用于图形渲染。处理器110可包括一个或多个GPU,其执行程序指令以生成或改变显示信息。
显示屏194可以用于显示图像或视频。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display,LCD)、有机发光二极管(organic light-emitting diode,OLED)、有源矩阵有机发光二极体(active-matrix organic light-emitting diode,AMOLED)、柔性发光二极管(flex light-emitting diode,FLED)、迷你发光二极管(mini light-emitting diode,Mini LED)、微型发光二极管(micro light-emitting diode,Micro LED)、微型OLED (Micro OLED)或量子点发光二极管(quantum dotlight emitting diodes,QLED)。在一些实施例中,装置100可以包括1个或N个显示屏194,N为大于1的正整数。
在一些实施例中,显示屏194可以用于显示天气应用程序的动画效果,比如闪电动画效果。
压力传感器180A用于感受压力信号,可以将压力信号转换成电信号。在一些实施例中,压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多,例如可以是电阻式压力传感器、电感式压力传感器或电容式压力传感器。电容式压力传感器可以是包括至少两个具有导电材料的平行板,当力作用于压力传感器180A,电极之间的电容改变,装置100根据电容的变化确定压力的强度。当触摸操作作用于显示屏194时,装置100根据压力传感器180A检测所述触摸操作。装置100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中,作用于相同触摸位置,但不同触摸操作强度的触摸操作,可以对应不同的操作指令。例如:当触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时,执行查看短消息的指令;当触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时,执行新建短消息的指令。
触摸传感器180K,也称为触控器件。触摸传感器180K可以设置于显示屏194,由触摸传感器180K与显示屏194组成触摸屏,触摸屏也称为触控屏。触摸传感器180K用于检测作用于其上或其附近的触摸操作。触摸传感器180K可以将检测到的触摸操作传递给应用处理器,以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器180K也可以设置于装置100的表面,并且与显示屏194设置于不同的位置。
按键190包括开机键和音量键。按键190可以是机械按键,也可以是触摸式按键。装置备100可以接收按键190输入的信号,并实现与按键190输入的信号相关的功能。
马达191可以产生振动。马达191可以用于来电提示,也可以用于触摸反馈。马达191可以对作用于不同应用程序的触摸操作产生不同的振动反馈效果。对于作用于显示屏194的不同区域的触摸操作,马达191也可产生不同的振动反馈效果。不同的应用场景(例如,时间提醒、接收信息、闹钟和游戏)可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。
上文详细描述了装置100的硬件***,下面介绍装置100的软件***。软件***可以采用分层架构、事件驱动架构、微核架构、微服务架构或云架构,本申请实施例以分层架构为例,示例性地描述装置100的软件***。
如图2所示,采用分层架构的软件***分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,软件***从上至下分别为应用程序层、应用程序框架层、***运行层和内核层(linux kernel)。
应用程序层可以包括多个应用程序。如图2所示,应用程序层可以包括第一应用,第二应用等应用程序。
第一应用与第二应用是不同的应用程序。本申请实施例对第一应用与第二应用的类型不作具体限定。二者可以均为第三方应用,或者,均为***应用,或者一个为***应用,一个为第三方应用。比如,第一应用是图库应用,第二应用是笔记应用。又比如,第一应用是文件类应用,第二应用是邮箱应用。
可以理解,应用程序层中包括的应用程序可以是第三方应用程序,也可以是***应用程序。还可以理解,应用程序层中还可以包括其他应用程序,比如,应用程序层还可以包括设置、相机、日历、音乐、图库、通话、地图、导航、WLAN、蓝牙、视频、短信息(图2中未示出)。
应用程序框架层为应用程序层的应用程序提供应用程序编程接口(applicationprogramming interface,API)和编程框架。应用程序框架层可以包括一些预定义的函数。
如图2所示,应用程序框架层包括视图(View)框架。视图框架包括:视图(View)、拖拽阴影创建(DragShadowBuilder)、表面控制器(SurfaceControl)、扩展视图类、Session以及ViewRootlmpl。
View是构成界面的基本元素。View可以包含丰富的控件,可响应用户的操作事件。当***与用户交互时,***会将事件传递至View模块,然后View模块做出相应的响应操作。换种表述,View是用户接口组件的基本构建块,负责图像界面渲染以及事件处理。用户可以通过View模块操作界面。
DragShadowBuilder用于实现阴影的创建,或者说,用于创建拖拽View时的阴影,即跟随手指移动的视图。比如,原生架构中默认生成一个与原始View相同的、带有透明度的阴影。
SurfaceControl用于实现Surface的创建。Session用于管理窗口会话。
ViewRootlmpl是一个视图层次结构的顶部,可以理解为一个window中的所有View的根View的管理者。ViewRootlmpl用于实现View和WMS之间的联系,用来控制窗口的渲染。
扩展视图类是本申请实施例新增的类,或者说,原生架构中不包括该扩展视图类。扩展视图类用于实现本申请实施例的浮起阴影帧的绘制。在一些实施例中,扩展视图类用于确定浮起阴影帧在屏幕坐标的位置。在一些实施例中,扩展视图类还用于根据手机屏幕的宽高、浮起阴影帧的尺寸或原始View的尺寸,确定拖拽动画效果中的图像帧的缩放尺寸。
可以理解的是,图2中示出的视图(View)框架中包括的类为示例性描述,本申请实施例并不限于此。在具体实现时,视图(View)框架中还可以包括其他在绘制图像帧时调用的类或模块。
示例性地,如图2所示,应用程序框架层还包括窗口管理服务(window managerservice,WMS)。WMS可以用于窗口管理、窗口动画管理、surface管理以及作为输入***的中转站。WMS可以创建和管理窗口。WMS是窗口管理器提供的服务。窗口管理器还可以获取显示屏大小,判断是否有状态栏、锁定屏幕和截取屏幕。
WMS也可以称作窗口管理器、窗口管理模块或窗口服务模块等等。如图2所示,WMS包括拖放控制器(DragDropController)、拖拽状态类(DragState)、SurfaceControl.Transaction类以及扩展拖拽功能类。
DragDropController用于控制执行拖拽事件对应的方法或步骤。
DragState用于保存拖拽过程中的信息,包括但不限于拖拽事件、是否被拖拽的状态等等。
SurfaceControl.Transaction类用于将本申请实施例的动画效果(比如,拖拽动画效果,释放动画效果)的相关参数应用到创建的图层中。
在本申请实施例中,应用程序层中的视图扩展类和应用程序框架层中的拖拽功能扩展类为本申请实施例的扩展类,用于实现本申请实施例提出的动画效果的显示方法,二者并非是安卓***架构中的原生类。换句话说,为了实现本申请实施例的动画效果的显示方法,可以调用视图扩展类和拖拽功能扩展类,并结合安卓架构中的原生类来实现对应的动画效果。
可以理解的是,图2中示出的WMS中包括的类为示例性描述,本申请实施例并不限于此。在具体实现时,WMS中还可以包括其他在绘制图像帧时调用的类或模块。
关于视图框架中包括的各个类以及WMS中包括的各个类的具体功能或作用,后文将结合图9或图10中的时序图进行详细描述。
可以理解,应用程序框架层还可以包括视图***(View System)。视图***是安卓应用程序的用户界面***。视图***用于负责显示应用程序的用户界面。开发者可以使用视图***来创建各种各样的用户界面,例如按钮、文本框、下拉框等。
可选地,应用程序框架层还可以包括着色器(Shader)。Shader是绘图过程中的着色器。比如,Shader中包括位图渲染器(BitmapShader)。
可选地,应用程序框架层中还可以包括(图中未示出)安卓图形着色语言(androidgraphics shading language,AGSL)库(Library),针对嵌入式***的开放式图形库框架(open graphics library for embedded systems framework ,OpenGL ES framework),活动管理器,窗口动画(Window Animation)模块,资源模块,包管理器服务(packagemanager service,PMS),输入管理器。
OpenGL ES是针对嵌入式***的应用程序编程接口(API)。在安卓***架构中,开发人员能够使用OpenGL ES创建和操作二维图形和三维图形。针对嵌入式***的开放式图形库框架可以包括多个用于创建和操作图形的基础类。
活动管理器可以提供活动管理服务(activity manager service,AMS),AMS可以用于***组件(例如活动、服务、内容提供者、广播接收器)的启动、切换、调度以及应用进程的管理和调度工作。
窗口动画模块用于在窗口创建完成后,为窗口的展示、消失、隐藏等添加对应的动画,并在屏幕上展示整个动画过程。
资源模块用于加载动画资源,比如,加载动画资源对应的图像帧。
输入管理器可以提供输入管理服务(input manager service,IMS)。IMS可以用于管理***的输入,例如触屏输入、按键输入、传感器输入等。IMS从输入设备节点取出事件,通过和WMS的交互,将事件分配至合适的窗口。
可选地,应用程序框架层还包括内容提供器、视图***、电话管理器、资源管理器和通知管理器等。
内容提供器用来存放和获取数据,并使这些数据可以被应用程序访问。所述数据可以包括视频、图像、音频、拨打和接听的电话、浏览历史和书签、以及电话簿。
视图***包括可视控件,例如显示文字的控件和显示图片的控件。视图***可用于构建应用程序。显示界面可以由一个或多个视图组成,例如,包括短信通知图标的显示界面,可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供装置100的通信功能,例如通话状态(接通或挂断)的管理。
资源管理器为应用程序提供各种资源,比如本地化字符串、图标、图片、布局文件和视频文件。
通知管理器使应用程序可以在状态栏中显示通知信息,可以用于传达告知类型的消息,可以短暂停留后自动消失,无需用户交互。比如通知管理器被用于下载完成告知和消息提醒。通知管理器还可以管理以图表或者滚动条文本形式出现在***顶部状态栏的通知,例如后台运行的应用程序的通知。通知管理器还可以管理以对话窗口形式出现在屏幕上的通知,例如在状态栏提示文本信息、发出提示音、电子设备振动以及指示灯闪烁。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理、堆栈管理、线程管理、安全和异常的管理、以及垃圾回收等功能。
***运行库层可以包括三维图形处理库(例如:针对嵌入式***的开放图形库(open graphics library for embedded systems,OpenGL ES),2D图形引擎(例如:skia图形库(skia graphics library,SGL))、显示合成***(surface flinger)模块、媒体库(Media Libraries)、浏览器内核(Webkit)、安卓运行时(Android Runtime)和核心库等。
三维图形处理库可以用于实现三维图形绘图、图像渲染、合成和图层处理。
二维图形引擎是2D绘图的绘图引擎。Surface flinger也可称作图层混合模块。Surface flinger模块用于图层的混合,并将混合后的图层进行送显,使得窗口中的内容展示在显示屏上。动画效果在Surface flinger模块中都会对应一个图层(layer)实例。
媒体库支持多种音频格式的回放和录制、多种视频格式回放和录制以及静态图像文件。媒体库可以支持多种音视频编码格式,例如: MPEG4、H.264、动态图像专家组音频层面3(moving picture experts group audio layerIII,MP3)、高级音频编码(advancedaudio coding,AAC)、自适应多码率(adaptive multi-rate,AMR)、联合图像专家组(jointphotographic experts group,JPG)和便携式网络图形(portable network graphics,PNG)。浏览器内核用于调用***浏览器。
安卓运行时(Android Runtime)包括核心库和虚拟机。Android Runtime负责安卓***的调度和管理。
核心库包含两部分:一部分是java语言需要调用的功能函数,另一部分是安卓的核心库。
内核层(或者说驱动层)是软件栈的最底层。驱动层用于对硬件设备进行管理和控制。驱动层可以包括图形处理器驱动(GPU driver)、摄像头驱动、显示驱动、Binder驱动、音频驱动(图2中未示出)和传感器驱动等驱动模块。
图2中所示的软件架构中,应用程序层和***服务层可以跨进程通信。通信方式可采用进程间通信机制(Binder),也可依赖Binder驱动实现通信。
应理解,图2所示的分层结构并不构成对装置100的软件***的具体限定。在本申请另一些实施例中,装置100的软件***可以包括比图2所示的分层架构更多或更少的架构,或者,装置100的软件***的每层架构中可以包括比图2所示的组成结构更多或更少的结构,本申请实施例并不限于此。
示例性地,基于图2中示出的软件架构,电子设备在显示某一应用(比如第一应用)的界面时,响应于检测到长按第一元素后的拖拽操作,可在屏幕上显示第一动画效果,第一动画效果是从首帧的屏幕坐标位置到拖拽操作停留时对应的屏幕坐标位置的动画效果。进一步地,电子设备响应于用户释放第一元素的操作,显示释放动画效果。
为了便于理解,以下以电子设备是折叠屏手机为例,结合附图对本申请实施例提供的动画效果的显示方法进行详细介绍。
应理解,被执行长按操作或拖拽操作的第一元素可以是任一类型的元素。以下以第一应用是图库应用,第二应用是笔记应用,第一元素是第一应用中的图片缩略图为例介绍拖拽过程中产生的动画效果的界面示例。
在本申请实施例中,拖拽动画效果包括两个阶段的动画效果,分别为:响应于长按操作后生成的过渡动画效果;响应于长按以后的拖拽操作的跟手动画效果。其中,响应于长按操作后生成的过渡动画效果是指:从首个浮起阴影帧的屏幕坐标位置(或者说是第一屏幕坐标位置)移动到长按操作对应的触点位置(或者说是第三屏幕坐标位置)的动画效果。响应于拖拽操作后的跟手动画效果是指:从长按操作对应的触点位置到拖拽操作停留的坐标位置的动画效果,该动画效果包括位移动画以及缩放动画效果。以下结合图3A中(1)至图3C中(3)示出的界面进行详细描述。
图3A中(1)示出了折叠屏手机(以下简称为手机)同时打开了图库应用和笔记应用的界面(对应第一界面)。如图3A中(1)所示,界面中包括第一显示区域11和第二显示区域12。应理解,图3A中(1)示出的是第一界面的一个示例,本申请实施例并不限于此。
其中,第一显示区域11是图库应用对应的界面。比如,第一显示区域11中当前显示的是图库应用的照片页面。照片页面中包括多个照片的缩略图,比如,缩略图101。可以理解,第一显示区域11中还显示了图库应用的其他界面元素,比如,搜索栏相册选项、时刻选项以及创作选项等等。还可以理解,缩略图101是第一元素的一个示例,本申请实施例并不限于此。
第二显示区域12是笔记应用对应的界面,比如,第二显示区域12当前显示的是用户创建的一个笔记事项的输入页面。可以理解,第二显示区域12中还显示了笔记应用在编辑状态下的其他界面元素,比如,返回控件、撤销输入控件、恢复撤销内容的控件、保存控件、标题、创建笔记的时间、分类选项、样式选项、待办选项、添加选项以及录音选项等等。
在图3A中(1)所示的界面中,手机响应于用户在触点a(或者说第一位置)作用在缩略图101的长按操作,会生成一个从原始位置到用户触点位置的起拖动画效果。
比如,手机在图3A中示出的触点a(即图中示出的虚线圆圈)检测到用户作用在照片的缩略图101的长按操作后,显示图3A中(2)所示的界面。在图3A中(2)示出的界面中,第一显示区域11包括浮起阴影帧1011。
浮起阴影帧1011显示在缩略图101(即原始View)上面,浮起阴影帧1011可以称作针对缩略图101的浮起阴影帧。浮起阴影帧1011是起拖动画效果的首个图像帧(可简称为首帧)。浮起阴影帧1011亦可称作第一图像帧,或者浮起图像帧。
可选地,浮起阴影帧1011的尺寸可以是预设的或者说给定的。在一些实施例中,对于第一元素是照片缩略图的情况,浮起阴影帧1011的尺寸可与缩略图101的尺寸相同。
本申请实施例对于浮起阴影帧1011的绘制过程不作具体限定。在一些实施例中,浮起阴影帧1011的绘制过程包括:通过提取原始View(即缩略图101)的像素点,利用提取到的像素点进行填充,同时在图像帧的边缘增加一些阴影效果(比如,边缘模糊、扩散等)效果,实现视觉上的阴影效果。增加阴影效果的具体方式包括:在绘制图像帧的过程中通过调用生成阴影图层的函数,增加单层或多层阴影效果。关于绘制浮起阴影帧的相关描述后续也会结合图9中的流程进行描述。
需要说明的是,在本申请实施例中,浮起阴影帧1011在屏幕上的坐标位置是通过缩略图101在屏幕中的坐标位置、缩略图101的尺寸、浮起阴影帧1011的尺寸以及预设的触点位置计算获得的,与用户执行长按操作的触点位置(即触点a)无关,后续将会结合图7详细介绍浮起阴影帧1011的屏幕坐标位置的确定方式。
本申请实施例对用户作用在缩略图101的长按操作的具体方式不作限定。比如,用户通过手指在手机屏幕的触点a处执行长按操作。又比如,用户通过触控笔在手机屏幕的触点a处执行长按操作。又比如,用户通过鼠标在手机屏幕的触点a处执行长按操作。
在本申请实施例中,在用户在触点a执行长按操作且在执行拖拽操作之前,会生成从浮起阴影帧1011过渡到触点a的位移动画效果。以下结合图3B进行描述。
如图3B中(1)所示,第一显示区域11中包括第二图像帧1012。第二图像帧1012是从浮起阴影帧1011过渡到触点a的拖拽动画效果中的一个图像帧。可选地,第二图像帧1012的尺寸与浮起阴影帧1011的尺寸可以相同。
进一步地,如图3B中(2)所示,第一显示区域11中包括第三图像帧1013。第三图像帧1013是从浮起阴影帧1011过渡到触点a的拖拽动画效果中的一个图像帧。可选地,第三图像帧1013的尺寸与浮起阴影帧1011的尺寸可以相同。
可选地,在用户长按缩略图101或者执行进一步拖拽操作时,缩略图101可以被置灰显示,以凸显第一动画效果对应的图像帧(比如,第二图像帧1012,第三图像帧1013)。需要说明的是,在第一元素被用户长按或进行拖拽的过程中,第一元素本身是否置灰显示可取决于应用的实现,可以被置灰显示,也可以不置灰显示,本申请实施例对此不作具体限定。
从图3A中(1)至图3B中(2)所示的界面可以看到,用户的手指触点位置一直是触点a。也就是说,在触点a处执行长按操作且未执行拖拽操作时,会生成过渡动画效果,以便使得用户从视觉上感受到被拖拽的照片缩略图101移动到触点a的过程。过渡动画效果可以认为是拖拽动画效果中的第一阶段的动画效果,或者说是,将已经进行长按操作但未执行拖拽操作之前生成的过渡动画效果,看作是拖拽动画效果的第一阶段的动画效果。
可以理解,用户在触点a处对缩略图101执行长按操作后,通常会继续长按住缩略图101执行拖拽操作,以期将缩略图101拖拽到目标位置。还可以理解,拖拽操作可以发生在图库应用中,可以发生在跨应用的场景。在开始执行拖拽操作后,可实时生成拖拽动画效果的第二阶段的动画效果。
上述图3B中示出的界面可以理解为响应于长按操作后生成的过渡动画效果(或者说起拖动画效果)。
图3C中示出的是用户执行拖拽操作的界面。手机响应于用户对缩略图101从触点a移动到触点b的拖拽操作,显示如图3C中(1)所示的界面。如图3C中(1)所示,界面中的第一显示区域11中包括第四图像帧1014。第四图像帧1014是用户将缩略图101拖动至触点b时手机在界面显示的图像帧。第四图像帧1014为跟手动画效果中的一个图像帧。
在开始执行拖拽操作时,基于浮起阴影帧生成跟手拖拽动画效果,跟手拖拽动画效果不仅包括基于拖拽轨迹生成的位移动画效果,同时还包括缩放动画效果。可选地,可基于被拖拽对象的不同类型,采用不同的缩放规则。在一些实施例中,对于被拖拽对象是照片缩略图的情况,可按照基于照片缩略图放大1.1倍的缩放规则执行缩放。
示例性地,第四图像帧1014的尺寸为缩略图101的尺寸的1.1倍。具体地,第四图像帧1014的宽为缩略图101的宽的1.1倍;第四图像帧1014的高为缩略图101的高的1.1倍。
在一些实施例中,浮起阴影帧1011与照片缩略图101的尺寸相同。相应地,第四图像帧1014的尺寸可以为浮起阴影帧1011的尺寸的1.1倍。具体地,第四图像帧1014的宽为浮起阴影帧1011的宽的1.1倍;第四图像帧1014的高为浮起阴影帧1011的高的1.1倍。
进一步地,手机响应于用户对缩略图101从触点b移动到触点c的拖拽操作,显示如图3C中(2)所示的界面。如图3C中(2)所示,界面中的第一显示区域11中包括第五图像帧1015。第五图像帧1015是用户将缩略图101拖动至触点c时手机在界面显示的图像帧。
可以看到,图3C中(1)和图3C中(2)示出的均是在第一显示区域11内执行的拖拽操作。当然,拖拽操作可以发生在不同应用之间,即用户可跨应用执行拖拽操作。
手机响应于用户对缩略图101从触点c移动到触点d的拖拽操作,界面显示如图3C中(3)所示的界面。如图3C中(3)所示,界面中的第二显示区域12中包括第六图像帧1016。第六图像帧1016是用户将缩略图101拖动至触点d时手机在界面显示的图像帧。图3C中(3)示出的触点d位于第二应用的界面。
上述图3C中示出的界面可以理解为响应于拖拽操作后生成的跟手拖拽动画效果。
在一些实施例中,拖拽动画效果包括:先在缩略图101上生成第一图像帧1011(即浮起阴影帧),随后生成从浮起阴影帧1011的位置到触点a的动画效果;进一步地,随着拖拽轨迹的变化,生成先后经过触点a、触点b、触点c以及触点d的位移动画,使得动画的过渡效果更为流畅。并且,在生成位移动画的过程中,同时叠加了从浮起阴影帧1011放大到目标大小(比如1.1倍)的缩放动画。
综上图3A中(1)至图3C中(3)所示的界面,手机响应于用户作用在缩略图101的拖拽操作,在缩略图101上方浮起阴影帧(即前述浮起阴影帧1011),并基于浮起阴影帧1011生成拖拽动画效果。拖拽动画效果至少包括前述浮起阴影帧1011、第二图像帧1012、第三图像帧1013、第四图像帧1014、第五图像帧1015以及第六图像帧1016。
应理解,图3A中(1)至图3C中(3)所示的界面中,示出的是拖拽动画效果的部分图像帧,本申请实施例并不限于此。
还应理解,图3A中(1)至图3C中(3)所示的界面中,示出的拖拽轨迹也仅是示例性描述,本申请实施例并不限于此。
在到达目标拖拽位置后,用户可针对缩略图101执行释放操作。以下结合图4至图6描述释放缩略图101时的界面。
在一些实施例中,当用户释放第一元素的操作发生在第二应用的界面,或者说,用户将第一元素从第一应用移动到第二应用后在目标位置进行释放操作,此时可能存在第一元素被第二应用接收的情况,也可能存在第一元素不被第二应用接收的情况。以下结合图4和图5分别进行详细描述。
手机响应于用户在触点e(对应第一位置)释放缩略图101的操作,显示如图4中(1)所示的界面。如图4中(1)所示,触点e位于第二显示区域12,第二显示区域12中包括第七图像帧1017。在用户在触点e执行释放操作后,如果缩略图101被第二应用接收,手机会生成图像帧逐渐缩小直至消失的动画效果(或称作第一释放动画效果),以便使得用户能够直观看到缩略图101被第二应用接收的情形。相比于用户抬手释放后没有动画效果的情形,本申请实施例提供的第二释放动画效果更为生动。比如,图4中(2)示出了用户执行释放操作后显示的另一界面,第二显示区域12中包括第八图像帧1018。可以看到,第八图像帧1018的尺寸小于第七图像帧1017。
应理解,第七图像帧1017与第八图像帧1018示出的仅是第一释放动画效果中的部分图像帧,本申请实施例并不限于此。
当第一释放动画效果播放完后,手机界面显示如图4中(3)所示的界面。如图4中(3)所示,第二显示区域12包括缩略图101。这说明缩略图101已被笔记应用接收,呈现在笔记应用当前的编辑界面中。
可选地,第一释放动画效果基于以下一项或多项因素生成:动画曲线参数、缩放参数等等。本申请实施例对生成第一释放动画效果的具体过程不作限定。
图5示出的是用户跨应用拖拽缩略图101的另一界面示例图。手机响应于用户将缩略图101从图库应用(对应第一显示区域11)拖拽到笔记应用首页(对应第三显示区域13)的触点f(对应第二位置)处的操作,界面显示如图5中(1)所示。如图5中(1)所示,触点f位于第三显示区域13,第三显示区域13包括第九图像帧1021。
应理解,图5中(1)示出的拖拽轨迹(虚线部分)仅是示例描述,本申请实施例并不限于此。
进一步地,手机响应于用户在触点f释放第九图像帧1021的操作,显示如图5中(2)所示的界面。在用户在触点f执行释放操作后,如果缩略图101未被第二应用接收,手机会生成图像帧逐渐放大直至消失的动画效果(或称作第二释放动画效果),以便使得用户能够直观看到缩略图101没有被第二应用接收的过程。相比于用户抬手释放后没有动画效果的情形,本申请实施例提供的第二释放动画效果更为生动。比如,图5中(2)示出了用户执行释放操作后显示的另一界面,第三显示区域13中包括第十图像帧1022。可以看到,第十图像帧1022的尺寸大于第九图像帧1021。
应理解,第九图像帧1021与第十图像帧1022示出的仅是第二释放动画效果中的部分图像帧,本申请实施例并不限于此。
可选地,第二释放动画效果基于以下一项或多项因素生成:动画曲线参数、缩放参数等等。本申请实施例对生成第二释放动画效果的具体过程不作限定。
当第二释放动画效果播放完后,手机界面显示如图5中(3)所示的界面。如图5中(3)所示,第三显示区域13不包括缩略图101,即缩略图101没有被笔记应用接收。
在一些实施例中,手机响应于用户在第一应用中释放第一元素的操作,显示第三释放动画效果,所述第三释放动画效果是:从释放第一元素时最新的触点位置(或者说执行释放操作对应的触点位置)返回到第一元素的原始屏幕坐标位置的动画效果。
本申请实施例对第三释放动画效果的生成方式不作具体限定。
可选地,第三释放动画效果按照以下方式生成:计算第一元素的原始坐标位置与抬手坐标位置的差值,并将该差值逐渐减小直至为0。
或者,可选地,第三释放动画效果是拖拽动画效果的逆动画效果。
图6示出的是用户在同一应用释放缩略图101的界面示例图。手机响应于用户将缩略图101从原始坐标位置拖拽到触点g(对应第三位置)处的操作,显示图6中(1)所示的界面。如图6中(1)所示,触点g位于第一显示区域11,第一显示区域11包括第十一图像帧111。
应理解,图6中(1)示出的拖拽轨迹(虚线部分)仅是示例描述,本申请实施例并不限于此。
进一步地,手机响应于用户在触点g释放第十一图像帧111的操作,显示如图6中(1)所示的界面。如果用户在图库应用中执行释放操作,手机会生成图像帧返回到缩略图101的原始屏幕位置的动画效果(或称作第三释放动画效果),以便使得用户能够直观看到缩略图101回到原始屏幕位置的过程。
比如,图6中(2)示出了用户执行释放操作后显示的另一界面,第一显示区域11中包括第十二图像帧112。可以看到,第十二图像帧112的尺寸与第十一图像帧111相同,但是屏幕坐标位置不同。
又比如,图6中(3)示出了用户执行释放操作后显示的另一界面,第一显示区域11中包括第十三图像帧113。可以看到,第十三图像帧113已经回到缩略图101的原始屏幕位置。进一步地,第十三图像帧113回到缩略图101的原始屏幕位置后会自动消失,即不在第一显示区域11中显示,而是在第一显示区域11中再次显示缩略图101,至此,第三释放动画效果播放结束。也就是说,对于在图库应用内的释放操作,手机生成的释放动画效果是从释放缩略图的触点位置返回到缩略图原始屏幕位置的动画效果。可选地,第三释放动画效果可以理解为将缩略图101从原始屏幕位置拖拽到触点g位置时的拖拽动画效果的逆动画效果,即将缩略图101从原始屏幕位置拖拽到触点g位置时的拖拽动画效果对应的多个图像帧进行逆向播放,即可得到第三释放动画效果。
可以理解,为了便于描述,上述图3A至图6中示出的应用场景仅是以折叠屏手机为示例性描述,本申请实施例并不限于此。事实上,其他类型的电子设备(比如,直板手机、平板)也是适用的。比如,直板手机的屏幕分屏为上下两个区域的界面,上下两个区域分别可对应第一应用的界面和第二应用的界面。
还可以理解,前述仅是以第一元素是照片缩略图为例进行描述,事实上,对于其他类型的元素也是适用的。
还可以理解,前述是以第一应用为图库应用,第二应用为笔记应用为例进行描述,事实上,对于其他类型的应用也是适用的。比如,第一应用为文件应用,第二应用为邮箱应用。
如前文所述,在本申请实施例中,手机响应于用户长按第一元素的操作,会在第一元素上方显示(或者说浮起)一个图像帧,该图像帧可以称作浮起阴影帧(或者称作浮起图像帧)。
在一些实施例中,浮起阴影帧的屏幕坐标位置根据以下一项或多项因素确定:原始图像帧的尺寸、原始图像帧的屏幕坐标位置、浮起阴影帧的尺寸以及预设的触点位置确定。
以下结合图7描述确定浮起阴影帧在屏幕上的坐标位置(或者说第一屏幕坐标位置)的方式。如图7所示,W1表示原始view的宽,H1表示原始view的高,(originViewX,originViewY)表示原始view在屏幕上的坐标位置。W2表示浮起阴影帧的宽,H2表示浮起阴影帧的高,(viewPositionX,viewPositionY)表示浮起阴影帧在屏幕上的坐标位置。thumbCenterX与thumbCenterY表示预设触点位置。其中,thumbCenterY表示预设触点与浮起阴影帧的上侧边长之间的距离,thumbCenterX表示预设触点与浮起阴影帧的左侧边长之间的距离。
在一些实施例中,如果不考虑预设的触点位置,提供给框架接口浮起阴影帧的屏幕坐标位置为浮起阴影帧的左上角对应的坐标位置,这样使得在绘制浮起阴影帧时从画面的左上角开始绘起。相应地,(viewPositionX,viewPositionY)的计算方式分别如下:
;
。
可选地,提供给框架接口浮起阴影帧的屏幕坐标位置为中心位置,这样使得在绘制浮起阴影帧时从画面的中心开始绘起。此时需要考虑预设触点位置。相应地,(viewPositionX,viewPositionY)的计算方式分别如下:
;
。
比如,原始view是前文图3A中(1)所示的缩略图101。浮起阴影帧可以是前文图3A中(2)所示的浮起阴影帧1011。浮起阴影帧在屏幕上的坐标位置可通过前述公式计算。
需要说明的是,在基于浮起阴影帧生成拖拽动画效果的过程中,可基于第一元素的样式或类型采用相应的缩放规则执行相应的缩放,以便将第一元素或者浮起阴影帧缩放至目标尺寸。
在一些实施例中,如果第一元素是照片缩略图,那么在生成拖拽动画效果的过程中可以将照片缩略图放大为照片缩略图的1.1倍。比如,前文图3C中(1)所示的第四图像帧1014的尺寸为缩略图101的尺寸的1.1倍。
在一些实施例中,如果第一元素是图片大图(或者说尺寸大于照片缩略图的图片),那么可以基于图片的宽和高按照预设的缩放规则进行缩放。比如,按照预设的缩放规则对浮起阴影帧进行缩放。
在一些实施例中,如果第一元素是不规则图片,那么可以基于不规则图片对应的宽和高按照预设的缩放规则进行缩放。比如,按照预设的缩放规则对浮起阴影帧进行缩放。
在一些实施例中,如果第一元素是文本类元素,那么基于文本类元素的边框对应的宽和高按照预设的缩放规则进行缩放。比如,按照预设的缩放规则对浮起阴影帧进行缩放。
可选地,基于第一元素的宽和第一元素的高对第一元素进行缩放,按照预设的缩放规则进行缩放。以下结合图8中的判断逻辑进行说明。如图8所示,判断逻辑包括:
步骤1,在开始拖拽后,判断第一元素的高是否大于或等于高度阈值(或者说第一阈值)。
高度阈值可以基于实际需求进行设定,本申请实施例对此不作限定。可选地,高度阈值是电子设备的屏幕高度的25%。
如果第一元素的高大于或等于高度阈值,那么执行步骤2;如果第一元素的高小于高度阈值,那么执行步骤3。
步骤2,按照第一比值(或者说第一缩放比例)对第一元素进行等比例缩放。
比如,第一比值可以是电子设备的屏幕高度的25%,即将第一元素等比例缩放至电子设备的屏幕高度的25%。
步骤3,判断第一元素的宽是否大于或等于宽度阈值(或者说第二阈值)。
宽度阈值可以基于实际需求进行设定,本申请实施例对此不作限定。可选地,宽度阈值是电子设备的屏幕宽度的80%。
如果第一元素的宽大于或等于宽度阈值,那么执行步骤4;如果第一元素的宽小于宽度阈值,那么执行步骤5。
步骤4,按照第二比值(或者说第二缩放比例)对第一元素进行等比例缩放。
比如,第二比值可以是电子设备的屏幕宽度的80%,即将第一元素等比例缩放至电子设备的屏幕宽度的80%。
步骤5,不对第一元素进行缩放。
也就是说,对于第一元素的宽小于宽度阈值的情况,可以按照第一元素的尺寸执行拖拽,无需对第一元素的尺寸进行缩放处理。
应理解,上述图8中示出的方法逻辑流程仅是预设的缩放规则的一个示例,本申请实施例对此不作具体限定。
需要说明的是,图8中的判断对象“第一元素”可以替换为“第一元素对应的浮起阴影帧”。可选地,作为一种实现方式,在用户对第一元素执行长按操作以后,可基于生成的浮起阴影帧的尺寸进行高或宽的判断,从而决定是否进行缩放。比如,步骤1包括:在开始拖拽后,判断第一元素对应的浮起阴影帧的高是否大于或等于高度阈值;步骤2包括:按照第一比值对浮起阴影帧进行等比例缩放,其他步骤以此类推,此处不再赘述。
在一些实施例中,如果第一元素是文件列表类元素,那么基于文件列表类元素对应的预定义规则执行缩放。比如,对于用户拖拽文件列表中的多个文件进行移动的操作,多个文件可合并为一个预设大小的窗口进行显示;针对该预设大小的窗口的拖拽操作,可以理解为针对用户选中的多个文件进行拖拽。
第一动画效果是从首个浮起的阴影帧对应的屏幕坐标位置移动到手指停留的坐标位置(可能是拖拽操作停留的坐标位置,也可能是长按操作时的坐标位置)的拖拽动画效果。以下详细介绍本申请实施例的动画效果的具体生成方式。
在一些实施例中,第一动画效果是根据以下中的一项或多项生成的:所述首个图像帧的尺寸、第一屏幕坐标位置、第二屏幕坐标位置、目标缩放参数以及动画参数。
可选地,目标缩放参数是基于初始缩放比例,最终缩放比例,动画曲线参数确定的。
初始缩放比例是指初始默认的缩放值,比如,初始缩放比例默认为1倍。
最终缩放比例是指基于前述预设的缩放规则或者预定义的缩放比例确定的。对于不同类型的第一元素,最终缩放比例可以有不同的确定方式。如前文所述,对于第一元素是照片缩略图的情形,最终缩放比例可以是1.1倍;对于图片大图,最终缩放比例可参考前文介绍的缩放规则确定。为了简洁,此处不再赘述。
动画曲线参数是指生成动画效果时利用的曲线对应的参数。比如,动画曲线采用贝塞尔曲线;相应地,动画曲线参数是塞尔曲线的坐标值。
示例性地,第一动画效果动效时长为250毫秒,其对应的动画曲线采用贝塞尔曲线。贝塞尔曲线是基于4个位置任意的点(包括起始点、终止点以及两个相互分离的中间点)坐标绘制的光滑曲线。比如,贝塞尔曲线的控制点坐标分别为(x1,y1,x2,y2);x1,y1是第一个控制点的坐标,x2,y2是第二个控制点的坐标。
比如,贝塞尔曲线的坐标为(0.4f, 0.0f, 0.2f, 1.0f)。f表示浮点型数据。在生成第一动画效果的过程中,动画曲线的参数值可基于贝塞尔曲线的趋势获得。应理解,上述设置的贝塞尔曲线的参数均为可调节的参数,上述举例仅是示例说明,本领域技术人员可以基于实际需求设置合理的参数值。
示例性地,目标缩放参数按照以下代码确定:
currentScale=1.0f+(endScale-1.0f)*animation.getAnimatedFraction();
其中,currentScale表示目标缩放参数;1.0f为初始缩放比例;endScale为最终缩放比例;动画曲线参数可以是曲线插值器的值,其通过调用animation.getAnimatedFraction()获得,动画曲线可以是贝塞尔曲线。
进一步地,在利用目标缩放参数对图像帧(比如,浮起阴影帧或者第一元素对应的图像帧)进行缩放时,可基于预设触点位置对图像帧进行缩放,即将预设触点位置作为缩放点,分别对图像帧的宽和高进行缩放。可以理解,缩放点可以是图像帧的左上角的坐标点,即基于左上角的坐标点对图像帧进行缩放;也可以图像帧的中心坐标点,即基于中心点对图像帧进行缩放。前述预设触点位置也可以有不同的表述,比如,thumbCenterX可命名为sDragShadowThumbOffsetX;thumbCenterY可命名为sDragShadowThumbOffsetY,以便将这些参数赋入本申请的拖拽功能扩展类中。
前述目标缩放参数的计算结果可通过矩阵进行保存。示例性地,按照以下代码保存缩放值:
matrix.setscale(currentScale,currentScale,sDragShadowThumbOffsetX,sDragShadowThumbOffsetY);
其中,矩阵中的前两项代表对X轴和Y轴分别进行缩放,具体即:第一项是对图像帧的宽(X轴方向)按照currentScale进行缩放;第二项是对图像帧的高(Y轴方向)按照currentScale进行缩放。矩阵中的后两项代表图像帧是基于触点(sDragShadowThumbOffsetX, sDragShadowThumbOffsetY)进行缩放的。也就是说,若以中心点对图像帧进行缩放时,还可在matrix.setscale中保存sDragShadowThumbOffsetX和sDragShadowThumbOffsetY。
可以理解,在进行缩放处理后,图像帧的在屏幕的位置也会受到缩放处理的影响而发生改变。
示例性地,可通过以下代码获得因受缩放处理影响的位移偏移量:
scaleOffsetX= matrixValues[Matrix.MTRANS_X];
scaleOffsetY= matrixValues[Matrix.MTRANS_Y]。
其中,scaleOffsetX为图像帧受到缩放处理影响后在X轴方向的位移偏移量。scaleOffsetY为图像帧受到缩放处理影响后在Y轴方向的位移偏移量。
由于涉及到对图像帧的缩放处理,那么缩放处理也会影响到图像帧(即拖拽操作停留时对应的图像帧)的真实位置。可选地,第二屏幕坐标位置是基于第一屏幕坐标位置、动画曲线参数以及拖拽操作停留后的实际屏幕位置。
示例性地,第二屏幕坐标位置按照以下代码确定:
currentpositionX=startPositionX+(realEndPositionX-startPositionX)*animation.getAnimatedFraction();
currentpositionY=startPositionY+(realEndPositionY-startPositionY)*animation.getAnimatedFraction();
其中,(currentpositionX,currentpositionY)表示第二屏幕坐标位置;(startPositionX,startPositionY)表示第一屏幕坐标位置,即前文计算得到的浮起阴影帧对应的屏幕位置;(realEndPositionX,realEndPositionY)表示拖拽操作停留后的实际屏幕位置;动画曲线参数可以是曲线插值器的值,其通过调用animation.getAnimatedFraction()获得,动画曲线可以是贝塞尔曲线。关于贝塞尔曲线的相关描述可以参考前文,此处不再赘述。
可选地,通过调用sDragtransaction()函数,将计算得到的第一动画效果中每一帧图像帧的位置信息,应用到创建的图层中,以完成图像帧的绘制。sDragtransaction可以理解为SurfaceControl.Transaction。SurfaceControl.Transaction可以对SurfaceControl进行原子属性设置。
示例性地,通过以下代码调用sDragtransaction()函数:
sDragtransaction.setPosition(sDragsurfaceControl,scaleOffsetX+currentpositionX- sDragShadowThumbOffsetX,scaleOffsetY+currentpositionY-sDragShadowThumbOffsetY);
其中,sDragsurfaceControl是浮起阴影帧的SurfaceControl,可用于管理浮起阴影帧(或者说浮起阴影帧)的surface;scaleOffsetX+currentpositionX-sDragShadowThumbOffsetX中减去sDragShadowThumbOffsetX,以及,scaleOffsetY+currentpositionY- sDragShadowThumbOffsetY中减去sDragShadowThumbOffsetY,说明绘制图像帧是从图像帧的左上角开始绘制,而非中心点位置。其中,sDragShadowThumbOffsetX可对应前文计算浮起阴影帧时用到的thumbCenterX;sDragShadowThumbOffsetY可对应前文计算浮起阴影帧时用到的thumbCenterY。
可以理解,本申请实施例在生成动画效果时还可增加其他动效参数,比如,透明度参数等等,本申请实施例对此不作具体限定。
为便于理解本申请实施例的创建动画效果的具体实现过程,以下结合图9和图10中示出的时序图进行描述。
参考图9,图9示出了本申请实施例提供的一种在接收到用户的长按拖拽操作后应用程序创建拖拽动画效果的交互示例图。
应理解,图9中提供的交互过程可以应用于图1和图2中。装置100中安装有应用程序(比如,图库应用)。可选地,在图2所示的装置100的软件架构层中,图9中的应用程序、View、DragShadowBuilder类、表面控制器(SurfaceControl)、视图扩展类、Session以及ViewRootlmpl类可位于图2所示的软件***中的应用层;图9中的拖拽控制器(DragDropController)、拖拽状态(DragState)、SurfaceControl.Transaction以及拖拽功能扩展类位于如图2所示的软件***的框架层(比如WMS中)。
如图9所示,本申请实施例中天气应用程序创建动画效果的具体步骤如下:
步骤1,应用调用拖拽接口。
以图3A中(1)示出的界面为例,手机响应于用户长按缩略图101的操作,调用拖拽接口。
比如,通过以下代码实现拖拽接口的调用:
startDragAndDrop(ClipData date,1DragShadowBuilder shadowbuilder,Object myLocalState,int flags)。
应理解,上述示例仅是以用户长按缩略图101为例进行描述,本申请实施例并不限于此。
步骤2,View调用DragShadowBuilder获取阴影尺寸(或者说阴影大小)以及预设触点位置。手指相对于阴影位置。
可选地,阴影尺寸是应用提供的。此处提及的阴影尺寸可对应前文图7中的浮起阴影帧的尺寸,分别为W2和H2。
可选地,预设触点位置也可以是应用提供的。比如,预设触点位置也可以理解为中心点相对于阴影的宽和高的位置。此处提及的预设触点位置可对应前文图7中的thumbCenterX与thumbCenterY。
在一些实施例中,可通过调用onProvideShadowMetrics函数获取阴影尺寸。
比如,通以下代码获取阴影大小以及:
onProvideShadowMetrics(Point shadowSize,Point shadowTouchPoint);
其中,Point shadowSize表示阴影尺寸;Point shadowTouchPoint表示预设触点位置。
步骤3,DragShadowBuilder根据阴影尺寸创建surfaceControl。
此处创建surfaceControl可以理解为一个表面管理器,用于管理表面(surface)。
步骤4,View将阴影内容绘制到surface上。
具体地,从步骤3中获取canvas,并将阴影内容绘制到surface上。阴影内容为基于原始view提取的像素点或特征,或者可以理解为将从原始view提取的内容填充到surface上。
比如,通过调用接口onDrawShadow(canvas)获取步骤3中的canvas,实现阴影内容的绘制。
可选地,步骤4包括:根据不同的元素类型,进行不同的绘制。
在一些实施例中,对于第一元素是图片(比如,照片缩略图,照片大图)的情况,可以提取图片的像素点进行绘制。
在一些实施例中,对于第一元素是视频的情况,可以将以视频的首帧或封面的内容进行像素点提取,实现阴影内容的绘制。
在一些实施例中,对于第一元素是文本的情况,可以将文本的bitmap传入surface进行绘制。
示例性地,以第一元素是照片缩略图为例,在将图片的像素点提取出来绘制以后,再绘制多层(比如,3层)或单层阴影,得到浮起阴影帧,以实现浮起阴影帧具备模糊、扩散等阴影效果。
需要说明的是,本申请实施例提及的浮起阴影帧指的是整个图像帧,并非是仅指代图像的边缘处显示的阴影。以图7中的示例为例,浮起阴影帧是盖在原始view上的一个图像帧,并非是指图7中原始view周围的填充区域,该图像帧中填充的内容可以通过提取原始view的像素点获得。
步骤5,View计算缩放比例。
在一些实施例中,根据屏幕宽高、浮起阴影帧的尺寸或原始view的大小,计算构造拖拽动画效果时最终的缩放尺寸。关于预设的缩放规则以及基于不同的样式采用何种缩放方式已在前文描述,此处不再赘述。
示例性地,通过以下代码计算最终缩放尺寸:
calculateShadowTargetScale(int ShadowType,Point shadowSize/viewSize)。
需要说明的是,步骤5是本申请实施例新增的步骤,安卓原生方法中不具备此步骤。
步骤6,View计算浮起阴影帧在屏幕的坐标位置。
具体地,可根据原始View,计算浮起阴影帧在屏幕上的位置,比如,前文提及的(viewPositionX,viewPositionY),或者说计算前述surface在屏幕的坐标位置。
示例性地,步骤6通过以下代码计算浮起阴影帧在屏幕的坐标位置:
getDragViewPosition(DragView,ShadowView,Point shadowSize,PointshadowTouchPoint)。
需要说明的是,步骤6是本申请实施例新增的步骤,安卓原生方法中不具备此步骤。
步骤7,View将构造动画所需的相关信息传递到***服务(systeServer)进程,比如,Session。
也就是说,步骤7的目的在于将后续构造拖拽动画效果的相关参数或信息传递到***服务进程。
在一些实施例中,构造动画所需的相关信息包括以下中的一项或多项:应用窗口(window)、拖拽surfaceControl、步骤5中计算的缩放比例,步骤6中计算的浮起阴影帧在屏幕的坐标位置,以及其他与浮起阴影帧相关的信息。关于各个术语或概念的确定方式可以参考前文的描述,此处不再赘述。
示例性地,步骤7通过以下代码实现:performDragWithAnim(IWindow window,intflags,SurfaceControl surface,int touchSource,float viewPositionX,floatviewPositionY,float viewTargetScale,boolean isNeedAlpha,float touchX,floattouchY,float thumbCenterX,float thumbCenterY,ClipData data)。
需要说明的是,步骤7是本申请实施例新增的步骤,安卓原生方法中不具备此步骤。
步骤8,Session调用DragDropController执行拖拽(performDrag)。
步骤9,DragDropController构造拖拽状态(DragState)。
DragState用于保存拖拽过程中的一些信息。或者说,DragState用于拖拽中事件处理,为后续实现动画做准备。
步骤10,DragDropController注册事件接收(registerInput)。
由于拖拽过程中手指始终是移动的,因此需要注册事件接收,以便能够在手指移动时始终能获得手指相对于屏幕的位置。
步骤11,记录动画初始位置(即,浮起阴影帧在屏幕的坐标位置)。
步骤11的目的在于将步骤6中计算的浮起阴影帧在屏幕的坐标位置保存在WMS中,以便后续在生成拖拽动画效果时使用。
比如,手机响应于用户抬手释放第一元素的操作,基于浮起阴影帧在屏幕的坐标位置生成释放动画效果。
示例性地,通过以下代码记录动画初始位置:
setActTouchPoints(viewPositionX,viewPositionY)。
需要说明的是,步骤11是本申请实施例新增的步骤,安卓原生方法中不具备此步骤。
步骤12,设置首帧在屏幕的坐标位置。
此处的首帧即前述浮起阴影帧。将浮起阴影帧定义为起拖动画效果的首个图像帧。后续步骤将以首帧代替浮起阴影帧进行描述。
示例性地,通过以下代码设置首帧在屏幕的坐标位置:
setPosition(viewPositionX-thumbCenterX,viewPositionY-thumbCenterY);
关于viewPositionX和viewPositionY,以及,thumbCenterX和thumbCenterY,在前文图7处已详细描述,为了简洁,此处不再描述。
步骤13,通过SurfaceControl.Transaction显示拖拽动画效果的首帧,即浮起阴影帧。
步骤14,通过DragState开始起拖动画效果(或者说第一动画效果)。
步骤14可以理解为:开始生成从首帧逐渐过渡到手指位置的位移动画,并叠加缩放动画的起拖动画效果。
示例性地,通过以下代码开始起拖动画效果:
StartDragAnimator(viewPositionX,viewPositionY,viewTargetScale,isNeedAlpha);
其中,viewTargetScale代表目标缩放值;isNeedAlpha代表动效中的透明度参数。
步骤15,设置起拖动画效果中所需的部分参数。
比如,将起拖动画效果中所需的部分参数传入拖拽功能拖拽类。
可选地,部分参数包括但不限于:窗口信息,预设触点位置。
示例性地,通过以下代码设置动画过程中所需的部分参数:
setDragDropInfo(SurfaceControl,Transaction,ThumbOffsetX,ThumbOffsetY)。
步骤16,基于拖拽操作停留时对应的屏幕位置,缩放值以及首帧在屏幕的坐标位置,创建起拖动画效果。
示例性地,通过以下代码创建起拖动画效果:
createStartDragAnimator(viewPositionX,mCurrentX,viewPositionY,mCurrentY,scale);
其中,viewPositionX与viewPositionY为前述步骤6中计算的帧在屏幕的坐标位置;mCurrentX与mCurrentY为拖拽操作停留时对应的屏幕位置;scale为前述步骤5中计算的缩放值。
需要说明的是,引入步骤15与步骤16的目的在于与原生的框架进行解耦,或者说引入拖拽功能扩展类(或其他自定义的类)来生成起拖动画效果或者拖拽动画效果。当然,在具体实现时,也可以不引入拖拽功能扩展类,即对原生框架进行适应性修改以使其能够生成起拖动画效果(或者第一动画效果),对此不作具体限定。
应理解,图9中示出的时序交互流程仅是为了便于理解而引入,且是示例性描述,并非要将本申请实施例的动画效果的显示方法限定到图9中所示的场景。
图10示出了用户抬手释放第一元素时的流程图。应理解,图9与图10可以组合实施,也可以单独实施,对此不作具体限定。比如,在执行图9所述的方法流程后,如果检测到用户的抬手释放操作,那么可以继续执行图10中示出的方法流程。又比如,在采用其他方法流程生成起拖动画效果后,如果检测到用户的抬手释放操作,那么可以继续执行图10中示出的方法流程。如图10所示,该方法包括:
步骤17,应用将释放事件传递给ViewRootlmpl。
也就是说,应用在检测到用户抬手释放第一元素后,可通过ViewRootlmpl将释放事件传给框架层。
示例性地,可通过以下代码传递用户的抬手释放事件:
dispatchDragEvent(DragEvent event)。
步骤17中的应用与图9中的应用可以是同一应用,也可以是不同应用,对此不作具体限定。
示例性地,图9中的应用为图库应用,图10中的应用为图库应用;或者,图9中的应用为图库应用,图10中的应用为笔记应用。
在一些实施例中,对于跨应用拖拽的场景,第一应用或第二应用检测到释放操作。
步骤18,ViewRootlmpl返回布尔值。
布尔值用于表示被拖拽的第一元素是否被应用接收的结果。布尔值的取值可决定后续生成哪种释放动画效果。
比如,在将照片缩略图拖拽到笔记应用的场景中,如果笔记应用接收照片缩略图,那么传递的布尔值为1;如果笔记应用未接收照片缩略图,那么传递的布尔值为0。
示例性地,可通过以下代码处理抬手释放事件:
Handle DragEvent(DragEvent event)。
步骤19,ViewRootlmpl将第一元素是否被接收的结果传递给Session。
示例性地,ViewRootlmpl可通过以下代码传递接收结果:
reportDragResult(mwindow,result)。
步骤20,Session将第一元素是否被接收的结果传递给DragDropController。
示例性地,Session可通过以下代码传递接收结果:
reportDragResult(window,consumed)。
步骤21,DragDropController结束拖拽状态,比如,调用接口endDragLocked()。
步骤22,基于判断结果构造相应的释放动画效果。
示例性地,如果判断结果为照片缩略图被笔记应用接收,则生成先缩小后消失的动画效果,具体可参考前文图4中示出的第一释放动画效果;
如果判断结果为照片缩略图没有被笔记应用接收,则判断检测到释放事件时窗口所在的应用与图库应用是否为同一应用;
如果检测到释放事件时窗口所在的应用与图库应用,即在图库应用中释放了被拖拽的照片缩略图,则生成返回原始位置的动画效果,具体可参考前文图6中示出的第三释放动画效果;
如果是不同的应用,比如,在笔记应用中检测到释放操作,则在释放操作对应的位置生成放大后消失的动画效果,具体可参考前文图5中示出的第二释放动画效果。
可以理解,本申请实施例对步骤22生成释放动画效果的具体实现方式不作限定。示例性地,可参考图9中构造起拖动画效果的相关流程,具体比如,基于拖拽功能扩展类构造释放动画效果。
由上可知,本申请提供的动画效果的显示方法,提供了一种拖拽过程中的拖拽动画效果,该第一动画效果是从浮起阴影帧逐渐过渡到拖拽停留位置的动画效果。进一步地,电子设备响应于用户释放拖拽该第一元素的操作,生成释放动画效果,从而使得拖拽过程中的动画效果更为自然流畅,更为生动且符合用户感受,显著提升用户的视觉体验。
本申请实施例提供了一种芯片***,该芯片***包括一个或多个处理器,用于从存储器中调用并运行存储器中存储的指令,使得上述本申请实施例的方法被执行。该芯片***可以由芯片构成,也可以包含芯片和其他分立器件。
其中,该芯片***可以包括用于发送信息或数据的输入电路或者接口,以及用于接收信息或数据的输出电路或者接口。
本申请还提供了一种计算机程序产品,该计算机程序产品被处理器执行时实现本申请中任一方法实施例所述的方法。
该计算机程序产品可以存储在存储器中,经过预处理、编译、汇编和链接等处理过程最终被转换为能够被处理器执行的可执行目标文件。
本申请还提供了一种计算机可读存储介质,其上存储有计算机程序,该计算机程序被计算机执行时实现本申请中任一方法实施例所述的方法。该计算机程序可以是高级语言程序,也可以是可执行目标程序。
该计算机可读存储介质可以是易失性存储器或非易失性存储器,或者,可以同时包括易失性存储器和非易失性存储器。其中,非易失性存储器可以是只读存储器(read-only memory,ROM)、可编程只读存储器(programmable ROM,PROM)、可擦除可编程只读存储器(erasable PROM,EPROM)、电可擦除可编程只读存储器(electrically EPROM,EEPROM)或闪存。易失性存储器可以是随机存取存储器(random access memory,RAM),其用作外部高速缓存。通过示例性但不是限制性说明,许多形式的RAM可用,例如静态随机存取存储器(static RAM,SRAM)、动态随机存取存储器(dynamic RAM,DRAM)、同步动态随机存取存储器(synchronous DRAM,SDRAM)、双倍数据速率同步动态随机存取存储器(double data rateSDRAM,DDR SDRAM)、增强型同步动态随机存取存储器(enhanced SDRAM,ESDRAM)、同步连接动态随机存取存储器(synchlink DRAM,SLDRAM)和直接内存总线随机存取存储器(directrambus RAM,DR RAM)。
本领域的技术人员可以清楚地了解到,为了描述的方便和简洁,上述描述的装置和设备的具体工作过程以及产生的技术效果,可以参考前述方法实施例中对应的过程和技术效果,在此不再赘述。
在本申请所提供的几个实施例中,所揭露的***、装置和方法,可以通过其它的方式实现。例如,以上所描述的方法实施例的一些特征可以忽略,或不执行。以上所描述的装置实施例仅仅是示意性的,单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,多个单元或组件可以结合或者可以集成到另一个***。另外,各单元之间的耦合或各个组件之间的耦合可以是直接耦合,也可以是间接耦合,上述耦合包括电的、机械的或其它形式的连接。
应理解,在本申请的各种实施例中,各过程的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本申请的实施例的实施过程构成任何限定。
另外,本文中术语“***”和“网络”在本文中常被可互换使用。本文中的术语“和/或”,仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。另外,本文中字符“/”,一般表示前后关联对象是一种“或”的关系。
本申请实施例中出现的术语(或者说编号)“第一”、“第二”、…等,仅用于描述目的,即只是为了区分不同的对象,比如,不同的“坐标”等,并不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”、…等的特征可以明示或者隐含地包括一个或者更多个特征。在本申请实施例的描述中,“至少一个(项)”是指一个或多个。“多个”的含义是两个或两个以上。“以下至少一个(项)”或其类似表达,是指这些项中的任意组合,包括单个(项)或复数个(项)的任意组合。
总之,以上所述仅为本申请技术方案的较佳实施例而已,并非用于限定本申请的保护范围。凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。
Claims (12)
1.一种动画效果的显示方法,其特征在于,包括:
显示第一界面,所述第一界面包括第一元素;
检测到长按所述第一元素后的拖拽操作;
显示第一动画效果,所述第一动画效果是从第一屏幕坐标位置到第二屏幕坐标位置的拖拽动画效果,所述第一屏幕坐标位置是所述第一动画效果的浮起阴影帧的屏幕坐标位置,所述第一屏幕坐标位置是基于所述第一元素的尺寸、所述第一元素的屏幕坐标位置、所述浮起阴影帧的尺寸以及预设的触点位置确定的,所述第二屏幕坐标位置是所述拖拽操作停留时对应的屏幕坐标位置;
所述第一动画效果是根据以下中的一项或多项参数生成的:所述浮起阴影帧的尺寸、所述第一屏幕坐标位置、所述第二屏幕坐标位置、目标缩放参数以及动画曲线参数;
所述第一动画效果包括:从所述第一屏幕坐标位置到第三屏幕坐标位置的起拖动画效果,所述第三屏幕坐标位置是用户在所述第一元素进行长按时对应的触点位置,所述浮起阴影帧是所述起拖动画效果的首个图像帧;
所述浮起阴影帧是扩展视图类基于所述第一屏幕坐标位置绘制的;原生架构中不包括所述扩展视图类;
其中,所述浮起阴影帧的绘制过程包括:通过提取第一元素对应的原始视图的像素点,利用提取到的像素点进行填充,同时在图像帧的边缘增加一层或多层阴影效果;
所述第一屏幕坐标位置通过下式计算:
;
;
其中,(viewPositionX,viewPositionY)表示所述浮起阴影帧在屏幕上的坐标位置;(originViewX,originViewY)表示所述第一元素对应的原始视图在屏幕上的坐标位置,W2表示浮起阴影帧的宽,H2表示浮起阴影帧的高,W1表示所述第一元素对应的原始视图的宽,H1表示所述第一元素对应的原始视图的高;thumbCenterY表示预设触点与所述浮起阴影帧的上侧边长之间的距离,thumbCenterX表示预设触点与所述浮起阴影帧的左侧边长之间的距离。
2.根据权利要求1所述的方法,其特征在于,所述第一动画效果还包括从所述第三屏幕坐标位置到所述第二屏幕坐标位置的动画效果;
其中,从所述第三屏幕坐标位置到所述第二屏幕坐标位置的动画效果包括位移动画效果和缩放动画效果,所述缩放动画效果对应的所述目标缩放参数是基于预设的缩放规则确定的。
3.根据权利要求2所述的方法,其特征在于,在所述第一元素是图片类元素时,所述预设的缩放规则包括:根据所述第一元素的高度和宽度确定的缩放规则,或者,根据所述首个图像帧的高度和宽度确定的缩放规则。
4.根据权利要求3所述的方法,其特征在于,所述预设的缩放规则包括:
在所述第一元素的高大于或等于第一阈值时,按照第一缩放比例进行缩放,所述第一缩放比例为所述第一阈值;
在所述第一元素的高小于所述第一阈值,且所述第一元素的宽大于或等于第二阈值时,按照第二缩放比例进行缩放,所述第二缩放比例为所述第二阈值;
在所述第一元素的高小于所述第一阈值,且所述第一元素的宽小于第二阈值时,不进行缩放。
5.根据权利要求1所述的方法,其特征在于,所述第一界面包括第一显示区域和第二显示区域,所述第一元素位于所述第一显示区域,所述第一显示区域对应于第一应用,所述第二显示区域对应于第二应用,所述拖拽操作包括将所述第一元素从所述第一显示区域拖拽到所述第二显示区域的操作,所述第一应用与所述第二应用不同。
6.根据权利要求5所述的方法,其特征在于,所述方法还包括:
检测到在第一位置释放所述第一元素的操作,所述第一位置位于所述第二显示区域;
响应于所述第一元素被所述第二应用接收,显示第一释放动画效果,所述第一释放动画效果是图像帧逐渐缩小直至消失的动画效果。
7.根据权利要求5所述的方法,其特征在于,所述方法还包括:
检测到在第二位置释放所述第一元素的操作,所述第二位置位于所述第二显示区域;
响应于所述第一元素未被所述第二应用接收,显示第二释放动画效果,所述第二释放动画效果是图像帧逐渐放大直至消失的动画效果。
8.根据权利要求5所述的方法,其特征在于,所述方法还包括:
检测到在第三位置释放所述第一元素的操作,所述第三位置位于所述第一显示区域;
响应于释放所述第一元素的操作,显示第三释放动画效果,所述第三释放动画效果是从所述第三位置返回到所述第一元素的原始屏幕坐标位置的动画效果。
9.根据权利要求1所述方法,其特征在于,所述第一元素包括以下元素中的一项或多项:图片类元素、文本类元素、文件列表类元素、统一资源定位符元素、卡片类元素、图标类元素。
10.一种电子设备,其特征在于,包括处理器和存储器,所述处理器和所述存储器耦合,所述存储器用于存储计算机程序,当所述计算机程序被所述处理器执行时,使得所述电子设备执行权利要求1至9中任一项所述的方法。
11.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机程序,当所述计算机程序被处理器执行时,使得电子设备执行权利要求1至9中任一项所述的方法。
12.一种芯片***,其特征在于,所述芯片***应用于电子设备,所述芯片***包括一个或多个处理器,所述处理器用于调用计算机指令,以使得所述电子设备执行如权利要求1至9中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311196800.0A CN116974446B (zh) | 2023-09-18 | 2023-09-18 | 一种动画效果的显示方法及装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311196800.0A CN116974446B (zh) | 2023-09-18 | 2023-09-18 | 一种动画效果的显示方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN116974446A CN116974446A (zh) | 2023-10-31 |
CN116974446B true CN116974446B (zh) | 2024-06-14 |
Family
ID=88475200
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311196800.0A Active CN116974446B (zh) | 2023-09-18 | 2023-09-18 | 一种动画效果的显示方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN116974446B (zh) |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107066172A (zh) * | 2017-02-16 | 2017-08-18 | 北京小米移动软件有限公司 | 移动终端的文件传输方法及装置 |
CN114527901A (zh) * | 2020-10-31 | 2022-05-24 | 华为技术有限公司 | 一种文件拖拽方法及电子设备 |
Family Cites Families (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102929535B (zh) * | 2012-10-09 | 2018-05-01 | 中兴通讯股份有限公司 | 一种悬浮窗位置控制的方法及终端 |
CN112199124B (zh) * | 2019-06-21 | 2022-07-01 | 海信视像科技股份有限公司 | 一种项目开启方法及装置、显示设备 |
CN112083867A (zh) * | 2020-07-29 | 2020-12-15 | 华为技术有限公司 | 一种跨设备的对象拖拽方法及设备 |
CN112130788A (zh) * | 2020-08-05 | 2020-12-25 | 华为技术有限公司 | 一种内容分享方法及其装置 |
CN115268807A (zh) * | 2021-04-30 | 2022-11-01 | 华为技术有限公司 | 一种跨设备内容分享方法及电子设备 |
CN113419649A (zh) * | 2021-05-31 | 2021-09-21 | 广州三星通信技术研究有限公司 | 用于操作电子装置的方法及其装置 |
CN115729431A (zh) * | 2021-08-31 | 2023-03-03 | 华为技术有限公司 | 一种控件内容的拖拽方法、电子设备及*** |
CN118260107A (zh) * | 2022-01-27 | 2024-06-28 | 华为技术有限公司 | 一种应用间信息的共享方法及终端 |
-
2023
- 2023-09-18 CN CN202311196800.0A patent/CN116974446B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107066172A (zh) * | 2017-02-16 | 2017-08-18 | 北京小米移动软件有限公司 | 移动终端的文件传输方法及装置 |
CN114527901A (zh) * | 2020-10-31 | 2022-05-24 | 华为技术有限公司 | 一种文件拖拽方法及电子设备 |
Also Published As
Publication number | Publication date |
---|---|
CN116974446A (zh) | 2023-10-31 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9195362B2 (en) | Method of rendering a user interface | |
US8984448B2 (en) | Method of rendering a user interface | |
US9075631B2 (en) | Method of rendering a user interface | |
CN113805745B (zh) | 一种悬浮窗的控制方法及电子设备 | |
US20130097534A1 (en) | Method of rendering a user interface | |
CN111127469A (zh) | 缩略图显示方法、装置、存储介质以及终端 | |
WO2023040666A1 (zh) | 键盘显示方法、折叠屏设备和计算机可读存储介质 | |
CN114995929B (zh) | 一种弹窗的显示方法及装置 | |
WO2023001163A1 (zh) | 一种可提升动效性能的屏幕刷新方法及设备 | |
WO2022247541A1 (zh) | 一种应用程序动效衔接的方法及装置 | |
CN115643485A (zh) | 拍摄的方法和电子设备 | |
CN116974446B (zh) | 一种动画效果的显示方法及装置 | |
CN113805746B (zh) | 显示光标的方法和装置 | |
WO2023005751A1 (zh) | 渲染方法及电子设备 | |
CN113934340B (zh) | 一种终端设备和进度条显示方法 | |
WO2021253922A1 (zh) | 字体切换方法及电子设备 | |
CN116700554B (zh) | 信息的显示方法、电子设备及可读存储介质 | |
CN114866641B (zh) | 一种图标处理方法、终端设备及存储介质 | |
CN116048373B (zh) | 悬浮球控件的显示方法、电子设备以及存储介质 | |
WO2024078114A1 (zh) | 窗口显示方法、电子设备及计算机可读存储介质 | |
WO2024027504A1 (zh) | 一种应用显示方法及电子设备 | |
CN118034568A (zh) | 手写输入处理的方法及装置 | |
WO2024055822A1 (zh) | 一种信息显示方法、电子设备和存储介质 | |
WO2023231696A1 (zh) | 一种拍摄方法及相关设备 | |
WO2023066177A1 (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |