[发明专利]页面图像关闭方法、装置、电子设备和存储介质

说明书

本公开提出一种页面图像关闭方法、装置、电子设备和存储介质，涉及计算机技术领域。本公开的一种页面图像关闭方法包括：以目标页面关闭的目标位置为中心，通过CSS基于预定策略旋转和拉伸目标页面图像；在目标页面图像的第一方向上的宽度小于等于预定收缩宽度后，通过CSS以目标位置为顶点缩短目标页面图像在第二方向上的宽度，直至在第二方向上的宽度小于等于目标关闭宽度，关闭目标页面图像；其中，第一方向与第二方向垂直。通过这样的方法，能够基于CSS，通过页面的旋转、拉伸、缩短操作实现以目标位置为中心的吸入式关闭效果，实现了吸入式页面关闭效果在HTML页面上的应用，提高了吸入式页面关闭动画的普适性。

技术领域

本公开涉及计算机技术领域，特别是一种页面图像关闭方法、装置、电子设备和存储介质。

背景技术

为了提高页面的动态展示效果，提供真实化、立体化的显示感受，部分系统的电脑关闭窗口时会增加动画效果。然而由于底层系统的差异、终端运行能力的差异，部分终端难以支持部分动画效果，或对终端的执行能力造成较大的挑战。

发明内容

本公开的一个目的在于提高吸入式页面关闭动画的普适性。

根据本公开的一些实施例的一个方面，提出一种页面图像关闭方法，包括：在获得关闭目标页面的指令后：以目标页面关闭的目标位置为中心，通过CSS(Cascading StyleSheets，层叠样式表)基于预定策略旋转和拉伸目标页面图像；在目标页面图像的第一方向上的宽度小于等于预定收缩宽度后，通过CSS以目标位置为顶点缩短目标页面图像在第二方向上的宽度，直至在第二方向上的宽度小于等于目标关闭宽度，关闭目标页面图像；其中，第一方向与第二方向垂直。

在一些实施例中，在获得关闭目标页面的指令后，页面图像关闭方法还包括：确定目标页面关闭的目标位置，目标位置包括预定位置、触发目标页面展开的触发位置、或目标页面归属类目在上一级页面上的展示位置。

在一些实施例中，基于预定策略旋转和拉伸目标页面图像包括：以目标页面图像的一条边为轴，以预定速率翻转目标页面图像，且同步围绕在目标位置垂直于屏幕的方向的轴旋转目标页面图像；在旋转过程中拉伸目标页面图像，以使目标页面图像从目标位置至远离目标位置的一侧逐渐放大。

在一些实施例中，基于预定策略旋转和拉伸目标页面图像包括：调用第一CSS动画旋转和拉伸目标页面图像，使目标页面图像从初始状态渐变为第一阶段状态，第一阶段状态为目标页面图像的宽度达到预定第一宽度、目标页面图像旋转至预定第一角度的状态；调用第二 CSS动画旋转和拉伸目标页面图像，使目标页面图像从第一阶段状态渐变为第二阶段状态，第一阶段状态为目标页面图像的宽度收缩至预定收缩宽度的状态；以目标位置为顶点缩短目标页面图像在第二方向上的宽度包括：调用第三CSS动画缩短目标页面图像，使目标页面图像从第二阶段状态渐变为关闭状态。

在一些实施例中，通过配置CSS中的变形transform属性的透视 perspective、旋转rotate和变形原点transform-origin参数来旋转、拉伸和缩短目标页面图像。

在一些实施例中，将目标页面图像配置为在旋转和拉伸过程中溢出屏幕的内容不可见。

在一些实施例中，基于预定策略旋转和拉伸目标页面的操作的持续时间为第一预定时长；以目标位置为顶点缩短目标页面图像在第二方向上的宽度的持续时间为第二预定时长；第一预定时长与第二预定时长之和为预定动画时长。

在一些实施例中，在获得关闭目标页面的指令后，页面图像关闭方法还包括：截取目标页面的当前界面图；关闭目标页面，显示当前界面图作为目标页面图像以便执行旋转和拉伸目标页面图像的操作。

在一些实施例中，第一方向为沿屏幕的纵向，第二方向为横向。

在一些实施例中，第一方向为沿屏幕的横向，第二方向为纵向。