CN114510240A - 一种通过svg动画封装为图表提供动效的方法及装置 - Google Patents

一种通过svg动画封装为图表提供动效的方法及装置 Download PDF

Info

Publication number
CN114510240A
CN114510240A CN202210090041.9A CN202210090041A CN114510240A CN 114510240 A CN114510240 A CN 114510240A CN 202210090041 A CN202210090041 A CN 202210090041A CN 114510240 A CN114510240 A CN 114510240A
Authority
CN
China
Prior art keywords
animation
mask
node
svg
packaging
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.)
Pending
Application number
CN202210090041.9A
Other languages
English (en)
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.)
Wuhan Os Easy Cloud Computing Co ltd
Original Assignee
Wuhan Os Easy Cloud Computing 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 Wuhan Os Easy Cloud Computing Co ltd filed Critical Wuhan Os Easy Cloud Computing Co ltd
Priority to CN202210090041.9A priority Critical patent/CN114510240A/zh
Publication of CN114510240A publication Critical patent/CN114510240A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种通过SVG动画封装为图表提供动效的方法及装置，涉及计算机应用领域，该方法包括在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的mask id。本发明有效避免了复杂动画代码逻辑，极大的降低了对访问者机器性能的消耗，提高了动效的复用和易用性。

Description

一种通过SVG动画封装为图表提供动效的方法及装置
技术领域
本发明涉及计算机应用领域，具体涉及一种通过SVG(Scalable VectorGraphics，一种图像文件格式)动画封装为图表提供动效的方法及装置。
背景技术
在大数据时代，HTML(Hyper Text Markup Language，超文本标记语言)展示形式越来越丰富，特别是在数据可视化展示领域，图表应用的越来约广泛。同时，为了数据可视化展示页面具有动感、炫丽、耐看等效果，前端开发工程师需要花费大量的时间来设想、实现、图表的动效。
目前市面上的图表库，都只是采用了数据载入效果，来达到一个入场动效，但该动效都是一次性的，当数据为非实时数据时，此时图表便没有任何动效，从而无法吸引用户的目光。如果需要对图表开发动效，一般都是从数据载入或通过多个图表配合时间差，加上延迟完成，这种做法不仅需要复杂冗长的逻辑代码，过多的图表绘制图层时，会给浏览器带来更多的性能消耗，动画采用数据载入不断的触发入场效果，使得访问者的机器性能过多的消耗，造成卡顿，延迟等现象，导致用户的体验效果极差。
发明内容
针对现有技术中存在的缺陷，本发明的目的在于提供一种通过SVG动画封装为图表提供动效的方法及装置，有效避免了复杂动画代码逻辑，极大的降低了对访问者机器性能的消耗，提高了动效的复用和易用性。
为达到以上目的，本发明提供的一种通过SVG动画封装为图表提供动效的方法，具体包括以下步骤：
在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；
将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；
在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的mask id。
在上述技术方案的基础上，所述进行动画节点封装，具体步骤包括：
在动画节点中预编写SVG的mask动画，并将mask动画中的所有坐标定义为动画节点中的内部变量；
计算得到mask动画的相对运动坐标，动画节点使用v-model暴露出mask id。
在上述技术方案的基础上，所述计算得到mask动画的相对运动坐标，具体为：
采用javascript，并基于动画节点的容器大小，计算得到mask动画的相对运动坐标。
在上述技术方案的基础上，所述动画节点的mask数量和运动时间采用props接收dur数组控制。
在上述技术方案的基础上，当动画节点使用v-model暴露出mask id之后，还包括：
创建一slot用于容纳图表，并等待图表渲染完成。
本发明提供的一种通过SVG动画封装为图表提供动效的装置，包括：
创建模块，其用于在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；
监听模块，其用于将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；
执行模块，其用于在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的mask id。
在上述技术方案的基础上，所述创建模块进行动画节点封装，具体过程包括：
在动画节点中预编写SVG的mask动画，并将mask动画中的所有坐标定义为动画节点中的内部变量；
计算得到mask动画的相对运动坐标，动画节点使用v-model暴露出mask id。
在上述技术方案的基础上，所述计算得到mask动画的相对运动坐标，具体为：
采用javascript，并基于动画节点的容器大小，计算得到mask动画的相对运动坐标。
在上述技术方案的基础上，所述动画节点的mask数量和运动时间采用props接收dur数组控制。
在上述技术方案的基础上，当动画节点使用v-model暴露出mask id之后，还包括：创建一slot用于容纳图表，并等待图表渲染完成。
与现有技术相比，本发明的优点在于：通过SVG动画，封装成图表动效组件，来弥补当前市面上图表库无法便捷的做出动效的问题，有效避免了复杂动画代码逻辑，极大的降低了对访问者机器性能的消耗，提高了动效的复用和易用性。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例中一种通过SVG动画封装为图表提供动效的方法的流程图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请的一部分实施例，而不是全部的实施例。
参见图1所示，本发明实施例提供一种通过SVG动画封装为图表提供动效的方法，通过SVG动画，封装成图表动效组件，来弥补当前市面上图表库无法便捷的做出动效的问题，有效避免了复杂动画代码逻辑，极大的降低了对访问者机器性能的消耗，提高了动效的复用和易用性。具体包括以下步骤：
S1：在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；Vue是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。动画节点为SVG封装之后提供任意图表库存放展示以及布局的一种响应式容器节点。
本发明实施例中，进行动画节点封装，具体步骤包括：
S101：在动画节点中预编写SVG的mask(蒙版)动画，并将mask动画中的所有坐标定义为动画节点中的内部变量；
S102：计算得到mask动画的相对运动坐标，动画节点使用v-model暴露出mask id(DOM文档中唯一标识)。v-model用于实现表单元素和数据的双向绑定。
本发明实施例中，计算得到mask动画的相对运动坐标，具体为：采用javascript，并基于动画节点的容器大小，计算得到mask动画的相对运动坐标，从而完成一个可以循环的动画效果。
动画节点的mask数量和运动时间采用props(子组件访问父组件数据的唯一接口)接收dur数组控制。当动画节点使用v-model暴露出mask id之后，还包括：创建一slot(插槽)用于容纳图表，并等待图表渲染完成。
S2：将图表渲染DOM(Document Object Model，文档对象模型)指定为动画节点，并对图表渲染完成事件进行监听；
S3：在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的mask id。
以下结合折线图表的折线需要一个扫光动效为例子来对上述通过SVG动画封装为图表提供动效的方法进行具体说明。
1、在Vue项目中创建一个标准组件；
2、开始封装flowingLight节点，该节点也是图表布局容器，用于为自己容器下的折线图提供扫光动效；封装动画flowingLight节点的具体步骤包括：
(1)创建一个SVG视图(以下简称an-1)，将SVG视图中的画布width(宽)、height(高)、ref改为flowingLight节点内部定义的变量，确保能自适应父元素大小，ref为随机标识符ref-xx，用于确保每次引用flowingLight节点时动画的定义是唯一的；
(2)在an-1中创建defs元素，并在其下创建linearGradient元素，做一个白色的线性渐变，将其中的linearGradient id套用步骤(1)中的ref-xx并变型为ref-xx-lg；
(3)继续在步骤(2)中的defs里创建mask元素，并在其下创建rect元素，将mask id套用步骤(1)中的ref-xx并变型为ref-xx-mk，通过v-model向flowingLight节点外暴露mask id备用；
(4)设置步骤(3)中rect元素的fill属性值为ref-xx-lg，并将rect上的width除以2留出水平移动的动画空间，height保持an-1一致；
(5)rect元素下创建animateTransform元素，创建一个由左向右的位移动画，使用an-1中的-width到width做一个x方向的水平位移，通过props接收dur为动画时间；
(6)在flowingLight节点内，与an-1同层级创建一个slot插槽，用于容纳图表。
3、经过步骤2，一个通用的flowingLight节点封装完成；
4、实际使用时，先在Vue的template中引入flowingLight节点(fl-1)，这时flowingLigth中的动画实际已经开始，但由于遮罩的关系是看不出效果的，需等待图表的创建。
5、使用任意图表库在f1-1中创建一个SVG折线图(chart-1)，利用图表库中的图表渲染完成事件触发一个DOM操作，将图表中的折线部分DOM找到后，加上flowingLigth节点通过v-model抛出的mask id；
6、折线图线条上将会出现扫光动效。
SVG各元素能像普通DOM节点一样访问，同时SVG动画元素或CSS动画都可以对SVG的最终效果做互补，可以做出更加丰富的动效，并且不需要复杂的处理逻辑；由机器自动处理的动画，远比程序实现的动画，对性能上的需求大大降低，提高了动效的流畅度，带来更多视觉上的用户体验。同时还能兼容各种图表库，当封装不同的动画后，开发人员可以方便给图表更换不同的效果，极大地减少了复杂重复的开发量。
本发明实施例的通过SVG动画封装为图表提供动效的方法，通过SVG动画，封装成图表动效组件，来弥补当前市面上图表库无法便捷的做出动效的问题，有效避免了复杂动画代码逻辑，极大的降低了对访问者机器性能的消耗，提高了动效的复用和易用性。
在一种可能的实施方式中，本发明实施例还提供一种可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述所述的通过SVG动画封装为图表提供动效的方法的步骤。
存储介质可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是但不限于：电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。
计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言或其组合来编写用于执行本发明操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
本发明实施例提供的一种通过SVG动画封装为图表提供动效的装置，包括创建模块、监听模块和执行模块。创建模块用于在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；监听模块用于将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；执行模块用于在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的mask id。
本发明实施例中，创建模块进行动画节点封装，具体过程包括：
在动画节点中预编写SVG的mask动画，并将mask动画中的所有坐标定义为动画节点中的内部变量；
计算得到mask动画的相对运动坐标，动画节点使用v-model暴露出mask id。
本发明实施例中，计算得到mask动画的相对运动坐标，具体为：采用javascript，并基于动画节点的容器大小，计算得到mask动画的相对运动坐标。
本发明实施例中，动画节点的mask数量和运动时间采用props接收dur数组控制。当动画节点使用v-model暴露出mask id之后，还包括：创建一slot用于容纳图表，并等待图表渲染完成。
以上所述仅是本申请的具体实施方式，使本领域技术人员能够理解或实现本申请。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所申请的原理和新颖特点相一致的最宽的范围。
本发明是参照根据本发明实施例的方法、设备(系统)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

Claims (10)

1.一种通过SVG动画封装为图表提供动效的方法，其特征在于，具体包括以下步骤：
在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；
将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；
在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的maskid。
2.如权利要求1所述的一种通过SVG动画封装为图表提供动效的方法，其特征在于，所述进行动画节点封装，具体步骤包括：
在动画节点中预编写SVG的mask动画，并将mask动画中的所有坐标定义为动画节点中的内部变量；
计算得到mask动画的相对运动坐标，动画节点使用v-model暴露出mask id。
3.如权利要求2所述的一种通过SVG动画封装为图表提供动效的方法，其特征在于，所述计算得到mask动画的相对运动坐标，具体为：
采用javascript，并基于动画节点的容器大小，计算得到mask动画的相对运动坐标。
4.如权利要求3所述的一种通过SVG动画封装为图表提供动效的方法，其特征在于：所述动画节点的mask数量和运动时间采用props接收dur数组控制。
5.如权利要求2所述的一种通过SVG动画封装为图表提供动效的方法，其特征在于，当动画节点使用v-model暴露出mask id之后，还包括：
创建一slot用于容纳图表，并等待图表渲染完成。
6.一种通过SVG动画封装为图表提供动效的装置，其特征在于，包括：
创建模块，其用于在Vue项目中创建一个标准组件，并基于创建的标准组件进行动画节点封装；
监听模块，其用于将图表渲染DOM指定为动画节点，并对图表渲染完成事件进行监听；
执行模块，其用于在图表渲染完成事件中操作图表中需要附加动画的元素，并在所述元素中插入动画节点抛出的mask id。
7.如权利要求6所述的一种通过SVG动画封装为图表提供动效的装置，其特征在于，所述创建模块进行动画节点封装，具体过程包括：
在动画节点中预编写SVG的mask动画，并将mask动画中的所有坐标定义为动画节点中的内部变量；
计算得到mask动画的相对运动坐标，动画节点使用v-model暴露出mask id。
8.如权利要求7所述的一种通过SVG动画封装为图表提供动效的装置，其特征在于，所述计算得到mask动画的相对运动坐标，具体为：
采用javascript，并基于动画节点的容器大小，计算得到mask动画的相对运动坐标。
9.如权利要求8所述的一种通过SVG动画封装为图表提供动效的装置，其特征在于：所述动画节点的mask数量和运动时间采用props接收dur数组控制。
10.如权利要求7所述的一种通过SVG动画封装为图表提供动效的装置，其特征在于，当动画节点使用v-model暴露出mask id之后，还包括：创建一slot用于容纳图表，并等待图表渲染完成。
CN202210090041.9A 2022-01-25 2022-01-25 一种通过svg动画封装为图表提供动效的方法及装置 Pending CN114510240A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202210090041.9A CN114510240A (zh) 2022-01-25 2022-01-25 一种通过svg动画封装为图表提供动效的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210090041.9A CN114510240A (zh) 2022-01-25 2022-01-25 一种通过svg动画封装为图表提供动效的方法及装置

Publications (1)

Publication Number Publication Date
CN114510240A true CN114510240A (zh) 2022-05-17

Family

ID=81550347

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210090041.9A Pending CN114510240A (zh) 2022-01-25 2022-01-25 一种通过svg动画封装为图表提供动效的方法及装置

Country Status (1)

Country Link
CN (1) CN114510240A (zh)

Similar Documents

Publication Publication Date Title
CN102073502B (zh) 一种利用web原生布局进行页面渲染的方法及装置
CN110489116B (zh) 一种页面的渲染方法、装置及计算机存储介质
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
CN104216691B (zh) 一种创建应用的方法及装置
JP5209051B2 (ja) データシステム及び方法
CN107656759B (zh) 一种用于用户界面的渲染方法和装置
US20150169318A1 (en) Method and system for modifying deployed applications
CN106933887B (zh) 一种数据可视化方法及装置
CN110908712A (zh) 移动端跨平台的数据处理方法和设备
JP2008033941A (ja) 三次元キャラクタ・アニメーションを表すオペレータ・グラフの効率的処理
US20080303826A1 (en) Methods and Systems for Animating Displayed Representations of Data Items
CN110188153B (zh) 一种基于IFC扩展数据的WebGIS发布方法
CN111951356B (zh) 基于json数据格式的动画渲染方法
CN103377039A (zh) 一种网页游戏开发、解析方法、一种编辑器以及解析装置
CN112364496B (zh) 基于html5和vue技术的航电仿真面板生成系统
WO2024056100A1 (zh) 页面渲染方法、装置、设备、存储介质及计算机程序产品
CN114546364A (zh) 一种可视化图表组件的配置方法
CN110909896A (zh) 一种可视化运维监控方法及装置
CN113536179A (zh) 页面的生成方法、装置、电子设备和存储介质
KR20150106846A (ko) 표시 장치에서의 그래픽 렌더링 및 그와 관련된 개선
CN114924712A (zh) 一种基于域控制器平台的aui模块化实现方法及系统
CN111240676A (zh) 一种生成骨架屏的代码的方法及装置
CN114510240A (zh) 一种通过svg动画封装为图表提供动效的方法及装置
EP4006662A1 (en) System and method supporting graphical programming based on neuron blocks, and storage medium
CN107391158B (zh) 一种基于iDataTable封装实现表格绘制的方法及设备

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