基于canvas元素的动画效果设计系统及其方法与流程

本申请涉及智能化设计领域，且更为具体地，涉及一种基于canvas元素的动画效果设计系统及其方法。

背景技术：

1、随着互联网的快速发展和迅速普及，目前web技术越来越流行，因为其跨端优势以及灵活开发、热更新等优势占据了目前相当部分的市场。而基于canvas画布可以在web浏览器中去实现一些带有交互的动态的效果，这是图片以及视频无法代替的。例如，当需要实现珊瑚特效，每根触手都带有蠕动效果以及可点击交互，这时针对此类需要有动画效果以及交互能力的场景，这就需要基于canvas去实现。

2、因此，期待一种基于canvas元素的动画效果设计系统。

技术实现思路

1、为了解决上述技术问题，提出了本申请。本申请的实施例提供了一种基于canvas元素的动画效果设计系统及其方法。该系统包括：申明模块，用于申明一个canvas元素并生成背景效果；初始化模块，用于初始化所述canvas元素的基础静态字段信息；贝塞尔曲线生成模块，用于基于贝塞尔曲线规则，生成4次或5次贝塞尔曲线；偏移值计算模块，用于计算所述贝塞尔曲线蠕动动画所需要的偏移值；文字绘制模块，用于绘制蠕动的所述贝塞尔曲线上的文字；点亮模块，用于点亮所述贝塞尔曲线；以及，监听事件添加模块，用于添加所述贝塞尔曲线的监听事件。通过这样的方式，生成背景效果。

2、根据本申请的一个方面，提供了一种基于canvas元素的动画效果设计系统，其包括：申明模块，用于申明一个canvas元素并生成背景效果；初始化模块，用于初始化所述canvas元素的基础静态字段信息；贝塞尔曲线生成模块，用于基于贝塞尔曲线规则，生成4次或5次贝塞尔曲线；偏移值计算模块，用于计算所述贝塞尔曲线蠕动动画所需要的偏移值；文字绘制模块，用于绘制蠕动的所述贝塞尔曲线上的文字；点亮模块，用于点亮所述贝塞尔曲线；以及监听事件添加模块，用于添加所述贝塞尔曲线的监听事件。

3、在上述的基于canvas元素的动画效果设计系统中，所述初始化模块，包括：文本描述获取单元，用于获取期待实现动画特效的文本描述；分词单元，用于对所述期待实现动画特效的文本描述进行分词处理后以得到特效描述词的序列；词嵌入编码单元，用于将所述特效描述词的序列通过词嵌入层以得到特效描述词特征向量的序列；上下文编码单元，用于将所述特效描述词特征向量的序列通过基于转换器的上下文编码器以得到特效语义理解特征向量；以及解码单元，用于将所述特效语义理解特征向量通过解码器以得到解码值，所述解码值用于表示基础静态字段信息的设置值。

4、在上述的基于canvas元素的动画效果设计系统中，所述上下文编码单元，包括：上下文编码子单元，用于将所述特效描述词特征向量的序列通过所述基于转换器的上下文编码器以得到多个上下文特效描述词特征向量；因数计算子单元，用于计算所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数；加权子单元，用于以所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数作为权重，对所述各个上下文特效描述词特征向量进行加权以得到多个加权后上下文特效描述词特征向量；以及级联子单元，用于将所述多个加权后上下文特效描述词特征向量进行级联以得到所述特效语义理解特征向量。

5、在上述的基于canvas元素的动画效果设计系统中，所述因数计算子单元，用于：以如下因数计算公式计算所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数；其中，所述因数计算公式为：，其中，是所述每个上下文特效描述词特征向量，且表示向量的二范数的平方，是所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数，表示函数，表示函数。

6、在上述的基于canvas元素的动画效果设计系统中，所述基础静态字段信息包括dpr、increaseangle、startangle、center、raduis、fps、curvenum、lightupindex、lightupindex、curves和canvas。

7、在上述的基于canvas元素的动画效果设计系统中，所述文字绘制模块，用于：设定好所述文字显示的位置以及文字大小；以及基于勾股定理和三角函数计算每次两个方向的偏移量，以确定所述文字的最终x坐标和y坐标。

8、在上述的基于canvas元素的动画效果设计系统中，所述点亮模块，用于：根据设定的高亮时间，通过定时器轮询所有的所述贝塞尔曲线，随机分别轮流点亮任意一根所述贝塞尔曲线。

9、根据本申请的另一个方面，提供了一种基于canvas元素的动画效果设计方法，其包括：申明一个canvas元素并生成背景效果；初始化所述canvas元素的基础静态字段信息；基于贝塞尔曲线规则，生成4次或5次贝塞尔曲线；计算所述贝塞尔曲线蠕动动画所需要的偏移值；绘制蠕动的所述贝塞尔曲线上的文字；点亮所述贝塞尔曲线；以及添加所述贝塞尔曲线的监听事件。

10、在上述的基于canvas元素的动画效果设计方法中，初始化所述canvas元素的基础静态字段信息，包括：获取期待实现动画特效的文本描述；对所述期待实现动画特效的文本描述进行分词处理后以得到特效描述词的序列；将所述特效描述词的序列通过词嵌入层以得到特效描述词特征向量的序列；将所述特效描述词特征向量的序列通过基于转换器的上下文编码器以得到特效语义理解特征向量；以及将所述特效语义理解特征向量通过解码器以得到解码值，所述解码值用于表示基础静态字段信息的设置值。

11、在上述的基于canvas元素的动画效果设计方法中，将所述特效描述词特征向量的序列通过基于转换器的上下文编码器以得到特效语义理解特征向量，包括：将所述特效描述词特征向量的序列通过所述基于转换器的上下文编码器以得到多个上下文特效描述词特征向量；计算所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数；以所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数作为权重，对所述各个上下文特效描述词特征向量进行加权以得到多个加权后上下文特效描述词特征向量；以及将所述多个加权后上下文特效描述词特征向量进行级联以得到所述特效语义理解特征向量。

12、与现有技术相比，本申请提供的基于canvas元素的动画效果设计系统及其方法，该系统包括：申明模块，用于申明一个canvas元素并生成背景效果；初始化模块，用于初始化所述canvas元素的基础静态字段信息；贝塞尔曲线生成模块，用于基于贝塞尔曲线规则，生成4次或5次贝塞尔曲线；偏移值计算模块，用于计算所述贝塞尔曲线蠕动动画所需要的偏移值；文字绘制模块，用于绘制蠕动的所述贝塞尔曲线上的文字；点亮模块，用于点亮所述贝塞尔曲线；以及，监听事件添加模块，用于添加所述贝塞尔曲线的监听事件。通过这样的方式，生成背景效果。

技术特征：

1.一种基于canvas元素的动画效果设计系统，其特征在于，包括：申明模块，用于申明一个canvas元素并生成背景效果；初始化模块，用于初始化所述canvas元素的基础静态字段信息；贝塞尔曲线生成模块，用于基于贝塞尔曲线规则，生成4次或5次贝塞尔曲线；偏移值计算模块，用于计算所述贝塞尔曲线蠕动动画所需要的偏移值；文字绘制模块，用于绘制蠕动的所述贝塞尔曲线上的文字；点亮模块，用于点亮所述贝塞尔曲线；以及监听事件添加模块，用于添加所述贝塞尔曲线的监听事件。

2.根据权利要求1所述的基于canvas元素的动画效果设计系统，其特征在于，所述初始化模块，包括：文本描述获取单元，用于获取期待实现动画特效的文本描述；分词单元，用于对所述期待实现动画特效的文本描述进行分词处理后以得到特效描述词的序列；词嵌入编码单元，用于将所述特效描述词的序列通过词嵌入层以得到特效描述词特征向量的序列；上下文编码单元，用于将所述特效描述词特征向量的序列通过基于转换器的上下文编码器以得到特效语义理解特征向量；以及解码单元，用于将所述特效语义理解特征向量通过解码器以得到解码值，所述解码值用于表示基础静态字段信息的设置值。

3.根据权利要求2所述的基于canvas元素的动画效果设计系统，其特征在于，所述上下文编码单元，包括：上下文编码子单元，用于将所述特效描述词特征向量的序列通过所述基于转换器的上下文编码器以得到多个上下文特效描述词特征向量；因数计算子单元，用于计算所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数；加权子单元，用于以所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数作为权重，对所述各个上下文特效描述词特征向量进行加权以得到多个加权后上下文特效描述词特征向量；以及级联子单元，用于将所述多个加权后上下文特效描述词特征向量进行级联以得到所述特效语义理解特征向量。

4.根据权利要求3所述的基于canvas元素的动画效果设计系统，其特征在于，所述因数计算子单元，用于：以如下因数计算公式计算所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数；其中，所述因数计算公式为：，其中，是所述每个上下文特效描述词特征向量，且表示向量的二范数的平方，是所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数，表示函数，表示函数。

5.根据权利要求4所述的基于canvas元素的动画效果设计系统，其特征在于，所述基础静态字段信息包括dpr、increaseangle、startangle、center、raduis、fps、curvenum、lightupindex、lightupindex、curves和canvas。

6.根据权利要求5所述的基于canvas元素的动画效果设计系统，其特征在于，所述文字绘制模块，用于：设定好所述文字显示的位置以及文字大小；以及基于勾股定理和三角函数计算每次两个方向的偏移量，以确定所述文字的最终x坐标和y坐标。

7.根据权利要求6所述的基于canvas元素的动画效果设计系统，其特征在于，所述点亮模块，用于：根据设定的高亮时间，通过定时器轮询所有的所述贝塞尔曲线，随机分别轮流点亮任意一根所述贝塞尔曲线。

8.一种基于canvas元素的动画效果设计方法，其特征在于，包括：申明一个canvas元素并生成背景效果；初始化所述canvas元素的基础静态字段信息；基于贝塞尔曲线规则，生成4次或5次贝塞尔曲线；计算所述贝塞尔曲线蠕动动画所需要的偏移值；绘制蠕动的所述贝塞尔曲线上的文字；点亮所述贝塞尔曲线；以及添加所述贝塞尔曲线的监听事件。

9.根据权利要求8所述的基于canvas元素的动画效果设计方法，其特征在于，初始化所述canvas元素的基础静态字段信息，包括：获取期待实现动画特效的文本描述；对所述期待实现动画特效的文本描述进行分词处理后以得到特效描述词的序列；将所述特效描述词的序列通过词嵌入层以得到特效描述词特征向量的序列；将所述特效描述词特征向量的序列通过基于转换器的上下文编码器以得到特效语义理解特征向量；以及将所述特效语义理解特征向量通过解码器以得到解码值，所述解码值用于表示基础静态字段信息的设置值。

10.根据权利要求9所述的基于canvas元素的动画效果设计方法，其特征在于，将所述特效描述词特征向量的序列通过基于转换器的上下文编码器以得到特效语义理解特征向量，包括：将所述特效描述词特征向量的序列通过所述基于转换器的上下文编码器以得到多个上下文特效描述词特征向量；计算所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数；以所述每个上下文特效描述词特征向量的基于凸分解的特征几何度量的逐片近似因数作为权重，对所述各个上下文特效描述词特征向量进行加权以得到多个加权后上下文特效描述词特征向量；以及将所述多个加权后上下文特效描述词特征向量进行级联以得到所述特效语义理解特征向量。

技术总结
公开了一种基于canvas元素的动画效果设计系统及其方法。该系统包括：申明模块，用于申明一个canvas元素并生成背景效果；初始化模块，用于初始化所述canvas元素的基础静态字段信息；贝塞尔曲线生成模块，用于基于贝塞尔曲线规则，生成4次或5次贝塞尔曲线；偏移值计算模块，用于计算所述贝塞尔曲线蠕动动画所需要的偏移值；文字绘制模块，用于绘制蠕动的所述贝塞尔曲线上的文字；点亮模块，用于点亮所述贝塞尔曲线；以及，监听事件添加模块，用于添加所述贝塞尔曲线的监听事件。通过这样的方式，生成背景效果。

技术研发人员：陈振飞,陈闻起,潘琴荣,李金霞,信华杰,曾星
受保护的技术使用者：杭州水务数智科技股份有限公司
技术研发日：
技术公布日：2024/1/15