CN115170700A - 基于Flutter框架实现CSS动画的方法、计算机设备及存储介质 - Google Patents

Abstract

本发明提供了一种基于Flutter框架实现CSS动画的方法、计算机设备及存储介质，其中，该方法包括：收集已定义的关键帧数据；解析关键帧数据，将关键帧数据中CSS动画属性转换成Flutter动画属性；对关键帧分组排序；根据动画运行进度确定对应关键帧区间，基于关键帧区间对应的关键帧属性进行渲染。通过上述方式，能够实现在Flutter框架下对CSS动画的完整支持。

Description

基于Flutter框架实现CSS动画的方法、计算机设备及存储 介质

技术领域

本申请涉及动画处理领域，特别是涉及一种基于Flutter框架实现CSS动画的方法、计算机设备及存储介质。

背景技术

Flutter是谷歌推出的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter采用现代响应式框架构建，其中心思想是使用组件来构建应用的UI。当组件的状态发生改变时，组件会重构它的描述，Flutter会对比之前的描述，以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

虽然Flutter能够实现多端UI的统一，但Flutter官方不支持动态化能力，在移动客户端(iOS/Android)的动态化能力需要依靠Web动态化更新能力实现。目前在Flutter上通过Web能力实现的动态化方案，对WebCSS能力支持有限，缺乏对CSSanimation动画的支持。

发明内容

本申请主要解决的技术问题是提供一种基于Flutter框架实现CSS动画的方法、计算机设备及存储介质，能够实现在Flutter框架下对CSS动画的完整支持。

为解决上述技术问题，本申请采用的一个技术方案是：获取关键帧数据，关键帧数据包括多个关键帧；对关键帧数据进行解析，并将关键帧数据中的CSS动画属性转换为Flutter动画属性；基于Flutter动画属性，对关键帧数据进行排序；在运行动画时，基于动画运行进度确定对应的关键帧区间，并基于关键帧区间对应的关键帧属性进行渲染，以实现动画效果。

其中，基于Flutter动画属性，对关键帧数据进行排序，包括：基于Flutter动画属性，对关键帧数据进行分组；基于Flutter动画属性，对各组内的关键帧数据进行排序。

其中，动画属性包括关键帧名称和关键帧位置；基于Flutter动画属性，对关键帧数据进行分组，包括：基于关键帧名称，对关键帧数据进行分组；基于Flutter动画属性，对各组内的关键帧数据进行排序，包括：基于关键帧位置，对各组内的关键帧数据按照从小到大的顺序进行排序。

其中，该方法还包括：将各组内的关键帧和关键帧名称一一对应关联，并进行保存。

其中，基于动画运行进度确定对应的关键帧区间，并基于关键帧区间对应的关键帧属性进行渲染，包括：获取动画运行进度；根据动画运行进度，确定当前动画帧对应的两个关键帧；根据动画运行进度、以及两个关键帧的动画属性，确定当前动画帧的属性值；根据当前动画帧的属性值，对当前动画帧进行渲染。

其中，获取动画运行进度，包括：基于Flutter框架的Ticker进行动画控制，以获取动画运行进度。

其中，根据动画运行进度、以及两个关键帧的动画属性，确定当前动画帧的属性值，包括：根据动画运行进度，确定当前动画帧在两个关键帧确定的关键帧区间中的第一子进度；利用Curves函数，将第一子进度转换为第二子进度；根据第二子进度、以及两个关键帧的动画属性，确定当前动画帧的对应的属性值。

其中，根据动画运行进度，确定当前动画帧在两个关键帧确定的关键帧区间中的第一子进度，包括：采用以下公式计算当前动画帧的第一子进度：

其中，t1为当前动画帧的第一子进度，t为动画运行进度，T1和T2为两个关键帧的运行进度。

为解决上述技术问题，本申请采用的另一个技术方案是：提供一种计算机设备，该计算机设备包括存储器和处理器，存储器中存储有程序指令，程序指令被处理器执行时，使得处理器执行如上述的基于Flutter框架实现CSS动画的方法的步骤。

为解决上述技术问题，本申请采用的再一个技术方案是：提供一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，计算机程序可被至少一个处理器所执行，以实现如上述的基于Flutter框架实现CSS动画的方法的步骤。

本申请的有益效果是：本申请提供一种基于Flutter框架实现CSS动画的方法、计算机设备及存储介质，该方法包括：收集已定义的关键帧数据；解析关键帧数据，将关键帧数据中CSS动画属性转换成Flutter动画属性；对关键帧分组排序；根据动画运行进度确定对应关键帧区间，基于关键帧区间对应的关键帧属性进行渲染。通过上述方式，对比Flutter框架不支持动态化能力的不足，通过将CSS动画中涉及到的属性在Flutter中进行转化，获取动画的开始与结束的状态及运行的时间曲线，以补间动画的方式计算出动画的整个过程，能够实现在Flutter框架下对CSS动画的完整支持。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。其中：

图1是本申请提供的在Flutter框架实现CSS动画第一实施例的流程示意图；

图2是本申请提供的在Flutter框架实现CSS动画的第二实施例的流程示意图；

图3是本申请提供的在Flutter框架实现CSS动画的第三实施例的流程示意图；

图4是图3中S36的流程示意图；

图5是本发明实施例的计算机设备的结构示意图；

图6是本发明实施例的存储介质的结构示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动情况下所获得的所有其它实施例，均属于本申请保护的范围。

另外，若本申请实施例中有涉及“第一”、“第二”等的描述，则该“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。

本发明提供一种基于Flutter框架实现CSS动画的方法及装置，通过获取多个关键帧数据，解析所获取的关键帧数据，将关键帧数据中的CSS动画属性转换成Flutter动画属性；对关键帧数据根据Flutter的动画属性进行排序；基于动画运行进度确定对应的关键帧区间，并根据关键帧区间对应的关键帧属性进行渲染，实现了在Flutter框架下CSS动画的运行。

参阅图1，图1为本申请提供的在Flutter框架实现CSS动画第一实施例的步骤示意图，该方法包括：

S11，获取关键帧数据，关键帧数据包括多个关键帧。

本发明实施例一中的关键帧数据，在软件开发时完成定义，根据定义的动画名称指定所使用CSS动画的控件，可实现对控件指定动画效果。

其中一个方案中，关键帧数据按照W3C标准进行定义。

具体地，一种以W3C标准定义关键帧数据如下所示：

@keyframes<identifier>'{'<keyframes-blocks>'}'；

<keyframes-blocks>：[[from|to|<percentage>]{sRules}][[,from|to|<percentage>]{sRules}]*

其中，<identifier>为定义一个动画名称；<keyframes-blocks>为定义动画在每个阶段的样式，即帧动画。

S12，对关键帧数据进行解析，并将关键帧数据中的CSS动画属性转换为Flutter动画属性。

可以理解地，在Flutter上实现CSS动画，需要把CSS动画中涉及到的属性全部在Flutter上实现出来，因此，需要对关键帧中的CSS动画属性依照在Flutter上对应的实现方式进行属性转换。

下表列举了一些CSS动画属性名称和说明，以及Flutter实现的对应关系：

可选地，在一实施例中，将将关键帧数据中的CSS动画属性转换为Flutter动画属性，可以通过将CSS动画中的background-color在Flutterwidget中对应color。

S13，基于Flutter动画属性，对关键帧数据进行排序。

可选地，可按照Flutter的动画属性，如动画的状态属性、名称属性等，可以根据属性的大小对关键帧数据进行排序。

S14，在运行动画时，基于动画运行进度确定对应的关键帧区间，并基于关键帧区间对应的关键帧属性进行渲染，以实现动画效果。

可选地，通过获取了关键帧区间对应的关键帧区间属性，获得了动画的起点、终点、时间轴，以及过渡时间与速度曲线，基于上述信息，使用Flutter框架的补间动画方式，实现动画效果。

本实施例通过上述方式，对比Flutter框架不支持动态化能力的不足，通过将CSS动画中涉及到的属性在Flutter中进行转化，获取动画的开始与结束的状态及运行的时间曲线，以补间动画的方式计算出动画的整个过程，能够实现在Flutter框架下对CSS动画的完整支持。

参阅图2，图2为本申请提供的在Flutter框架实现CSS动画的第二实施例的步骤示意图，包括：

S21，获取关键帧数据，关键帧数据包括多个关键帧。

S22，对关键帧数据进行解析，并将关键帧数据中的CSS动画属性转换为Flutter动画属性。

S23，基于Flutter动画属性，对关键帧数据进行分组。

可选地，动画属性包括关键帧名称，在一实施例中，可以基于关键帧名称，对关键帧数据进行分组。

例如，关键帧名称可以包括animation-name，按照A-Z的字母顺序进行分组。

S24，基于Flutter动画属性，对各组内的关键帧数据进行排序。

可选地，动画属性包括关键帧位置，在一实施例中，可以基于关键帧位置，对各组内的关键帧数据进行排序。

例如，关键帧位置可以时间戳来进行表示，每一个关键帧都包含一个时间戳t，可以根据时间戳的先后顺序对各组内的关键帧数据进行排序。

S25，在运行动画时，基于动画运行进度确定对应的关键帧区间，并基于关键帧区间对应的关键帧属性进行渲染，以实现动画效果。

参阅图3，图3是本申请提供的在Flutter框架实现CSS动画的第三实施例的步骤示意图：

S31，获取关键帧数据，关键帧数据包括多个关键帧。

S32，对关键帧数据进行解析，并将关键帧数据中的CSS动画属性转换为Flutter动画属性。

S33，基于Flutter动画属性，对关键帧数据进行排序。

S34，获取动画运行进度。

例如，使用Flutter中的时钟相关语句Ticker控制动画，调用start方法后，内部调用_scheduleTick方法，向调度函数Scheduler调用_onTick方法添加_tick进行回调，每次添加调用_onTick都会传入一个时间参数，这个参数表示从调用start开始经历的时间长度t(位于0到1的区间内)，时间长度t即为动画运行进度。

具体地，start方法调用shceduleTick，scheduleTick利用SchedulerBinding对象向***调度一帧，并添加回调_tick。

其中，Ticker类挂载在Flutter调度器的scheduleFrameCallback()的机制上，来达到每次运行都会触发回调的效果。一个Ticker可以被启动和停止，启动时，它会返回一个Future，这个Future在Ticker停止时会被改为完成状态。每次运行，Ticker都会为回调函数提供从Ticker开始运行到现在的持续时间。

S35，根据动画运行进度，确定当前动画帧对应的两个关键帧。

可选地，根据动画运行进度t，则对应的两个关键帧进度之间为当前动画运行进度的进度。

例如，动画配置了4个关键帧进度分别是：0、45％、60％、1，当前动画运行进度t为11％，则对应的两个关键帧分别为0和45％。

S36，根据动画运行进度、以及两个关键帧的动画属性，确定当前动画帧的属性值。

可选地，对动画运行进度进行转换，结合两个关键帧的动画属性，获取动画运行所需的过渡时间和速度曲线属性值。

S37，根据当前动画帧的属性值，对当前动画帧进行渲染。

可选地，将完成计算的动画帧属性值设置到Flutterwidget相关属性上，当Flutter屏幕刷新渲染时，将新设置的属性值渲染出来，每一帧的属性不断变换，实现出CSS动画效果。

具体地，动画在结束后，可以根据animation-iteration-count属性决定动画的重复次数以及根据，例如决定动画重复有限次或无限次；根据animation-direction决定动画重复播放时的方向，例如决定动画重复播放时为正向播放或是反向播放；在动画播放中可以控制动画状态，改变animation-play-state，并把动画状态通知给Flutter widget和有需要监听动画状态的地方，指定暂停或运行特定动画；根据animation-fill-mode决定动画结束后的状态。

参阅图4，图4为图3中S36的流程示意图，S36包括：

S361，根据动画运行进度，确定当前动画帧在两个关键帧确定的关键帧区间中的第一子进度。

在一实施例中，根据动画运行进度t，计算出当前动画帧所在的两个关键帧区间中的第一子进度t1。

具体地，第一子进度t1的计算方式为

其中T1和T2为当前动画帧t相邻的两个关键帧。

例如动画配置了4个关键帧进度分别是：0、45％、60％、1，当前动画运行进度t位于45％到60％之间，则

S362，利用Curves函数，将第一子进度转换为第二子进度。

可选地，将CSS动画中的动画曲线函数animation-timing-function转化成Flutter中的动画曲线函数Curves函数。

下表列出CSS中的一些animation-timing-function值及其在Flutter中对应的Curves值：

可选地，第一子进度t1经过Curves.linear计算得到第二子进度t2，其中t2范围为0到1之间。

S363，根据第二子进度、以及两个关键帧的动画属性，确定所述当前动画帧的对应的属性值。

例如取得45％和60％的两个关键帧，根据不同的关键帧属性做出相应的变换，计算出45％到t2的属性值。

再次，本发明还提出一种计算机设备。

参阅图5所示，是本发明计算机设备一实施例的硬件架构示意图。本实施例中，所述计算机设备50是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，可以是智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图5所示，所述计算机设备50至少包括，但不限于，存储器51以及处理器52。其中：

所述存储器51至少包括一种类型的计算机可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器51可以是所述计算机设备50的内部存储单元，例如该计算机设备50的硬盘或内存。在另一些实施例中，所述存储器51也可以是所述计算机设备50的外部存储设备﹐例如该计算机设备50上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。当然，所述存储器51还可以既包括所述计算机设备50的内部存储单元也包括其外部存储设备。本实施例中，所述存储器51通常用于存储安装于所述计算机设备50的操作***和各类应用软件，例如用于实现所述Flutter框架下实现CSS动画的方法的计算机程序等。此外，所述存储器51还可以用于暂时地存储已经输出或者将要输出的各类数据。

所述处理器52在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器52通常用于控制所述计算机设备50的总体操作，例如执行与所述计算机设备50进行数据交互或者通信相关的控制和处理等。本实施例中，所述处理器52用于运行所述存储器51中存储的程序代码或者处理数据，例如运行用于实现所述Flutter框架下实现CSS动画的计算机程序等。

参阅图6，本发明实施例还提供了一种计算机程序产品，包括程序指令61，该程序指令61在被处理器执行时实现本发明实施例一提供的Flutter框架下实现CSS动画的方法。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言─诸如Java、C++等，还包括常规的过程式程序设计语言——诸如C语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

专业人员应该还可以进一步意识到，结合本文中所公开的各示例的单元计算法步骤，能够以电子硬件、计算机软件或者两者的结合来实现，为了清楚的说明硬件和软件的互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解；其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种基于Flutter框架实现CSS动画的方法，其特征在于，所述方法包括：

获取关键帧数据，所述关键帧数据包括多个关键帧；

对所述关键帧数据进行解析，并将所述关键帧数据中的CSS动画属性转换为Flutter动画属性；

基于所述Flutter动画属性，对所述关键帧数据进行排序；

在运行动画时，基于动画运行进度确定对应的关键帧区间，并基于所述关键帧区间对应的关键帧属性进行渲染，以实现动画效果。

2.根据权利要求1所述的方法，其特征在于，

所述基于所述Flutter动画属性，对所述关键帧数据进行排序，包括：

基于所述Flutter动画属性，对所述关键帧数据进行分组；

基于所述Flutter动画属性，对各组内的所述关键帧数据进行排序。

3.根据权利要求2所述的方法，其特征在于，

所述动画属性包括关键帧名称和关键帧位置；

所述基于所述Flutter动画属性，对所述关键帧数据进行分组，包括：

基于所述关键帧名称，对所述关键帧数据进行分组；

所述基于所述Flutter动画属性，对各组内的所述关键帧数据进行排序，包括：

基于所述关键帧位置，对各组内的所述关键帧数据按照从小到大的顺序进行排序。

4.根据权利要求3所述的方法，其特征在于，

所述方法还包括：

将各组内的所述关键帧和所述关键帧名称一一对应关联，并进行保存。

5.根据权利要求1所述的方法，其特征在于，所述基于动画运行进度确定对应的关键帧区间，并基于所述关键帧区间对应的关键帧属性进行渲染，包括：

获取动画运行进度；

根据所述动画运行进度，确定当前动画帧对应的两个关键帧；

根据所述动画运行进度、以及所述两个关键帧的动画属性，确定所述当前动画帧的属性值；

根据所述当前动画帧的属性值，对所述当前动画帧进行渲染。

6.根据权利要求5所述的方法，其特征在于，

所述获取动画运行进度，包括：

基于Flutter框架的Ticker进行动画控制，以获取动画运行进度。

7.根据权利要求5所述的方法，其特征在于，

所述根据所述动画运行进度、以及所述两个关键帧的动画属性，确定所述当前动画帧的属性值，包括：

根据所述动画运行进度，确定当前动画帧在所述两个关键帧确定的关键帧区间中的第一子进度；

利用Curves函数，将所述第一子进度转换为第二子进度；

根据所述第二子进度、以及所述两个关键帧的动画属性，确定所述当前动画帧的对应的属性值。

8.根据权利要求7所述的方法，其特征在于，

所述根据所述动画运行进度，确定当前动画帧在所述两个关键帧确定的关键帧区间中的第一子进度，包括：

采用以下公式计算当前动画帧的第一子进度：

其中，t1为当前动画帧的第一子进度，t为动画运行进度，T1和T2为两个关键帧的运行进度。

9.一种计算机设备，包括存储器和处理器，其特征在于，所述存储器上存储有计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1-8任一项所述的基于Flutter框架实现CSS动画的方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序可被至少一个处理器所执行，以实现权利要求1-8任一项所述的基于Flutter框架实现CSS动画的方法的步骤。

Images