一种动画效果处理方法、系统及装置制造方法及图纸

本发明专利技术公开了一种动画效果处理方法、系统及装置，所述方法包括以下步骤：生成贝塞尔曲线；根据贝塞尔曲线，依次获取贝塞尔曲线经过的像素点的坐标，在每次获取新的像素点的坐标后，根据新的像素点的坐标更新坐标集合；每当坐标集合更新设定次数后，根据当前的坐标集合更新目标线条。本发明专利技术将贝塞尔曲线所经过的像素点的坐标作为坐标集合，并根据坐标集合生成目标线条，每当坐标集合更新若干次后，更新目标线条，使得目标线条在不同的位置呈现不同的形状，从而得到目标线条贴合贝塞尔曲线运动的效果，相对于现有技术目标线条更加流畅生动，大大提升了显示效果。本发明专利技术可以广泛应用于前端开发领域。

【技术实现步骤摘要】
一种动画效果处理方法、系统及装置
本专利技术涉及前端开发领域，尤其是一种动画效果处理方法、系统及装置。
技术介绍
随着人机交互技术的普及，人机交互界面应用在人们生活中的方方面面。为了让人机交互界面看起来更加漂亮，设计师会在设计人机交互界面时，加入动画元素。如果要实现某个对象沿一定轨迹移动的动画，如空调气流流线的运动，则目前有两种主要的实现方法。第一种方案：其通过在软件中添加数十张或者上百张的图像帧来实现动画的流畅播放，但是这样的方案会大量增加程序的体积，浪费用户的网络流量和时间。同时采用这样的方案的在运行时需要占用大量内存，容易造成程序崩溃。再者这样的方案在生成后无法修改，如果需要修改动画，只能设计一套新的帧动画，耗费大量人力。由于第一种方案存在比较多的缺陷，因此有人提出了第二种方案：其基于贝塞尔曲线公式，以贝塞尔曲线作为图片(例如图标或者图形渲染物)的运动轨迹，其实质上是通过将图片沿着贝塞尔曲线作运动。但是这种方案存在一个问题，如图片等是具有形状，而这样的方案无法保证图片在运动过程中的方向性，因而无法做到让图片本身与贝塞尔曲线完全重合。在显示空调气流流线这样的应用场景，该技术方案只能做到让图片硬邦邦地沿着贝塞尔曲线移动。如果图片为直线，其动画显示效果如图1所示，用户会看到一个竖直线在沿着贝塞尔曲线运动，即沿着图中的虚线运动，在整个过程中，直线的形状不会发生任何变化，因而不能形成一个完全与贝塞尔曲线重合的空气流动效果，显示效果较差。
技术实现思路
为解决上述技术问题，本专利技术的目的在于：提供一种提升动画显示效果的动画处理方法、系统和存储介质。本专利技术所采取的第一种技术方案是：一种动画效果处理方法，包括以下步骤：生成贝塞尔曲线；根据贝塞尔曲线，依次获取贝塞尔曲线经过的像素点的坐标，在每次获取新的像素点的坐标后，根据新的像素点的坐标更新坐标集合；每当坐标集合更新设定次数后，根据当前的坐标集合更新目标线条。进一步，还包括以下步骤：获取目标线条的移动速度参数；根据目标线条的移动速度参数，控制获取贝塞尔曲线经过的像素点的坐标的时间间隔。进一步，还包括以下步骤：获取目标线条的长度参数；所述根据新的像素点的坐标更新坐标集合，其具体为：根据新的像素点的坐标和目标线条的长度参数，更新坐标集合。进一步，所述根据新的像素点的坐标和目标线条的长度参数，更新坐标集合，其具体包括：判断当前的坐标集合中元素的数量是否大于长度参数；若是，则删除当前的坐标集合中的头部元素，并将新的像素点的坐标作为尾部元素插入；反之，则直接将新的像素点的坐标作为尾部元素插入。进一步，所述根据当前的坐标集合更新目标线条，其具体为：根据当前的坐标集合中的所有坐标点，绘制新的目标线条，以更新动画的画面帧。进一步，还包括以下步骤：获取目标线条的效果配置参数；根据效果配置参数，配置构成目标线条的每一个像素点的颜色和/或透明度。进一步，所述生成贝塞尔曲线，其具体包括：获取起点坐标、拐点坐标和终点坐标；根据起点坐标、拐点坐标和终点坐标，调用二阶的贝塞尔公式生成贝塞尔曲线。进一步，所述目标线条由SurfaceView类生成。本专利技术所采用的第二种技术方案是：一种动画效果处理系统，包括：生成模块，用于生成贝塞尔曲线；坐标集合处理模块，用于根据贝塞尔曲线，依次获取贝塞尔曲线经过的像素点的坐标，在每次获取新的像素点的坐标后，根据新的像素点的坐标更新坐标集合；目标线条处理模块，用于每当坐标集合更新设定次数后，根据当前的坐标集合更新目标线条。本专利技术所采用的第三种技术方案是：一种动画效果处理装置，包括：至少一个存储器，用于存储程序；至少一个处理器，用于加载所述程序以执行所述的动画效果处理方法。本专利技术的有益效果是：本专利技术将贝塞尔曲线所经过的像素点的坐标作为坐标集合，并根据坐标集合生成目标线条，每当坐标集合更新若干次后，更新目标线条，使得目标线条在不同的位置呈现不同的形状，从而得到目标线条贴合贝塞尔曲线运动的效果，相对于现有技术目标线条更加流畅生动，大大提升了显示效果。附图说明图1为现有技术中图片按照贝塞尔曲线运动的示意图；图2为本专利技术一种具体实施例的动画效果的处理方法的流程图；图3为本专利技术一种具体实施例中贝塞尔曲线与其经过的像素点的示意图；图4为本专利技术一种具体实施例中动画效果的处理方法的效果示意图。具体实施方式下面结合说明书附图和具体的实施例对本专利技术进行进一步的说明。参照图2，本实施例公开了一种动画效果处理方法，其包括以下步骤：S101、生成贝塞尔曲线。其中，所述贝塞尔曲线由贝塞尔公式生成，贝塞尔公式由下式表示：其中，P表示定义贝塞尔曲线的多个点，其包括起点、终点和若干个拐点。只要确定起点坐标、拐点坐标和终点坐标，即可通过贝塞尔公式确定一条贝塞尔曲线。因此在本实施例中，需要获取起点坐标、拐点坐标和终点坐标，然后调用贝塞尔公式来进行贝塞尔曲线的生成。所述起点坐标、拐点坐标和终点坐标可以是预置于程序中的，也可以是有用户的操作指令所决定的。例如本实施例可以接收用户输入的坐标数据来作为起点坐标、拐点坐标和终点坐标；也可以根据用户的对设区域的拖拽来确定起点坐标、拐点坐标和终点坐标；当然贝塞尔曲线的起点坐标、拐点坐标和终点坐标也可以由系统根据传感器采集的数据或者用户的输入数据经过运算得到的。S102、根据贝塞尔曲线，依次获取贝塞尔曲线经过的像素点的坐标，在每次获取新的像素点的坐标后，根据新的像素点的坐标更新坐标集合。参照图3，本实施例中的贝塞尔曲线S，依次经过第一像素点A1、第二像素点A2、第三像素点A3和第四像素点A4，其中第一像素点A1的坐标为(1,1)；第二像素点A2的坐标为(1,2)；第三像素点A3的坐标为(2,2)；第四像素点A4的坐标为(3,2)。那么在本实施例中，会首先获取第一像素点A1的坐标，坐标集合被更新为{(1,1)}；然后再获取第二像素点A2的坐标；坐标集合被更新为{(1,1)，(1,2)}；如此类推，在经过四次获取像素点的坐标后，坐标集合变为{(1,1)，(1,2)，(2,2)，(3,2)}。而坐标集合中的坐标点，实际上是贝塞尔曲线所经过的若干个连续的像素点的集合。在本实施例中，可以通过估值器来估算贝塞尔曲线所经过的像素点的坐标。估值器会从贝塞尔曲线的起点坐标开始，依次估算贝塞尔曲线所经过的像素点的坐标。在本实施例中，估值器每次被调用，均会给出一个新的坐标，直到估值器给出终点坐标。当然，也可以将估值器配置为每间隔一段时间给出一个坐标。S103、每当坐标集合更新设定次数后，根据当前的坐标集合更新目标线条。在本实施例中，可以通过控制获取像素点的坐标的频率和目标线条的更新频率来确定目标线条的运动速度。在一些实施例中，每秒获取25个新的像素点的坐标，坐标集合每次更新后，目标线条均会更新一次，那么动画的帧率为25帧每秒，在每一帧画面中，目标线条均移动1个像素点，目标线条每秒移动25个像素点。在另一些实施例中，每秒获取100个新的像素点的坐标，坐标集合每更新4次后，目标线条更新一次。那么动画的帧率为25帧每秒，在每一帧画面中，目标线条移动4个像素点，每秒移动100个像素点。当然，在本实施例中，目标线条是根据坐标集合中的坐标点去进行绘制的。在一些实施例中，可以根据坐标集合中的全部元素本文档来自技高网...

【技术保护点】
1.一种动画效果处理方法，其特征在于：包括以下步骤：生成贝塞尔曲线；根据贝塞尔曲线，依次获取贝塞尔曲线经过的像素点的坐标，在每次获取新的像素点的坐标后，根据新的像素点的坐标更新坐标集合；每当坐标集合更新设定次数后，根据当前的坐标集合更新目标线条。

【技术特征摘要】
1.一种动画效果处理方法，其特征在于：包括以下步骤：生成贝塞尔曲线；根据贝塞尔曲线，依次获取贝塞尔曲线经过的像素点的坐标，在每次获取新的像素点的坐标后，根据新的像素点的坐标更新坐标集合；每当坐标集合更新设定次数后，根据当前的坐标集合更新目标线条。2.根据权利要求1所述的一种动画效果处理方法，其特征在于：还包括以下步骤：获取目标线条的移动速度参数；根据目标线条的移动速度参数，控制获取贝塞尔曲线经过的像素点的坐标的时间间隔。3.根据权利要求1所述的一种动画效果处理方法，其特征在于：还包括以下步骤：获取目标线条的长度参数；所述根据新的像素点的坐标更新坐标集合，其具体为：根据新的像素点的坐标和目标线条的长度参数，更新坐标集合。4.根据权利要求3所述的一种动画效果处理方法，其特征在于：所述根据新的像素点的坐标和目标线条的长度参数，更新坐标集合，其具体包括：判断当前的坐标集合中元素的数量是否大于长度参数；若是，则删除当前的坐标集合中的头部元素，并将新的像素点的坐标作为尾部元素插入；反之，则直接将新的像素点的坐标作为尾部元素插入。5.根据权利要求1所述的一种动画效果处理方法，其特征在于：所述根据当前的坐标集合更新...

【专利技术属性】
技术研发人员：林国坤，孙晓波，
申请(专利权)人：广州小鹏汽车科技有限公司，
类型：发明
国别省市：广东,44