CN113160364A - 一种Web网页中实现三维景深动画效果的方法和相关装置 - Google Patents

一种Web网页中实现三维景深动画效果的方法和相关装置 Download PDF

Info

Publication number
CN113160364A
CN113160364A CN202110564938.6A CN202110564938A CN113160364A CN 113160364 A CN113160364 A CN 113160364A CN 202110564938 A CN202110564938 A CN 202110564938A CN 113160364 A CN113160364 A CN 113160364A
Authority
CN
China
Prior art keywords
value
dom
animation
scaling
animation data
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.)
Granted
Application number
CN202110564938.6A
Other languages
English (en)
Other versions
CN113160364B (zh
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.)
Vtron Group Co Ltd
Original Assignee
Vtron Group 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 Vtron Group Co Ltd filed Critical Vtron Group Co Ltd
Priority to CN202110564938.6A priority Critical patent/CN113160364B/zh
Publication of CN113160364A publication Critical patent/CN113160364A/zh
Application granted granted Critical
Publication of CN113160364B publication Critical patent/CN113160364B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/20—3D [Three Dimensional] animation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Abstract

本申请公开了一种Web网页中实现三维景深动画效果的方法和相关装置，其中方法包括：包括：获取待展示的动画数据中dom元素的数量；根据所述数量，计算所述动画数据中各所述dom元素对应的虚化值和缩放值；根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示。本申请中根据待展示的动画数据中dom元素的数量，计算各dom元素对应的虚化值和缩放值，也即每个dom元素css3样式的缩放属性和虚化属性，以达到各元素距离屏幕远近的效果，实现Web网页中的动画展示，从而解决了现有Web网页中的动画实现方法动画展示效果较差的技术问题。

Description

一种Web网页中实现三维景深动画效果的方法和相关装置
技术领域
本申请涉及计算机网络领域，尤其涉及一种Web网页中实现三维景深动画效果的方法和相关装置。
背景技术
Web(World Wide Web，全球广域网)是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面。随着计算机技术和互联网技术的发展，为了使Web网页富有活力，越来越多的炫酷动画需要在Web网页中被展示出来。
现有Web网页中的动画实现方法，因为Web网页默认是2D平面，页面上的元素仅能在X、Y轴上表现动画。即使设置了3D的景深属性，最终也会垂直投射在2D平面上，看不出是三维效果，导致动画的展示效果较差。因此，在Web网页中实现景深效果是本领域技术人员亟待解决的技术问题。
发明内容
本申请提供了一种Web网页中实现三维景深动画效果的方法和相关装置，解决了现有Web网页中的动画实现方法动画展示效果较差的技术问题。
有鉴于此，本申请第一方面提供了一种Web网页中实现三维景深动画效果的方法，包括：
获取待展示的动画数据中dom元素的数量；
根据所述数量，计算所述动画数据中各所述dom元素对应的虚化值和缩放值；
根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示。
可选地，所述根据所述数量，计算所述动画数据中各所述dom元素对应的虚化值和缩放值，具体包括：
根据所述数量，获取所述动画数据对应的缩放基数和虚化基数；
根据所述缩放基数和各所述dom元素的索引值，计算对应的缩放值；
根据所述虚化基数和各所述dom元素的索引值，计算对应的虚化值。
可选地，所述根据所述缩放基数和各所述dom元素的索引值，计算对应的缩放值，具体包括：
利用缩放值计算公式，根据所述缩放基数和各所述dom元素的索引值，计算对应的缩放值；
其中，所述缩放值计算公式为：
scale＝(space+a+(space*i)).toFixed(2)；
scale为缩放值，a为缩放基数，i为各dom元素的索引值，toFixed(2)是四舍六入五取偶法，space＝0.6/(len+1)//间隔，len为动画数据中dom元素的数量，间隔为相邻的2个dom元素之间的距离。
可选地，所述根据所述虚化基数和各所述dom元素的索引值，计算对应的虚化值，具体包括：
将所述数量和各所述dom元素的索引值作差，得到对应的第一差值；
将各所述第一差值和所述虚化基数相乘，得到对应的虚化值。
可选地，所述获取待展示的动画数据中dom元素的数量，之前还包括：
将所述动画数据倾斜预置角度，使得所述动画数据中被遮挡的dom元素显示出来。
可选地，所述根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示，具体包括：
将各所述dom元素对应的虚化值和缩放值覆盖在对应的dom元素上后，将所有的所述dom元素进行拼接，实现所述动画数据的展示。
可选地，所述根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示，之后还包括：
响应于用户的交互操作，获取所述交互操作对应的交互dom元素；
获取所述交互dom元素对应的索引值，并根据所述索引值计算所述交互dom元素的新的缩放值和虚化值，以进行动画展示。
本申请第二方面提供了一种Web网页中实现三维景深动画效果的装置，包括：
获取单元，用于获取待展示的动画数据中dom元素的数量；
计算单元，用于根据所述数量，计算所述动画数据中各所述dom元素对应的虚化值和缩放值；
组合单元，用于根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示。
本申请第三方面提供了一种Web网页中实现三维景深动画效果的设备，所述设备包括处理器以及存储器；
所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；
所述处理器用于根据所述程序代码中的指令执行第一方面任一所述的Web网页中实现三维景深动画效果的方法。
本申请第四方面提供了一种存储介质，所述存储介质用于存储程序代码，所述程序代码用于执行第一方面任一所述的Web网页中实现三维景深动画效果的方法。
从以上技术方法可以看出，本申请具有以下优点：
本申请中的Web网页中实现三维景深动画效果的方法，包括：获取待展示的动画数据中dom元素的数量；根据所述数量，计算所述动画数据中各所述dom元素对应的虚化值和缩放值；根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示。本申请中根据待展示的动画数据中dom元素的数量，计算各dom元素对应的虚化值和缩放值，也即每个dom元素css3样式的缩放属性和虚化属性，以达到各元素距离屏幕远近的效果，实现Web网页中的动画展示，从而解决了现有Web网页中的动画实现方法动画展示效果较差的技术问题。
附图说明
为了更清楚地说明本申请实施例中的技术方法，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其它的附图。
图1为本申请实施例中一种Web网页中实现三维景深动画效果的方法的实施例一的流程示意图；
图2为本申请实施例中一种Web网页中实现三维景深动画效果的方法的实施例二的流程示意图；
图3为动画数据未倾斜前的正面图；
图4为动画数据倾斜后的正面图；
图5为图3对应的动画数据的3D展示图；
图6为本申请实施例中一种Web网页中实现三维景深动画效果的装置的实施例的结构示意图。
具体实施方式
本申请实施例提供了一种Web网页中实现三维景深动画效果的方法和相关装置，解决了现有Web网页中的动画实现方法动画展示效果较差的技术问题。
为了使本技术领域的人员更好地理解本申请方法，下面将结合本申请实施例中的附图，对本申请实施例中的技术方法进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
以便于理解，请参阅图1，图1为本申请实施例中一种Web网页中实现三维景深动画效果的方法的实施例一的流程示意图。
本实施例中的一种Web网页中实现三维景深动画效果的方法，包括：
步骤101、获取待展示的动画数据中dom元素的数量。
本实施例中，对于dom元素的数量的获取，可以是对动画数据中的dom元素进行统计后得到的。
可以理解的是，dom元素指的是动画数据中的文档对象模型。
步骤102、根据数量，计算动画数据中各dom元素对应的虚化值和缩放值。
在计算得到动画数据中dom元素的数量后，便可以根据上述数量，计算动画数据中各dom元素对应的虚化值和缩放值。
步骤103、根据各dom元素对应的虚化值和缩放值，将所有dom元素进行组合，实现动画数据的展示。
在得到各dom元素对应的虚化值和缩放值后，将所有dom元素进行组合，便可以实现动画数据的展示，也即实现Web网页中的动画展示。
本实施例中的Web网页中实现三维景深动画效果的方法，获取待展示的动画数据中dom元素的数量；根据数量，计算动画数据中各dom元素对应的虚化值和缩放值；根据各dom元素对应的虚化值和缩放值，将所有dom元素进行组合，实现动画数据的展示。本申请中根据待展示的动画数据中dom元素的数量，计算各dom元素对应的虚化值和缩放值，也即每个dom元素css3样式的缩放属性和虚化属性，以达到各元素距离屏幕远近的效果，实现Web网页中的动画展示，从而解决了现有Web网页中的动画实现方法动画展示效果较差的技术问题。
以上为本申请实施例提供的一种Web网页中实现三维景深动画效果的方法的实施例一，以下为本申请实施例提供的一种Web网页中实现三维景深动画效果的方法的实施例二。
请参阅图2，图2为本申请实施例中一种Web网页中实现三维景深动画效果的方法的实施例二的流程示意图。
本实施例中的一种Web网页中实现三维景深动画效果的方法，包括：
步骤200、将动画数据倾斜预置角度，使得动画数据中被遮挡的dom元素显示出来。
可以理解的是，为了能够在2D平面上看出多个元素堆叠一起产生的3D效果，一般会整体倾斜一点角度，使被遮挡的元素能显示出来。如图3所示为动画数据未倾斜前的正面图，图4为倾斜后动画数据的正面图，可以看出，倾斜后动画数据中的dom元素显示更为全面。
步骤201、获取待展示的动画数据中dom元素的数量。
步骤201的描述与实施例一中步骤101的描述相同，具体可以参见上述步骤101的描述，在此不再赘述。
步骤202、根据数量，获取动画数据对应的缩放基数和虚化基数。
可以理解的是，为了使得动画效果更佳，数量和缩放基数、虚化基数可以是根据预置对应关系配置的，例如当数量为500以内时，缩放基数为0.1，虚化基数为1.5；当数量为500-100时，缩放基数为0.2，虚化基数为1.8。需要说明的是，上述缩放基数和虚化基数的说明仅仅是一种示意性的举例说明，本领域技术人员可以根据需要参照上述的描述进行对应的设置。
步骤203、根据缩放基数和各dom元素的索引值，计算对应的缩放值。
根据缩放基数和各dom元素的索引值，计算对应的缩放值，具体包括：
利用缩放值计算公式，根据缩放基数和各dom元素的索引值，计算对应的缩放值；
其中，缩放值计算公式为：
scale＝(space+a+(space*i)).toFixed(2)；
scale为缩放值，a为缩放基数，i为各dom元素的索引值，toFixed(2)是四舍六入五取偶法，space＝0.6/(len+1)//间隔，len为动画数据中dom元素的数量，间隔为相邻的2个dom元素之间的距离。间隔是通过len参数运算得到的，是动态的，避免scale的最终运算结果太大，导致最前的dom元素(i是第len-1个时)缩放值太大，超出显示区域。可以理解的是，a的取值范围可以是0.01-0.2。
另外a这个缩放基数是有个区间范围的，0.01-0.2，不能过大。
上述的toFixed(2)四舍六入五取偶法，简单来说就是四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。
可以理解的是，上述的索引值为各dom元素在动画数据中的顺序，例如第123456位之类的。因为动画数据的内容是数组，就会有第123456位的顺序。
步骤204、根据虚化基数和各dom元素的索引值，计算对应的虚化值。
根据虚化基数和各dom元素的索引值，计算对应的虚化值，具体包括：
将数量和各dom元素的索引值作差，得到对应的第一差值；
将各第一差值和虚化基数相乘，得到对应的虚化值。
步骤205、将各dom元素对应的虚化值和缩放值覆盖在对应的dom元素上后，将所有的dom元素进行拼接，实现动画数据的展示。
如图5所示，为本实施例中将图1中的动画数据进行一些列处理后的3D展示图。
具体在覆盖时，将各dom元素对应的虚化值和缩放值，用css样式{属性名：属性值}如{transform:scale(0.1)；filter:blur(15px)；}覆盖在对应的dom元素上。
通过设置css3的动画属性，使得元素一个个依次从远到近，从模糊到清晰，从小到大进场，且用户可通过点击等对某一个元素进行交互操作时，获取到交互对象的索引值，可计算出所有元素的新属性值，最后把新属性值设置在css3的动画属性上，便可实现交互的三维补间动画。
根据各dom元素对应的虚化值和缩放值，将所有dom元素进行组合，实现动画数据的展示，之后还包括：
响应于用户的交互操作，获取交互操作对应的交互dom元素；
获取交互dom元素对应的索引值，并根据索引值计算交互dom元素的新的缩放值和虚化值，以进行动画展示。
上述的操作说明，当得到景深效果后，用户是可以对界面上的元素进行鼠标交互操作的，比如鼠标点击，悬停在某个元素上。当鼠标进行了悬停或点击事件后，利用web的JavaScript事件，获取对应的交互dom元素，从交互dom元素上得到对应的索引值，然后又利用之前的计算规则，再转化出新的缩放值和虚化值，然后再进行动画展示。类似点击了哪个元素，哪个元素就移到最前边，后面跟着的元素也依次往前移，往前移后，元素会变大，变清晰，若最前面的元素大于显示范围时，隐藏不显示。本实施例中的Web网页中实现三维景深动画效果的方法，获取待展示的动画数据中dom元素的数量；根据数量，计算动画数据中各dom元素对应的虚化值和缩放值；根据各dom元素对应的虚化值和缩放值，将所有dom元素进行组合，实现动画数据的展示。本申请中根据待展示的动画数据中dom元素的数量，计算各dom元素对应的虚化值和缩放值，也即每个dom元素css3样式的缩放属性和虚化属性，以达到各元素距离屏幕远近的效果，实现Web网页中的动画展示，从而解决了现有Web网页中的动画实现方法动画展示效果较差的技术问题。
以上为本申请实施例提供的一种Web网页中实现三维景深动画效果的方法的实施例二，以下为本申请实施例提供的一种Web网页中实现三维景深动画效果的装置的实施例。
请参阅图6，图6为本申请实施例中一种Web网页中实现三维景深动画效果的装置的实施例的结构示意图。
本实施例中的一种Web网页中实现三维景深动画效果的装置，包括：
获取单元601，用于获取待展示的动画数据中dom元素的数量；
计算单元602，用于根据数量，计算动画数据中各dom元素对应的虚化值和缩放值；
组合单元603，用于根据各dom元素对应的虚化值和缩放值，将所有dom元素进行组合，实现动画数据的展示。
进一步地，计算单元602具体包括：
获取子单元，用于根据数量，获取动画数据对应的缩放基数和虚化基数；
第一计算子单元，用于根据缩放基数和各dom元素的索引值，计算对应的缩放值；
第二计算子单元，用于根据虚化基数和各dom元素的索引值，计算对应的虚化值。
根据缩放基数和各dom元素的索引值，计算对应的缩放值，具体包括：
进一步地，第一计算子单元具体用于利用缩放值计算公式，根据缩放基数和各dom元素的索引值，计算对应的缩放值；其中，缩放值计算公式为：
scale＝(space+a+(space*i)).toFixed(2)；
scale为缩放值，a为缩放基数，i为各dom元素的索引值，toFixed(2)是四舍六入五取偶法，space＝0.6/(len+1)//间隔，len为动画数据中dom元素的数量，间隔为相邻的2个dom元素之间的距离。
进一步地，根据虚化基数和各dom元素的索引值，计算对应的虚化值，具体包括：
将数量和各dom元素的索引值作差，得到对应的第一差值；
将各第一差值和虚化基数相乘，得到对应的虚化值。
进一步地，本实施例中的Web网页中实现三维景深动画效果的装置之前还包括：
倾斜单元，用于将动画数据倾斜预置角度，使得动画数据中被遮挡的dom元素显示出来。
组合单元，具体用于将各dom元素对应的虚化值和缩放值覆盖在对应的dom元素上后，将所有的dom元素进行拼接，实现动画数据的展示。
进一步地，本实施例中的Web网页中实现三维景深动画效果的装置还包括：
交互单元，用于响应于用户的交互操作，获取交互操作对应的交互dom元素；
展示单元，用于获取交互dom元素对应的索引值，并根据索引值计算交互dom元素的新的缩放值和虚化值，以进行动画展示。
本实施例中的Web网页中实现三维景深动画效果的装置，获取待展示的动画数据中dom元素的数量；根据数量，计算动画数据中各dom元素对应的虚化值和缩放值；根据各dom元素对应的虚化值和缩放值，将所有dom元素进行组合，实现动画数据的展示。本申请中根据待展示的动画数据中dom元素的数量，计算各dom元素对应的虚化值和缩放值，也即每个dom元素css3样式的缩放属性和虚化属性，以达到各元素距离屏幕远近的效果，实现Web网页中的动画展示，从而解决了现有Web网页中的动画实现方法动画展示效果较差的技术问题。
本申请实施例还提供一种Web网页中实现三维景深动画效果的设备的实施例，设备包括处理器以及存储器；存储器用于存储程序代码，并将程序代码传输给处理器；处理器用于根据程序代码中的指令执行前述实施例的Web网页中实现三维景深动画效果的方法。
本申请实施例还提供一种存储介质的实施例，存储介质用于存储程序代码，程序代码用于执行前述实施例的Web网页中实现三维景深动画效果的方法。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
本申请的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例例如能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统，商品加载服务器和方法，可以通过其它的方式实现。例如，以上所描述的商品加载服务器实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，商品加载服务器或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(英文全称：Read-OnlyMemory，英文缩写：ROM)、随机存取存储器(英文全称：Random Access Memory，英文缩写：RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (10)

1.一种Web网页中实现三维景深动画效果的方法，其特征在于，包括：
获取待展示的动画数据中dom元素的数量；
根据所述数量，计算所述动画数据中各所述dom元素对应的虚化值和缩放值；
根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示。
2.根据权利要求1所述的Web网页中实现三维景深动画效果的方法，其特征在于，所述根据所述数量，计算所述动画数据中各所述dom元素对应的虚化值和缩放值，具体包括：
根据所述数量，获取所述动画数据对应的缩放基数和虚化基数；
根据所述缩放基数和各所述dom元素的索引值，计算对应的缩放值；
根据所述虚化基数和各所述dom元素的索引值，计算对应的虚化值。
3.根据权利要求2所述的Web网页中实现三维景深动画效果的方法，其特征在于，所述根据所述缩放基数和各所述dom元素的索引值，计算对应的缩放值，具体包括：
利用缩放值计算公式，根据所述缩放基数和各所述dom元素的索引值，计算对应的缩放值；
其中，所述缩放值计算公式为：
scale＝(space+a+(space*i)).toFixed(2)；
scale为缩放值，a为缩放基数，i为各dom元素的索引值，toFixed(2)是四舍六入五取偶法，space＝0.6/(len+1)//间隔，len为动画数据中dom元素的数量，间隔为相邻的2个dom元素之间的距离。
4.根据权利要求2所述的Web网页中实现三维景深动画效果的方法，其特征在于，所述根据所述虚化基数和各所述dom元素的索引值，计算对应的虚化值，具体包括：
将所述数量和各所述dom元素的索引值作差，得到对应的第一差值；
将各所述第一差值和所述虚化基数相乘，得到对应的虚化值。
5.根据权利要求1所述的Web网页中实现三维景深动画效果的方法，其特征在于，所述获取待展示的动画数据中dom元素的数量，之前还包括：
将所述动画数据倾斜预置角度，使得所述动画数据中被遮挡的dom元素显示出来。
6.根据权利要求1所述的Web网页中实现三维景深动画效果的方法，其特征在于，所述根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示，具体包括：
将各所述dom元素对应的虚化值和缩放值覆盖在对应的dom元素上后，将所有的所述dom元素进行拼接，实现所述动画数据的展示。
7.根据权利要求1所述的Web网页中实现三维景深动画效果的方法，其特征在于，所述根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示，之后还包括：
响应于用户的交互操作，获取所述交互操作对应的交互dom元素；
获取所述交互dom元素对应的索引值，并根据所述索引值计算所述交互dom元素的新的缩放值和虚化值，以进行动画展示。
8.一种Web网页中实现三维景深动画效果的装置，其特征在于，包括：
获取单元，用于获取待展示的动画数据中dom元素的数量；
计算单元，用于根据所述数量，计算所述动画数据中各所述dom元素对应的虚化值和缩放值；
组合单元，用于根据各所述dom元素对应的虚化值和缩放值，将所有所述dom元素进行组合，实现所述动画数据的展示。
9.一种Web网页中实现三维景深动画效果的设备，其特征在于，所述设备包括处理器以及存储器；
所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；
所述处理器用于根据所述程序代码中的指令执行权利要求1至7中任一项所述的Web网页中实现三维景深动画效果的方法。
10.一种存储介质，其特征在于，所述存储介质用于存储程序代码，所述程序代码用于执行权利要求1至7中任一项所述的Web网页中实现三维景深动画效果的方法。
CN202110564938.6A 2021-05-24 2021-05-24 一种Web网页中实现三维景深动画效果的方法和相关装置 Active CN113160364B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110564938.6A CN113160364B (zh) 2021-05-24 2021-05-24 一种Web网页中实现三维景深动画效果的方法和相关装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110564938.6A CN113160364B (zh) 2021-05-24 2021-05-24 一种Web网页中实现三维景深动画效果的方法和相关装置

Publications (2)

Publication Number Publication Date
CN113160364A true CN113160364A (zh) 2021-07-23
CN113160364B CN113160364B (zh) 2023-10-10

Family

ID=76877084

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110564938.6A Active CN113160364B (zh) 2021-05-24 2021-05-24 一种Web网页中实现三维景深动画效果的方法和相关装置

Country Status (1)

Country Link
CN (1) CN113160364B (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130024763A1 (en) * 2011-07-20 2013-01-24 International Business Machines Corporation Utilizing a graphical transition to sort an interface element independently of a document object model
US20130346851A1 (en) * 2012-06-25 2013-12-26 Microsoft Corporation Declarative show and hide animations in html5
CN105205845A (zh) * 2015-09-14 2015-12-30 广州视睿电子科技有限公司 网页动画渲染方法及装置
US20160364369A1 (en) * 2015-06-09 2016-12-15 International Business Machines Corporation Optimization for rendering web pages
US20170075547A1 (en) * 2015-09-15 2017-03-16 Google Inc. Systems and methods for determining application zoom levels
CN107680151A (zh) * 2017-09-27 2018-02-09 千寻位置网络有限公司 增强Web3D中的指示性动画实现能力的方法及其应用
CN111311715A (zh) * 2020-02-14 2020-06-19 北京三快在线科技有限公司 一种网页中添加动画效果的方法及装置
CN112190943A (zh) * 2020-11-09 2021-01-08 网易（杭州）网络有限公司 游戏展示方法及装置、处理器、电子设备

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130024763A1 (en) * 2011-07-20 2013-01-24 International Business Machines Corporation Utilizing a graphical transition to sort an interface element independently of a document object model
US20130346851A1 (en) * 2012-06-25 2013-12-26 Microsoft Corporation Declarative show and hide animations in html5
US20160364369A1 (en) * 2015-06-09 2016-12-15 International Business Machines Corporation Optimization for rendering web pages
CN105205845A (zh) * 2015-09-14 2015-12-30 广州视睿电子科技有限公司 网页动画渲染方法及装置
WO2017045480A1 (zh) * 2015-09-14 2017-03-23 广州视睿电子科技有限公司 网页动画渲染方法及装置
US20170075547A1 (en) * 2015-09-15 2017-03-16 Google Inc. Systems and methods for determining application zoom levels
CN107680151A (zh) * 2017-09-27 2018-02-09 千寻位置网络有限公司 增强Web3D中的指示性动画实现能力的方法及其应用
CN111311715A (zh) * 2020-02-14 2020-06-19 北京三快在线科技有限公司 一种网页中添加动画效果的方法及装置
CN112190943A (zh) * 2020-11-09 2021-01-08 网易（杭州）网络有限公司 游戏展示方法及装置、处理器、电子设备

Non-Patent Citations (3)

* Cited by examiner, † Cited by third party
Title
JARK J 等: "Image based flow visualization", PROCEEDINGS OF THE 29TH ANNUAL CONFERENCE ON COMPUTER GRAPHICS AND INTERACTIVE TECHNIQUES, pages 745 - 754 *
不详: "缩放/缩放DOM元素及其占有空间使用CSS3 transform scale()", pages 1 - 5, Retrieved from the Internet <URL:https://www.it1352.com/565579.html> *
侯严庭;: "基于Three.js的机械产品自动装配演示", 软件工程, no. 03, pages 23 - 26 *

Also Published As

Publication number Publication date
CN113160364B (zh) 2023-10-10

Similar Documents

Publication Publication Date Title
US10872446B2 (en) Systems and methods for high dimensional 3D data visualization
CN111815755B (zh) 虚拟物体被遮挡的区域确定方法、装置及终端设备
US8132116B1 (en) Configurable iconic image representation
CN105184839B (zh) 视频与几何图形的无缝表示
US9824470B2 (en) Use of dynamic numeric axis to indicate and highlight data ranges
US9405446B1 (en) Efficient and interactive presentation of item images
CN104503570B (zh) 基于全景漫游的用户行为数据处理系统及设备
JP4376944B2 (ja) 中間画像生成方法および装置ならびにプログラム
Fernandez et al. Survey of information visualization techniques for enhancing visual analysis
CN113160364A (zh) 一种Web网页中实现三维景深动画效果的方法和相关装置
JP6054532B2 (ja) データ視覚化の方法及びシステム
CN109491565B (zh) 三维场景中物体的组件信息显示方法及设备
CN111080781A (zh) 一种三维地图显示方法及移动终端
US10078801B2 (en) System, method and software for representing decision trees
US11205296B2 (en) 3D data exploration using interactive cuboids
WO2014044844A1 (en) Ranking of user feedback based on user input device tracking
CN113010626A (zh) 一种热力图生成方法、装置、设备和存储介质
CN107145313A (zh) 图像显示方法及装置
US20200175742A1 (en) Rastered volume renderer and manipulator
CN112464126B (zh) 一种基于Threejs生成全景图表的方法、终端设备及存储介质
US20230008224A1 (en) Visualization of complex data
de Haan Scalable visualization of massive point clouds
Colton Stroke matching for paint dances
CN115437624B (zh) 一种客户端海报页面的生成方法及装置
CN115329229A (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