一种iOS平台小组件中动画的实现方法、装置、电子设备与流程

一种ios平台小组件中动画的实现方法、装置、电子设备
技术领域
1.本公开涉及ios小组件技术领域，具体而言，涉及一种ios平台小组件中动画的实现方法、装置、电子设备。


背景技术：

2.苹果公司在ios 14发布了小组件，并允许将小组件添加到主屏幕，与应用程序一起呈现。同时还发布了用于实现小组件功能的widgetkit和swiftui，widgetkit通过将小组件放在ios主屏幕和今日视图以及通过将小组件放在iphone的锁定屏幕上，让用户可以随时访问您应用程序中的内容。小组件可以保持最新状态，因此用户始终可以一目了然地了解最新信息。当他们需要更多详细信息时，小组件会将他们直接带到应用程序中的适当位置。
3.小组件具有不同的尺寸(小、中、大、特大)和配件样式，可以显示范围广泛的信息。用户可以个性化小组件以查看特定于他们需要的详细信息，并以最适合他们的方式安排他们的小组件。
4.要配置小组件，需要在应用程序中添加小组件扩展，同时，使用timeline provider配置小组件，并使用swiftui视图显示小组件的内容。widgetkit根据timeline provider更新小组件的内容。
5.但是，正如wwdc20 meet widgetkit中苹果公司强调的，小组件不是迷你应用程序，因此它们不支持基于手势的视图或动画，小组件意味着只有一目了然的信息，因此，苹果公司在ios平台仅在小组件中开放了用于时钟小组件显示的绕一个锚点旋转的动画，而无法在小组件中实现其他运动动画的显示。


技术实现要素：

6.本发明提供了一种ios平台小组件中动画的实现方法、装置、电子设备，以至少解决目前ios平台的小组件中用户指定的素材无法实现圆周运动外的其他运动的技术问题。
7.本发明提供了一种ios平台小组件中动画的实现方法，
8.所述小组件包括至少两个部件，
9.所述至少两个部件中，较上层的部件的锚点位于较下层的部件上，
10.分别配置各个部件的转速使各个部件绕自己的锚点旋转，
11.使至少一个部件在小组件中显示。
12.由于ios平台的小组件只能通过widgetkit和swiftui进行开发，而苹果公司禁止了widgetkit中的swiftui的animation功能，因此所以无法实现小组件的动画功能。唯一的例外是，由于需要向用户提供时钟小组件，而时钟的指针需要转动，因此苹果公司提供小组件中的部件绕一个锚点进行旋转的功能。而为了使小组件中可以显示部件进行绕锚点旋转以外的动画，我们需要配置至少2个部件，并通过配置两个部件的相对位置关系和转速来实现。小组件通过时钟小组件中驱动指针运动的代码驱动各个部件绕锚点旋转。_
clockhandrotationeffect是ios小组件中用于驱动指针运动的代码，也可以用于本方案中用于各个部件绕锚点旋转。上述方案解决了目前ios平台的小组件中的素材无法实现圆周运动外的其他运动的技术问题。
13.可选的，所述显示的部件包括模板部件和/或用户部件。其中用户可以根据自己的需求，将显示的部件中的用户部件替换为自己喜欢的图片、文字或其他数据，如用户可以将用户部件替换为自己喜欢的人或动物的头像，采用上述方案，解决了目前ios平台的小组件中用户指定的素材无法实现圆周运动外的其他运动的技术问题。
14.可选的，各个部件的锚点与自己的几何中心重合。采用上述方案可以保证各个部件在旋转时，部件的几何中心可以相对其锚点所在的部件静止。
15.可选的，所述显示的部件为最上层的部件。采用上述方案，便于在开发时配置各个锚点的位置和各个部件的参数。
16.进一步的，所述至少两个部件的转速和为0。采用上述方案，可以保证所有部件中，至少有一个部件在相对于小组件背景没有产生自转。
17.进一步的，所述小组件包括三个部件，最上层部件的锚点在位于中间层部件上，中间层部件的锚点位于最下层部件上。采用最少3个部件，通过配置锚点的位置和转速，可以实现最上层部件相对于小组件背景做直线往复运动。
18.进一步的，所述最上层的部件包括模板部件和/或用户部件。所述最上层的部件可以由指定的模板部件和/或用户提供的用户部件组成，用户可以根据自己的需求，将最上层的部件中的用户部件替换为自己喜欢的图片、文字或其他数据。
19.进一步的，所述用户部件为用户提供的图片素材。所述用户部件可以是用户直接上传和/或选择的图片素材不经过任何处理得到。
20.进一步的，所述用户部件也可以是用户提供的图片素材经过一定变换产生的图片素材。所述用户部件可以是用户直接上传和/或选择的图片素材经过处理得到，所述处理包括但不限于ai识别及提取、裁切、拉伸、压缩等图片处理方法。
21.上述图片素材可以是jpeg、png等格式的图片素材，也可以是gif格式的素材。同时用户提供的素材也不限于图片素材，还包括文字素材、视频素材等其他媒体形式的素材。
22.所述用户部件由模板部件根据预设的模型和/或参数从用户提供的素材中识别获取。所述模板部件中包括用于提取用户部件的模型和/或参数，用户可以通过与小组件匹配的app上传或选择自己的素材，app根据模板部件的模型和/或参数对用户提供的素材进行处理，得到与模板部件匹配的用户部件，并将模板部件和用户组合为最上层部件。
23.一种ios平台小组件中动画的实现装置，包括：
24.确定模块，用于小组件中的各个部件；
25.配置模块，用于配置各个部件的锚点和转速；
26.生成模块，用于渲染生成各个部件的动画。
27.一种电子设备，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述的ios平台小组件中动画的实现方法。
附图说明
28.此处所说明的附图用来提供对本公开的进一步理解，构成本技术的一部分，本公
开的示意性实施例及其说明用于解释本公开，并不构成对本公开的不当限定。在附图中：
29.图1是小组件中只有一个部件时，该部件进行旋转的示意图；
30.图2是小组件中有两个部件时，两个部件没有分别进行旋转的示意图；
31.图3是小组件中有两个部件时，按照本方案进行的方法进行旋转的示意图；
32.图4-a是小组件中有三个部件时，按照本方案进行的方法进行旋转的示意图；
33.图4-b是小组件中有三个部件时，按照本方案进行的方法进行旋转的示意图；
34.图4-c是小组件中有三个部件时，按照本方案进行的方法进行旋转的示意图；
35.图5是最上层部件在小组件中的显示示意图；
36.图6是最上层部件在多个小组件中的显示示意图。
具体实施方式
37.为了使本技术领域的人员更好地理解本公开方案，下面将结合本公开实施例中的附图，对本公开实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本公开一部分的实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本公开保护的范围。
38.需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
39.实施例1
40.一种ios平台小组件中动画的实现方法，所述小组件包括至少两个部件，所述至少两个部件中，较上层的部件的锚点位于较下层的部件上，分别配置各个部件的转速使各个部件绕自己的锚点旋转，使至少一个部件在小组件中显示。
41.由于ios平台的小组件只能通过widgetkit和swiftui进行开发，而苹果公司禁止了widgetkit中的swiftui的animation功能，因此所以无法实现小组件的动画功能。唯一的例外是，由于需要向用户提供时钟小组件，而时钟的指针需要转动，因此苹果公司提供小组件中的部件绕一个锚点进行旋转的功能。而为了使小组件中可以显示部件进行绕锚点旋转以外的动画，我们需要配置至少2个部件，并通过配置两个部件的相对位置关系和转速来实现。小组件通过时钟小组件中驱动指针运动的代码驱动各个部件绕锚点旋转。_clockhandrotationeffect是ios小组件中用于驱动指针运动的代码，也可以用于本方案中用于各个部件绕锚点旋转。
42.如图1和图2所示，为目前的小组件仅能实现的动画的示意图，在目前的小组件中，我们可以通过_clockhandrotationeffect为第一部件添加旋转的动画，旋转前如图1初始状态所示，旋转后如图1部件旋转90度所示，可以看出这是一个与时钟指针相同的动画，第一部件无法进行平移或其他运动，显然不能满足用户对小组件的个性化需求。即使我们在
第一部件的基础上增设第二部件，但不对第二部件的锚点及旋转速度进行设置，那么第二部件也会被视为第一部件的整体和第一部件一起旋转90度如图2所示。
43.而本实施例的方案如图3所示，我们分别设置了第一部件和第二部件的锚点及转速，在这种情况下，我们可以看出第二部件相对于第一部件产生了旋转，这样做带来的好处是，我们可以使第二部件产生类似平移的效果而非单纯的旋转。解决了小组件中的部件只有旋转动画的问题。
44.实施例2
45.可选的，所述显示的部件包括模板部件和/或用户部件。其中用户可以根据自己的需求，将显示的部件中的用户部件替换为自己喜欢的图片、文字或其他数据，如用户可以将用户部件替换为自己喜欢的人或动物的头像，采用上述方案，解决了目前ios平台的小组件中用户指定的素材无法实现圆周运动外的其他运动的技术问题。
46.实施例3
47.可选的，所述用户部件为用户提供的头像图片或对用户提供的素材进行处理得到的头像图片。
48.实施例4
49.可选的，各个部件的锚点与自己的几何中心重合。采用上述方案可以保证各个部件在旋转时，部件的几何中心可以相对其锚点所在的部件静止，使整体系统更加的问题，也便于对各个部件的转速进行调整。
50.实施例5
51.可选的，所述显示的部件为最上层的部件。采用上述方案，便于在开发时配置各个锚点的位置和各个部件的参数。本方案的核心是使小组件中的部件产生非旋转的动画，将需要在动画中出现的部件组合为最上层的部件后，其他部件的作用仅仅是为最上层部件的运动提供基础，因此不需要进行显示。
52.实施例6
53.进一步的，所述至少两个部件的转速和为0。采用上述方案，可以保证所有部件中，至少有一个部件在相对于小组件背景没有产生自转。如图3所示，当第一部件转速＝负第二部件转速时，可以保证第二部件相对于小组件背景始终不产生自转，假设第二部件是个人的图形，那么这个人可以保证始终头朝上脚朝下而不会产生头朝下脚朝上的情况。
54.实施例7
55.进一步的，所述小组件包括三个部件，最上层部件的锚点在位于中间层部件上，中间层部件的锚点位于最下层部件上。采用最少3个部件，通过配置锚点的位置和转速，可以实现更精准更复杂的运动。
56.实施例8
57.如图4-a、4-b、4-c所示，进一步的，采用3个部件可以实现最上层部件相对于小组件背景做直线往复运动。在图4-a、4-b和4-c中，最小的方块为第三部件，中等的方块为第四部件，最大的方块为第五部件，其中第五部件的边长＝第三部件的边长+第三部件直线往复运动单程距离，第四部件边长＝(第三部件边长+第四部件边长)/2；第三部件转速：第四部件转速：第五部件转速＝1:-2:1，在上述参数的设置下，可以实现第三部件沿竖直方向直线往复运动如图4-b、4-c所示。如果我们希望使第三部件沿水平方向直线往复运动，只需要将
图4-a中的第三部件、第四部件和第五部件作为一个整体旋转90度即可。
58.可选的，第三部件、第四部件和第五部件也可以是圆形部件或其他形状的部件，相关的数学约束可以根据具体的部件形状进行调整。
59.实施例9
60.进一步的，所述最上层的部件包括模板部件和/或用户部件。所述最上层的部件可以由指定的模板部件和/或用户提供的用户部件组成，用户可以根据自己的需求，将最上层的部件中的用户部件替换为自己喜欢的图片、文字或其他数据。所述最上层的部件可以包括多个模板部件和多个用户部件。
61.进一步的，所述用户部件为用户提供的图片。所述用户部件可以是用户直接上传和/或选择的图片不经过任何处理得到。
62.进一步的，所述用户部件也可以是用户提供的图片经过一定变换产生的图片。所述用户部件可以是用户直接上传和/或选择的图片经过处理得到，所述处理包括但不限于ai识别及提取、裁切、拉伸、压缩等图片处理方法。
63.实施例10
64.所述用户部件由模板部件根据预设的模型和/或参数从用户提供的素材中识别获取。所述模板部件中包括用于提取用户部件的模型和/或参数，用户可以通过与小组件匹配的app上传或选择自己的素材，app根据模板部件的模型和/或参数对用户提供的素材进行处理，得到与模板部件匹配的用户部件，并将模板部件和用户组合为最上层部件。
65.实施例11
66.可选的，所述最上层的部件包括一个模板部件和两个用户部件，其中模板部件为一辆卡通的小汽车，两个用户部件为小汽车车窗处的两个人脸，用户可以通过上传自己的照片，小组件或小组件对应的app对用户上传的照片进行ai识别，提取照片中人脸的部分作为用户部件，也可以在提取后，通过ai生成卡通风格或其他风格的人脸作为用户部件；
67.可选的，也可以在车窗处预留人脸的蒙版，用户通过上传并调整照片的尺寸和位置使人脸和车窗匹配。
68.进一步的，不管用户使用了多少模板部件和用户部件，这些部件都会组合成最上层部件，并在最上层部件进行任何动作时保持相对静止。
69.实施例12
70.如图5所示，在手机屏幕上的小组件对最上层部件进行了显示，该最上层部件包括模板部件和与模板部件匹配的用户部件。生成该最上层部件的方法是，打开手机中与该小组件匹配的app，在app中选择该小组件和该模板部件，然后选择手机中的一张照片，app根据该模板部件预设的模型和/或参数通过ai识别提取用户选择的照片中需要的部分，如人脸，然后对提取到的人脸进行处理，所述处理的方法包括调整人脸图片的尺寸、将人脸卡通化、美颜等，然后将完成处理的图片作为用户部件与模板部件进行组合得到最上层部件，然后用户在桌面加载该小组件得到如图5所示的显示效果。采用上述方法，解决了目前小组件只能展示预设的图像的动画而用户无法修改动画中的素材的问题，用户可以根据自己的需求实时对动画中的素材进行替换，使小组件动画更美观、更贴合用户、可玩性更强。
71.实施例13
72.在实施例10的基础上，可选的，用户在选择手机中的照片后，可以手动对照片的各
项参数进行修改，可以修改的参数包括但不限于尺寸、颜色、对比度、饱和度等，还可以对照片进行编辑，如加入文字，表情等。在生成最上层部件后，也可以对最上层部件进行编辑和修改，使最上层部件更加美观。
73.实施例14
74.如图6所示，进一步的，小组件对应的app中为小组件提供多个可以选择的模板部件，这些模板部件可以使用相同的用户部件也可以使用不同的用户部件，这些模板部件可以使用统一的模型和/或参数对用户部件进行处理，也可以使用不同的模型和/或参数对用户部件进行处理，用户可以在app中制作多个不同的最上层部件作为不同的小组件保存到小组件库中，用户也可以在桌面展示多款不同的小组件。
75.实施例15
76.一种ios平台小组件中动画的实现装置，包括：
77.确定模块，用于小组件中的各个部件；
78.配置模块，用于配置各个部件的锚点和转速；
79.生成模块，用于渲染生成各个部件的动画。
80.实施例16
81.一种电子设备，包括存储器和处理器，所述存储器中存储有app程序，所述处理器被设置为运行所述app程序以执行上述的ios平台小组件中动画的实现方法。
82.上述本公开实施例序号仅仅为了描述，不代表实施例的优劣。
83.在本公开的上述实施例中，顺时针旋转的角度及顺时针旋转的转速为正，逆时针旋转的角度及逆时针旋转的转速为负，如顺时针旋转90度描述为旋转90度，逆时针旋转90度描述为旋转-90度，顺时针旋转10度/分钟：逆时针旋转10度/分钟＝1:-1。
84.在本公开的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
85.在本技术所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
86.所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
87.另外，在本公开各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
88.所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取非易失性存储介质中。基于这样的理解，本公开的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个非易失性存储介质中，包括若干指令用
以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本公开各个实施例所述方法的全部或部分步骤。而前述的非易失性存储介质包括：u盘、只读存储器(rom，read-only memory)、随机存取存储器(ram，random access memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
89.以上所述仅是本公开的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本公开原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本公开的保护范围。

技术特征：
1.一种ios平台小组件中动画的实现方法，其特征在于，所述小组件包括至少两个部件，所述至少两个部件中，较上层的部件的锚点位于较下层的部件上，分别配置各个部件的转速使各个部件绕自己的锚点旋转，使至少一个部件在小组件中显示；所述显示的部件包括模板部件和/或用户部件。2.根据权利要求1所述的一种ios平台小组件中动画的实现方法，其特征在于，各个部件的锚点与自己的几何中心重合。3.根据权利要求1所述的一种ios平台小组件中动画的实现方法，其特征在于，所述显示的部件为最上层的部件。4.根据权利要求3所述的一种ios平台小组件中动画的实现方法，其特征在于，所述至少两个部件的转速和为0。5.根据权利要求4所述的一种ios平台小组件中动画的实现方法，其特征在于，所述小组件包括三个部件，最上层部件的锚点在位于中间层部件上，中间层部件的锚点位于最下层部件上。6.根据权利要求1所述的一种ios平台小组件中动画的实现方法，其特征在于，所述用户部件是头像图片。7.根据权利要求1所述的一种ios平台小组件中动画的实现方法，其特征在于，所述用户部件是用户提供的图片素材，也可以是用户提供的素材经过一定变换产生的图片素材。8.根据权利要求1所述的一种ios平台小组件中动画的实现方法，其特征在于，所述用户部件由模板部件根据预设的模型和/或参数从用户提供的图片素材中识别获取。9.一种ios平台小组件中动画的实现装置，其特征在于，包括：确定模块，用于小组件中的各个部件；配置模块，用于配置各个部件的锚点和转速；生成模块，用于渲染生成各个部件的动画。10.一种电子设备，包括存储器和处理器，其特征在于，所述存储器中存储有app程序，所述处理器被设置为运行所述app程序以执行权利要求1至8中任意一项所述的ios平台小组件中动画的实现方法。

技术总结
本发明公开了一种iOS平台小组件中动画的实现方法，为了使小组件中可以显示部件进行绕锚点旋转以外的动画，我们通过配置多个部件，并配置两个部件的相对位置关系和转速实现了小组件中部件的多种运动方式的动画而不仅限于现在的绕一个点旋转的动画，而可以实现如直线往复运动等多种复杂运动的动画解决了目前小组件的动画较为单一的问题，为用户提供了更多小组件交互动画的可能。同时本方案还允许用户根据自己的需求对小组件中的素材进行修改，以使小组件动画更加美观，使自己指定的图像能在小组件中动起来。在小组件中动起来。在小组件中动起来。


技术研发人员：曾键
受保护的技术使用者：成都天鸽科技有限公司
技术研发日：2023.05.22
技术公布日：2023/10/6