【技术实现步骤摘要】
本申请涉及计算机应用领域，具体涉及一种svg动画池封装方法、装置、设备及存储介质。
技术介绍
1、svg(scalable vector graphics，可缩放矢量图形)提供了丰富的动画效果，可应用于各类场景，比如数据可视化、html(超文本标记语言)交互提示等。但目前每组svg动画一般都处于独立使用状态，即使相同的动画效果，也要重复创建多个dom(document objectmodel，文档对象模型)标签。创建多个dom标签便意味着html本身的大小会变大，从而影响页面载入的速度，以及网络下载量。当应用于数据可视化大屏这种多动效且相同动效大量重复的情况时，就需要大量的载入时间，增加用户的等待时间从而影响用户的使用体验。
技术实现思路
1、本申请提供一种svg动画池封装方法、装置、设备及存储介质，能够有效保证用户的使用体验。
2、第一方面，本申请实施例提供一种svg动画池封装方法，所述svg动画池封装方法包括：
3、创建anipools动画池组件，并在创建的anipools动画池组件内编写defs部分，进行动画效果和dom节点的编辑；
4、进行动画生成时判定相同动画效果是否已存在于html中，基于判定结果在html中进行公共的svg标签的插入并抛出动画效果id；
5、将anipools动画池组件引入需要动画效果的svg标签内，并当动画开启时通过抛出的动画效果id，赋予用于呈现动画的svg节点上。
6、结合第一方面，在一
7、基于vue组件创建方式，创建得到一anipools动画池组件；
8、在创建的anipools动画池组件的template标签内进行defs部分的编写，且编写的行defs部分属于svg的片段；
9、在defs部分中进行动画效果和dom节点的编辑。
10、结合第一方面，在一种实施方式中，对于defs部分中编辑的动画效果，由vue组件的props传入的对象控制生成，且动画效果生成的dom节点通过v-model暴露动画效果id。
11、结合第一方面，在一种实施方式中，所述进行动画生成时判定相同动画效果是否已存在于html中，基于判定结果在html中进行公共的svg标签的插入并抛出动画效果id，具体为：
12、anipools动画池组件在生成动画时判断相同动画效果是否已存在于html中：
13、若未存在，则在html中插入一组公共的svg标签，并创建对应的defs部分同时抛出动画效果id；
14、若存在，则直接给出相同动画效果的动画效果id。
15、结合第一方面，在一种实施方式中，所述将anipools动画池组件引入需要动画效果的svg标签内，并当动画开启时通过抛出的动画效果id，赋予用于呈现动画的svg节点上，具体为：
16、将anipools动画池组件引入需要动画效果的svg标签内，通过anipools动画池组件代理原有的defs节点；
17、在anipools动画池组件的props中进行动画开启时，通过抛出的动画效果id，赋予用于呈现的svg节点上；
18、anipools动画池组件产生的公共svg动画节点和用于呈现动画的svg节点形成一组完成的svg动画。
19、结合第一方面，在一种实施方式中，当其他组svg需要动画时，由anipools动画池组件判断是否需要生成动画效果的dom节点或重复利用已经生成的动画效果的dom节点。
20、结合第一方面，在一种实施方式中，当其他组svg需要动画，且anipools动画池组件判断是否需要生成动画效果的dom节点或重复利用已经生成的动画效果的dom节点之后，执行以下步骤：
21、将anipools动画池组件引入需要动画效果的svg标签内，通过anipools动画池组件代理原有的defs节点；
22、在anipools动画池组件的props中进行动画开启时，通过抛出的动画效果id，赋予用于呈现的svg节点上。
23、第二方面，本申请实施例提供一种svg动画池封装装置，所述svg动画池封装装置包括：
24、创建模块，其用于创建anipools动画池组件，并在创建的anipools动画池组件内编写defs部分，进行动画效果和dom节点的编辑；
25、判断模块，其用于在进行动画生成时判定相同动画效果是否已存在于html中，基于判定结果在html中进行公共的svg标签的插入并抛出动画效果id；
26、执行模块，其用于将anipools动画池组件引入需要动画效果的svg标签内，并当动画开启时通过抛出的动画效果id，赋予用于呈现动画的svg节点上。
27、第三方面，本申请实施例提供一种svg动画池封装设备，所述svg动画池封装设备包括处理器、存储器、以及存储在所述存储器上并可被所述处理器执行的svg动画池封装程序，其中所述svg动画池封装程序被所述处理器执行时，实现上述所述的svg动画池封装方法的步骤。
28、第四方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质上存储有svg动画池封装程序，其中所述svg动画池封装程序被处理器执行时，实现上述所述的svg动画池封装方法的步骤。
29、本申请实施例提供的技术方案带来的有益效果包括：
30、通过创建anipools动画池组件，并在创建的anipools动画池组件内编写defs部分，进行动画效果和dom节点的编辑，然后进行动画生成时判定相同动画效果是否已存在于html中，基于判定结果在html中进行公共的svg标签的插入并抛出动画效果id，最后将anipools动画池组件引入需要动画效果的svg标签内，并当动画开启时通过抛出的动画效果id，赋予用于呈现动画的svg节点上，使得在页面中存在大量相同动画效果时，重复利用已有动画dom节点，达到减少html标签数量，缩减html本身大小的目的。
本文档来自技高网...【技术保护点】
1.一种SVG动画池封装方法，其特征在于，所述SVG动画池封装方法包括：
2.如权利要求1所述的一种SVG动画池封装方法，其特征在于，所述创建aniPools动画池组件，并在创建的aniPools动画池组件内编写defs部分，进行动画效果和DOM节点的编辑，具体为：
3.如权利要求2所述的一种SVG动画池封装方法，其特征在于：对于defs部分中编辑的动画效果，由Vue组件的props传入的对象控制生成，且动画效果生成的DOM节点通过v-model暴露动画效果ID。
4.如权利要求1所述的一种SVG动画池封装方法，其特征在于，所述进行动画生成时判定相同动画效果是否已存在于html中，基于判定结果在html中进行公共的SVG标签的插入并抛出动画效果ID，具体为：
5.如权利要求4所述的一种SVG动画池封装方法，其特征在于，所述将aniPools动画池组件引入需要动画效果的SVG标签内，并当动画开启时通过抛出的动画效果ID，赋予用于呈现动画的SVG节点上，具体为：
6.如权利要求5所述的一种SVG动画池封装方法，其特征在于，当
7.如权利要求6所述的一种SVG动画池封装方法，其特征在于，当其他组SVG需要动画，且aniPools动画池组件判断是否需要生成动画效果的DOM节点或重复利用已经生成的动画效果的DOM节点之后，执行以下步骤：
8.一种SVG动画池封装装置，其特征在于，所述SVG动画池封装装置包括：
9.一种SVG动画池封装设备，其特征在于，所述SVG动画池封装设备包括处理器、存储器、以及存储在所述存储器上并可被所述处理器执行的SVG动画池封装程序，其中所述SVG动画池封装程序被所述处理器执行时，实现如权利要求1至7中任一项所述的SVG动画池封装方法的步骤。
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有SVG动画池封装程序，其中所述SVG动画池封装程序被处理器执行时，实现如权利要求1至7中任一项所述的SVG动画池封装方法的步骤。
...【技术特征摘要】
1.一种svg动画池封装方法，其特征在于，所述svg动画池封装方法包括：
2.如权利要求1所述的一种svg动画池封装方法，其特征在于，所述创建anipools动画池组件，并在创建的anipools动画池组件内编写defs部分，进行动画效果和dom节点的编辑，具体为：
3.如权利要求2所述的一种svg动画池封装方法，其特征在于：对于defs部分中编辑的动画效果，由vue组件的props传入的对象控制生成，且动画效果生成的dom节点通过v-model暴露动画效果id。
4.如权利要求1所述的一种svg动画池封装方法，其特征在于，所述进行动画生成时判定相同动画效果是否已存在于html中，基于判定结果在html中进行公共的svg标签的插入并抛出动画效果id，具体为：
5.如权利要求4所述的一种svg动画池封装方法，其特征在于，所述将anipools动画池组件引入需要动画效果的svg标签内，并当动画开启时通过抛出的动画效果id，赋予用于呈现动画的svg节点上，具体为：
6.如权利要求5所述的一种sv...
【专利技术属性】
技术研发人员：魏聪，
申请(专利权)人：武汉噢易云计算股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。