开云优惠体育网页版入口

专利名称：一种基于贝塞尔曲线的组件位移方法、系统、设备及介质

专利类型：发明专利

专利申请号：CN202411258956.1

专利申请（专利权）人：海看网络开云优惠体育网页版入口(山东)股份有限公司
权利人地址：山东省济南市经十路18567号新广电中心大楼六楼

专利发明（设计）人：谢汝滨,王朋,许强,隆龙,王光永

专利摘要：本发明公开了一种基于贝塞尔曲线的组件位移方法、系统、设备及介质，涉及组件位移技术领域，方法包括：创建贝塞尔曲线路径以及待添加动画的目标组件，将所述贝塞尔曲线路径对应的对象转化为定点数组；为目标组件创建拖动手势以及定时帧动画，使目标组件沿贝塞尔曲线自主动画；在接收到拖动手势指令时，停止自主动画并开始执行拖动手势操作；监测拖动手势是否继续，若是，则获取目标组件的落点坐标与定点数组内每个坐标的最小值，并获取对应的定点坐标A，将目标组件修正至定点坐标A。可实现自动动画与手动拖动的无缝衔接，规避了传统iOS客户端组件位移动画行为模式较为单一的弊端，实现了动控制动画进程的需求，提升了用户体验。

主权利要求：
1.一种基于贝塞尔曲线的组件位移方法，其特征在于，所述方法包括以下步骤：步骤S1：创建贝塞尔曲线路径以及待添加动画的目标组件，将所述贝塞尔曲线路径对应的对象转化为定点数组；
步骤S2：为所述目标组件创建拖动手势以及定时帧动画，使所述目标组件沿所述贝塞尔曲线路径自主动画；
步骤S3：在接收到拖动手势指令时，停止自主动画并开始执行拖动手势操作；
步骤S4：监测拖动手势是否继续，若是，则获取所述目标组件的落点坐标与所述定点数组内每个坐标的最小值，并获取对应的定点坐标A，将所述目标组件修正至所述定点坐标A；
获取对应的定点坐标A的过程，具体为：获取所述定点数组内第一个定点坐标与落点坐标的第一距离差，默认当前定点坐标为目标定点坐标，当前第一距离差为最小距离；判断所述定点数组内是否还有数据，若否，则确定当前目标定点坐标为定点坐标A保持不变；若是，则通过hypot函数计算下一个定点坐标与落点坐标的第二距离差；判断所述第二距离差是否小于所述最小距离，若是，则将当前定点坐标设置为定点坐标A。
2.根据权利要求1所述的一种基于贝塞尔曲线的组件位移方法，其特征在于，所述方法还包括：将所述目标组件的中心点置于所述贝塞尔曲线路径的起始位置处；
使用iOS系统内置的定时器系统为所述目标组件添加定时帧动画，每一帧都将所述目标组件的中心位置调整为定点数组的下一个数据，实现动画自动播放。
3.根据权利要求2所述的一种基于贝塞尔曲线的组件位移方法，其特征在于，所述步骤S3，具体为：判断拖动手势操作处于开始状态；
使用所述定时器系统的清除属性，停止所述目标组件的帧动画，并将帧动画置空；
执行拖动手势操作，改变所述目标组件的动画进程。
4.根据权利要求1所述的一种基于贝塞尔曲线的组件位移方法，其特征在于，所述方法还包括：若所述第二距离差大于所述最小距离，则重复执行判断所述定点数组内是否还有数据的步骤。
5.根据权利要求1所述的一种基于贝塞尔曲线的组件位移方法，其特征在于，所述方法还包括：将当前定点坐标设置为定点坐标A之后，将所述第二距离差替换为所述最小距离。
6.根据权利要求1或2任意一项所述的一种基于贝塞尔曲线的组件位移方法，其特征在于，所述方法还包括：将所述目标组件修正至所述定点坐标A之后，使用iOS系统内置的定时器系统添加定时帧动画；
将所述目标组件的中心位置调整为定点数组的下一个数据，实现动画由拖动手势操作切换为自动运行。
7.一种基于贝塞尔曲线的组件位移系统，其特征在于，所述系统包括：第一创建模块，用于创建贝塞尔曲线路径以及待添加动画的目标组件，将所述贝塞尔曲线路径对应的对象转化为定点数组；
第二创建模块，用于为所述目标组件创建拖动手势以及定时帧动画，使所述目标组件沿所述贝塞尔曲线路径自主动画；
停止模块，用于在接收到拖动手势指令时，停止自主动画并开始执行拖动手势操作；
拖动执行模块，用于监测拖动手势是否继续，若是，则获取所述目标组件的落点坐标与所述定点数组内每个坐标的最小值，并获取对应的定点坐标A，将所述目标组件修正至所述定点坐标A；获取对应的定点坐标A的过程，具体为：获取所述定点数组内第一个定点坐标与落点坐标的第一距离差，默认当前定点坐标为目标定点坐标，当前第一距离差为最小距离；
判断所述定点数组内是否还有数据，若否，则确定当前目标定点坐标为定点坐标A保持不变；若是，则通过hypot函数计算下一个定点坐标与落点坐标的第二距离差；判断所述第二距离差是否小于所述最小距离，若是，则将当前定点坐标设置为定点坐标A。
8.一种基于贝塞尔曲线的组件位移设备，其特征在于，所述设备包括：至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够完成权利要求1?6任意一项所述的一种基于贝塞尔曲线的组件位移方法。
9.一种基于贝塞尔曲线的组件位移的非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令被处理器执行以用于实现权利要求1?6任意一项所述的一种基于贝塞尔曲线的组件位移方法。 说明书 : 一种基于贝塞尔曲线的组件位移方法、系统、设备及介质技术领域[0001] 本发明涉及组件位移技术领域，尤其涉及一种基于贝塞尔曲线的组件位移方法、系统、设备及介质。背景技术[0002] 目前iOS客户端开发常见的组件位移动画方式，运动轨迹较单一，常以直线、圆形等iOS系统自身限定的形式存在，在目前客户端开发追求日益多样的动画效果面前，越显单调。[0003] 现有的实现方案虽然可通过关键帧动画，导入贝塞尔曲线，实现动画效果，但是这种动画完全自动，只在限制时间内完成位移动画效果，无法通过手动干预影响动画移动进程，在某些应用场景下限制极大。因此，尚缺乏一种既能够实现贝塞尔曲线动画轨迹效果，实现动画路径多样化，规避iOS系统自身位移动画实现效果的单一化限制，又能够基于贝塞尔曲线动画路径，实现手动调整动画进程效果的组件位移实现策略。发明内容[0004] 本发明提供了一种基于贝塞尔曲线的组件位移方法、系统、设备及介质，用以解决iOS客户端开发时组件位移只能自主动画无法手动干预的技术问题。[0005] 本发明的目的，旨在提出一种解决方案，可以让用户既能够实现贝塞尔曲线动画轨迹效果，实现动画路径多样化，规避iOS系统自身位移动画实现效果的单一化限制；又能够基于贝塞尔曲线动画路径，实现手动调整动画进程效果，方便用户在组件自动位移的基础上实现手动管理；并且通过拖动手势UIPanGestureRecognizer的开始和结束状态，判断动画自动运行的开始与结束时机，实现手动与自动切换的无缝衔接。下面具体阐述本发明的具体内容。[0006] 一方面，本发明提供了一种基于贝塞尔曲线的组件位移方法，所述方法包括以下步骤：步骤S1：创建贝塞尔曲线路径以及待添加动画的目标组件，将所述贝塞尔曲线路径对应的对象转化为定点数组；步骤S2：为所述目标组件创建拖动手势以及定时帧动画，使所述目标组件沿所述贝塞尔曲线路径自主动画；步骤S3：在接收到拖动手势指令时，停止自主动画并开始执行拖动手势操作；步骤S4：监测拖动手势是否继续，若是，则获取所述目标组件的落点坐标与所述定点数组内每个坐标的最小值，并获取对应的定点坐标A，将所述目标组件修正至所述定点坐标A。[0007] 在本发明的一种实现方式中，所述方法还包括：将所述目标组件的中心点置于所述贝塞尔曲线路径的起始位置处；使用iOS系统内置的定时器系统为所述目标组件添加定时帧动画，每一帧都将所述目标组件的中心位置调整为定点数组的下一个数据，实现动画自动播放。[0008] 在本发明的一种实现方式中，所述步骤S3，具体为：判断拖动手势操作处于开始状态；使用所述定时器系统的清除属性，停止所述目标组件的帧动画，并将帧动画置空；执行拖动手势操作，改变所述目标组件的动画进程。[0009] 在本发明的一种实现方式中，所述步骤S4中，获取对应的定点坐标A的过程，具体为：获取所述定点数组内第一个定点坐标与落点坐标的第一距离差，默认当前定点坐标为目标定点坐标，当前第一距离差为最小距离；判断所述定点数组内是否还有数据，若否，则确定当前目标定点坐标为定点坐标A保持不变；若是，则通过hypot函数计算下一个定点坐标与落点坐标的第二距离差；判断所述第二距离差是否小于所述最小距离，若是，则将当前定点坐标设置为定点坐标A。[0010] 在本发明的一种实现方式中，所述方法还包括：若所述第二距离差大于所述最小距离，则重复执行判断所述定点数组内是否还有数据的步骤。[0011] 在本发明的一种实现方式中，所述方法还包括：将当前定点坐标设置为定点坐标A之后，将所述第二距离差替换为所述最小距离。[0012] 在本发明的一种实现方式中，所述方法还包括：将所述目标组件修正至所述定点坐标A之后，使用iOS系统内置的定时器系统添加定时帧动画；将所述目标组件的中心位置调整为定点数组的下一个数据，实现动画由拖动手势操作切换为自动运行。[0013] 其次，本发明还提供了一种基于贝塞尔曲线的组件位移系统，所述系统包括：第一创建模块，用于创建贝塞尔曲线路径以及待添加动画的目标组件，将所述贝塞尔曲线路径对应的对象转化为定点数组；第二创建模块，用于为所述目标组件创建拖动手势以及定时帧动画，使所述目标组件沿所述贝塞尔曲线路径自主动画；停止模块，用于在接收到拖动手势指令时，停止自主动画并开始执行拖动手势操作；拖动执行模块，用于监测拖动手势是否继续，若是，则获取所述目标组件的落点坐标与所述定点数组内每个坐标的最小值，并获取对应的定点坐标A，将所述目标组件修正至所述定点坐标A。[0014] 再其次，本发明还提供了一种基于贝塞尔曲线的组件位移设备，所述设备包括：至少一个处理器；以及，与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够完成前述的一种基于贝塞尔曲线的组件位移方法。[0015] 最后，本发明还提供了一种基于贝塞尔曲线的组件位移的非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令被处理器执行以用于实现前述的一种基于贝塞尔曲线的组件位移方法。[0016] 本发明提供的一种基于贝塞尔曲线的组件位移方法，具有以下有益效果：[0017] (1)、可实现自动动画与手动拖动的无缝衔接，既有效的规避了传统iOS客户端组件位移动画行为模式较为单一的弊端，又能够实现手动控制动画进程的需求，提升了用户体验；[0018] (2)、可以针对贝塞尔曲线的可交互性拓展出更多的解决方案，开发者可以基于本方案实现对贝塞尔曲线操作的定制化开发；[0019] (3)、通过轮询定点数组内每个定点与落点位置绝对距离差的方式，定位目标组件在贝塞尔曲线轨迹上对应的位置，完成坐标点自动修正。附图说明[0020] 此处所说明的附图用来提供对本发明的进一步理解，构成本发明的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：[0021] 图1为本发明实施例提供的一种基于贝塞尔曲线的组件位移方法流程图；[0022] 图2为本发明实施例提供的获取定点坐标A流程图；[0023] 图3为本发明实施例提供的自动动画运行示意图；[0024] 图4为本发明实施例提供的手动拖动运行示意图；[0025] 图5为本发明实施例提供的一种基于贝塞尔曲线的组件位移系统组成图；[0026] 图6为本发明实施例提供的一种基于贝塞尔曲线的组件位移设备示意图。具体实施方式[0027] 为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明具体实施例及相应的附图对本发明技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。[0028] 本发明实施例提供了一种基于贝塞尔曲线的组件位移方法、系统、设备及介质，采用获取贝塞尔曲线路径沿途定点的方案，将整个位移路径转化为一组定点，并通过该定点数组，完成对组件的自动化处理，和手动干预效果，详细流程图见图1。下面通过附图对本发明实施例提出的技术方案进行详细的说明。该方法主要包括以下步骤：[0029] 步骤S1：创建贝塞尔曲线路径以及待添加动画的目标组件，将所述贝塞尔曲线路径对应的对象转化为定点数组。[0030] 在本发明实施例中，在生产过程中，开发者会经常遇到这样一种需求，需要给用户展示一组可交互的组件，为了吸引用户注意，该目标组件通常会以附加动画的形式存在，且动画效果较复杂；而且为了便于用户自主查看，会给该目标组件添加拖动手势操作，手动操作可与自动动画实现无缝衔接。[0031] 为实现以上需求，添加一个贝塞尔曲线路径，该路径不同于普通的直线，圆形等轨迹，可通过增加起始点和途经节点来控制曲线路径，生成一个符合预期的复杂路径，并生成相应的贝塞尔曲线路径对象。[0032] 进一步地，将贝塞尔曲线路径对象转化为一个定点数组，包括起始点，节点部分，线段部分等，全部采用定点形式，抽离成一个数据数组，数组数据量越大，定点越密集，后期实现动画的精准度越高。[0033] 步骤S2：为所述目标组件创建拖动手势以及定时帧动画，使所述目标组件沿所述贝塞尔曲线路径自主动画。[0034] 在本发明实施例中，以支持iOS系统的终端设备为例，屏幕横向分辨率为375，由于其超高清屏特性，1个像素占用两个点，即iOS系统的终端设备的屏幕横向点位个数为700，为保证动画过度的流畅性，一条横跨全屏的贝塞尔曲线路径生成的定点数组，至少应包含700个数据，如果数据量过少，则会存在每次位移跨越多个点的情况，造成动画不流畅。[0035] 创建想要添加动画的目标组件，添加拖动手势，并将目标组件中心点置于贝塞尔曲线起始位置。使用iOS系统自带的定时器系统，为目标组件添加定时帧动画，每一帧都将目标组件中心位置调整为定点数组的下一个数据，实现动画自动播放；需说明的是，该定时器系统与屏幕刷新频率同步，精度较高，常用于实现帧动画效果。[0036] 步骤S3：在接收到拖动手势指令时，停止自主动画并开始执行拖动手势操作。[0037] 在本发明实施例中，当需要执行手动操作时，用户可以直接采用拖动的形式对目标组件进行操作，判断拖动手势的状态处于拖动手势操作开始状态位时，使用iOS定时器系统CADisplayLink对象的invalidate清除属性（invalidate属性为CADisplayLink对象本身属性，用于清除CADisplayLink定时器），停止帧动画，并将帧动画置为空状态，当前目标组件不再受帧动画控制，开始执行手动改变动画进程操作。[0038] 步骤S4：监测拖动手势是否继续，若是，则获取所述目标组件的落点坐标与所述定点数组内每个坐标的最小值，并获取对应的定点坐标A，将所述目标组件修正至所述定点坐标A。[0039] 在本发明实施例中，获取定点坐标A的过程，具体如图2所示，通过拖动手势获取每次拖动后位移数据，并通过位移量计算出落点在当前页面的具体坐标点。[0040] 将数组的第一个定点坐标，默认为目标定点坐标A，与当前落点通过hypot函数，函数公式为：d= ，进行平面坐标系内两个点的欧几里得距离计算，并通过abs函数进行绝对值处理，获得当前的第一距离差，默认为最小距离，需说明的是，当前默认设定的最小距离，作用是在数据轮询过程中，作为最小距离标识位，获取数组中对应的最小距离。[0041] 进一步地，判断数组中是否有下一个定点坐标，如果有则继续进行绝对距离差计算，获取当前定点与落点对应的第二距离差，需说明的是，数组轮询过程中，获取每个定点与落点对应的绝对距离差，目的是与下文的最小距离数据做对比，获取数组中对应的最小值；判断第二距离差是否小于最小距离，如是，则将当前定点坐标设置为目标定点坐标A，将第二距离差设置为最小距离，如不是则继续重复前述步骤，直到数组中没有下一个定点坐标数据。[0042] 本发明实施例中，以定点数组[（0，0），（0，1），（1,1）]，当前落点位置（0，0）为例，遍历定点数组，并逐一计算落点位置坐标与定点坐标的距离差，计算结果分别为0，1， ，可以获取到当前落点坐标与定点坐标之间的绝对距离差最小值为0，对应的定点坐标A为（0，0）。前述过程获取到的定点坐标A，即为贝塞尔曲线路径上与落点最接近的坐标A，并将目标组件中心位置调整为对应定点坐标A，实现手动拖动进程操作。这样目标组件就会在一次拖动手势过程中，沿创建好的贝塞尔曲线路径，自动修正位置。[0043] 进一步地，将定点数组内所有数据遍历完成后，通过对比计算，可以获取其中的落点坐标与定点坐标绝对距离差的最小值，并定位到该定点坐标A。[0044] 拖动手势完成后，再次使用iOS的定时器系统CADisplayLink添加定时帧动画，并将目标组件中心位置调整为定点数组的下一个数据，实现动画由手动操作无缝切换为自动运行。[0045] 在本发明实施例中，如图3所示，目标组件在自动动画阶段，会沿贝塞尔曲线抽离成数据数组进行定点移动，第一帧从P1定点位移到P2定点，第二帧从P2定点位移到P3定点，以此类推，直到最终到达Pn定点，完成整个贝塞尔曲线路径。[0046] 如图4所示，当手动拖动时，每次拖动会在页面上留下一个落点坐标C1，然后遍历数组[P1，P2……Pn]，获取到距离落点坐标C1绝对距离最近的定点坐标A，当前图示下为P6，将目标组件中心设置到P6位置，实现目标组件沿贝塞尔曲线路径手动拖动进程操作。[0047] 在本发明的另一个实施例中，可以尝试使用一种新的行为模式，不将贝塞尔曲线路径转化为定点数组，而是设计一种新的计算方法，在每次帧动画的节点，或者手动拖动的节点，判断落点位置是否在贝塞尔曲线上，如果在，则说明目标组件仍是以贝塞尔曲线路径为运行轨迹，如果不在，则以轮询的方式将落点向临近坐标位置发散，直到某一发散点位于贝塞尔曲线上，则将目标组件中心点位置置于当前发散点，即将目标组件位置修正到贝塞尔曲线路径上。如采用该方案，依然能实现目标组件沿既定轨迹位移且自主动画。[0048] 以上是本发明实施例提供的一种基于贝塞尔曲线的组件位移方法，基于同样的发明构思，本发明实施例还提供了一种基于贝塞尔曲线的组件位移系统，图5为本发明实施例提供的一种基于贝塞尔曲线的组件位移系统组成图，如图5所示，所述系统主要包括：第一创建模块501，用于创建贝塞尔曲线路径以及待添加动画的目标组件，将所述贝塞尔曲线路径对应的对象转化为定点数组；第二创建模块502，用于为所述目标组件创建拖动手势以及定时帧动画，使所述目标组件沿所述贝塞尔曲线路径自主动画；停止模块503，用于在接收到拖动手势指令时，停止自主动画并开始执行拖动手势操作；拖动执行模块504，用于监测拖动手势是否继续，若是，则获取所述目标组件的落点坐标与所述定点数组内每个坐标的最小值，并获取对应的定点坐标A，将所述目标组件修正至所述定点坐标A。[0049] 以上是本发明实施例提供的一种基于贝塞尔曲线的组件位移系统，基于同样的发明构思，本发明实施例还提供了一种基于贝塞尔曲线的组件位移设备，图6为本发明实施例提供的一种基于贝塞尔曲线的组件位移设备示意图，如图6所示，该设备主要包括：至少一个处理器601；以及，与至少一个处理器通信连接的存储器602；其中，存储器602存储有可被至少一个处理器601执行的指令，指令被至少一个处理器601执行，以使至少一个处理器601能够完成前述的一种基于贝塞尔曲线的组件位移方法。[0050] 除此之外，本发明实施例还提供了一种基于贝塞尔曲线的组件位移的非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令被处理器执行以用于实现前述的一种基于贝塞尔曲线的组件位移方法。[0051] 本发明是参照根据本发明实施例的方法、设备（系统）、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。[0052] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。[0053] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。[0054] 在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。[0055] 本发明中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。[0056] 还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。[0057] 以上所述仅为本发明的实施例而已，并不用于限制本发明。对于本领域技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本发明的权利要求范围之内。

专利地区：山东

专利申请日期：2024-09-10

专利公开日期：2024-11-29

专利公告号：CN118781231B