一种生成动画效果的方法和装置与流程

专利2025-08-03  21


本发明涉及计算机动画领域,具体为一种生成动画效果的方法和装置。


背景技术:

1、计算机动画是指采用图形与图像的处理技术,借助于编程或动画制作软件生成一系列的景物画面。

2、常见的计算机动画生成方式有两种,利用纯js改变dom元素位置实现动画效果,以及利用js的requestanimationframe技术和css技术实现动画效果,两种生成方式均存在提升空间。

3、利用纯js改变dom元素位置实现动画效果,具有以下不足:由于js改变是一个持续性行为,所以每次改变都要重新布局,这会导致性能很差,消耗大量时间在渲染上,可以看到执行js脚本时间远远小于渲染时间。

4、利用js的requestanimationframe技术和css技术实现动画效果的,具有以下不足:这里的requestanimationframe执行频率要比单纯的js更加频繁,虽然利用css技术减少了渲染时间,但是增加了大量的执行时间,可以看到执行js脚本时间要远远大于渲染时间。


技术实现思路

1、(一)解决的技术问题

2、针对现有技术的不足,本发明提供了一种生成动画效果的方法和装置,来解决上述问题。

3、(二)技术方案

4、为实现上述目的,本发明提供如下技术方案:一种生成动画效果的方法包括:在html中定义要操作的元素,使用css来为这个元素设置初始样式,使用css动画属性或选择器来定义动画效果和触发条件,在定义动画时添加一个事件监听器,使用animation实现动画,编写关键帧,描述动画的每个阶段所应用的样式,完成后对整体参数进行调整,在浏览器预览,调整参数,取最佳效果。

5、优选的,添加事件监听器后,当该动画开始、重复或者结束时,触发相应的事件,并执行js脚本。

6、根据本发明实施例的又一方面,提供了一种生成动画效果的装置,包括装置本体,以及设置在装置本体内部的转化模块、存储模块、判断模块、控制模块、事件模块与调试模块,所述转化模块用于解析动画描述对象,获取时间轴启动时间的数组和动画结束时间的数组,将每个动画元素的动画效果转换为具体的时间轴启动时间和动画结束时间,所述存储模块用于将时间轴启动时间和动画结束时间存储在相应的数组中,所述判断模块用于在时间轴事件每帧触发时,判断是否存在与所述时间轴启动时间数组或所述动画结束时间数组相同的时间点,所述控制模块用于当存在与所述时间轴启动时间的数组或所述动画结束时间的数组相同的时间点时,进入触发逻辑,所述事件模块用于监听用户操作或特定元素上的事件,所述调试模块用于检查代码的问题和性能问题。

7、优选的,所述动画描述对象包含一组动画元素及其相应的样式和动画效果。

8、根据本发明实施例的又一方面,提供了一种电子设备,包括:一个或多个处理器;存储器,用于存储一个或多个程序。

9、优选的,所述一个或多个程序被所述一个或多个处理器执行时,使得所述一个或多个处理器实现根据权利要求1或2所述的方法。

10、根据本发明实施例的又一方面,提供了一种计算机可读介质,其上存储有计算机程序,所述程序被处理器执行时实现根据权利要求1或2所述的方法。

11、根据本发明实施例的又一方面,提供了一种显示设备,包括:显示区与非显示区,所述显示区用于显示根据权利要求1或2所述的方法生成的动画效果。

12、(三)有益效果

13、与现有技术相比,本发明提供了一种生成动画效果的方法和装置,具备以下有益效果:

14、1.在实现完整的动画效果的前提下,既不要大量的执行js脚本时间,也不要大量的渲染时间。在css动画中添加事件监听器,可以在特定时间点执行js脚本,从而避免在整个动画过程中不断执行js脚本,降低了对cpu和渲染的负荷,可以减少执行脚本的时间和渲染的时间。

15、2.当使用js来直接对元素进行动画操作时,每一个动画帧都需要通过js计算和设置元素的样式属性,然后浏览器才会重新渲染该元素。这个过程可能会占用大量的cpu资源,导致性能问题。而使用css动画,则可以利用浏览器内置的硬件加速功能,将动画效果交给gpu来处理,从而减少了cpu的负担。

16、3.此外,css动画也能够让动画的执行更加流畅和自然,提高用户体验。



技术特征:

1.一种生成动画效果的方法,其特征在于,包括:在html中定义要操作的元素,使用css来为这个元素设置初始样式,使用css动画属性或选择器来定义动画效果和触发条件,在定义动画时添加一个事件监听器,使用animation实现动画,编写关键帧,描述动画的每个阶段所应用的样式,完成后对整体参数进行调整,在浏览器预览,调整参数,取最佳效果。

2.根据权利要求1所述的生成动画效果的方法,其特征在于:添加事件监听器后,当该动画开始、重复或者结束时,触发相应的事件,并执行js脚本。

3.一种生成动画效果的装置,包括装置本体(1),以及设置在装置本体(1)内部的转化模块(101)、存储模块(102)、判断模块(103)、控制模块(104)、事件模块(105)与调试模块(106),其特征在于:所述转化模块(101)用于解析动画描述对象,获取时间轴启动时间的数组和动画结束时间的数组,将每个动画元素的动画效果转换为具体的时间轴启动时间和动画结束时间,所述存储模块(102)用于将时间轴启动时间和动画结束时间存储在相应的数组中,所述判断模块(103)用于在时间轴事件每帧触发时,判断是否存在与所述时间轴启动时间数组或所述动画结束时间数组相同的时间点,所述控制模块(104)用于当存在与所述时间轴启动时间的数组或所述动画结束时间的数组相同的时间点时,进入触发逻辑,所述事件模块(105)用于监听用户操作或特定元素上的事件,所述调试模块(106)用于检查代码的问题和性能问题。

4.根据权利要求3所述的生成动画效果的装置,其特征在于:所述动画描述对象包含一组动画元素及其相应的样式和动画效果。

5.一种电子设备,其特征在于,包括:一个或多个处理器;存储器,用于存储一个或多个程序。

6.根据权利要求5所述的电子设备,其特征在于:所述一个或多个程序被所述一个或多个处理器执行时,使得所述一个或多个处理器实现根据权利要求1或2所述的方法。

7.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述程序被处理器执行时实现根据权利要求1或2所述的方法。

8.一种显示设备,其特征在于,包括:显示区与非显示区,所述显示区用于显示根据权利要求1或2所述的方法生成的动画效果。


技术总结
本发明涉及计算机动画领域,且公开了一种生成动画效果的方法和装置,包括:在HTML中定义要操作的元素,使用CSS来为这个元素设置初始样式,使用CSS动画属性或选择器来定义动画效果和触发条件,在定义动画时添加一个事件监听器,使用animation实现动画,编写关键帧,描述动画的每个阶段所应用的样式,完成后对整体参数进行调整,在浏览器预览,调整参数,取最佳效果。本发明所述的一种生成动画效果的方法和装置,在实现完整的动画效果的前提下,既不要大量的执行js脚本时间,也不要大量的渲染时间,降低了对CPU和渲染的负荷,可以减少执行脚本的时间和渲染的时间,减少了CPU的负担,也能够让动画的执行更加流畅和自然,提高用户体验。

技术研发人员:李怡萱,郑文刚,王宝臣
受保护的技术使用者:北京艺源酷科技有限公司
技术研发日:
技术公布日:2024/6/26
转载请注明原文地址:https://doc.8miu.com/read-1823440.html

最新回复(0)