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

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

【技术实现步骤摘要】
基于Flutter框架实现CSS动画的方法、计算机设备及存储介质


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

技术介绍

[0002]Flutter是谷歌推出的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter采用现代响应式框架构建，其中心思想是使用组件来构建应用的UI。当组件的状态发生改变时，组件会重构它的描述，Flutter会对比之前的描述，以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。
[0003]虽然Flutter能够实现多端UI的统一，但Flutter官方不支持动态化能力，在移动客户端(iOS/Android)的动态化能力需要依靠Web动态化更新能力实现。目前在Flutter上通过Web能力实现的动态化方案，对WebCSS能力支持有限，缺乏对CSSanimation动画的支持。

技术实现思路

[0004]本申请主要解决的技术问题是提供一种基于Flutter框架实现CSS动画的方法、计算机设备及存储介质，能够实现在Flutter框架下对CSS动画的完整支持。
[0005]为解决上述技术问题，本申请采用的一个技术方案是：获取关键帧数据，关键帧数据包括多个关键帧；对关键帧数据进行解析，并将关键帧数据中的CSS动画属性转换为Flutter动画属性；基于Flutter动画属性，对关键帧数据进行排序；在运行动画时，基于动画运行进度确定对应的关键帧区间，并基于关键帧区间对应的关键帧属性进行渲染，以实现动画效果。
[0006]其中，基于Flutter动画属性，对关键帧数据进行排序，包括：基于Flutter动画属性，对关键帧数据进行分组；基于Flutter动画属性，对各组内的关键帧数据进行排序。
[0007]其中，动画属性包括关键帧名称和关键帧位置；基于Flutter动画属性，对关键帧数据进行分组，包括：基于关键帧名称，对关键帧数据进行分组；基于Flutter动画属性，对各组内的关键帧数据进行排序，包括：基于关键帧位置，对各组内的关键帧数据按照从小到大的顺序进行排序。
[0008]其中，该方法还包括：将各组内的关键帧和关键帧名称一一对应关联，并进行保存。
[0009]其中，基于动画运行进度确定对应的关键帧区间，并基于关键帧区间对应的关键帧属性进行渲染，包括：获取动画运行进度；根据动画运行进度，确定当前动画帧对应的两个关键帧；根据动画运行进度、以及两个关键帧的动画属性，确定当前动画帧的属性值；根据当前动画帧的属性值，对当前动画帧进行渲染。
[0010]其中，获取动画运行进度，包括：基于Flutter框架的Ticker进行动画控制，以获取
动画运行进度。
[0011]其中，根据动画运行进度、以及两个关键帧的动画属性，确定当前动画帧的属性值，包括：根据动画运行进度，确定当前动画帧在两个关键帧确定的关键帧区间中的第一子进度；利用Curves函数，将第一子进度转换为第二子进度；根据第二子进度、以及两个关键帧的动画属性，确定当前动画帧的对应的属性值。
[0012]其中，根据动画运行进度，确定当前动画帧在两个关键帧确定的关键帧区间中的第一子进度，包括：采用以下公式计算当前动画帧的第一子进度：其中，t1为当前动画帧的第一子进度，t为动画运行进度，T1和T2为两个关键帧的运行进度。
[0013]为解决上述技术问题，本申请采用的另一个技术方案是：提供一种计算机设备，该计算机设备包括存储器和处理器，存储器中存储有程序指令，程序指令被处理器执行时，使得处理器执行如上述的基于Flutter框架实现CSS动画的方法的步骤。
[0014]为解决上述技术问题，本申请采用的再一个技术方案是：提供一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，计算机程序可被至少一个处理器所执行，以实现如上述的基于Flutter框架实现CSS动画的方法的步骤。
[0015]本申请的有益效果是：本申请提供一种基于Flutter框架实现CSS动画的方法、计算机设备及存储介质，该方法包括：收集已定义的关键帧数据；解析关键帧数据，将关键帧数据中CSS动画属性转换成Flutter动画属性；对关键帧分组排序；根据动画运行进度确定对应关键帧区间，基于关键帧区间对应的关键帧属性进行渲染。通过上述方式，对比Flutter框架不支持动态化能力的不足，通过将CSS动画中涉及到的属性在Flutter中进行转化，获取动画的开始与结束的状态及运行的时间曲线，以补间动画的方式计算出动画的整个过程，能够实现在Flutter框架下对CSS动画的完整支持。
附图说明
[0016]为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。其中：
[0017]图1是本申请提供的在Flutter框架实现CSS动画第一实施例的流程示意图；
[0018]图2是本申请提供的在Flutter框架实现CSS动画的第二实施例的流程示意图；
[0019]图3是本申请提供的在Flutter框架实现CSS动画的第三实施例的流程示意图；
[0020]图4是图3中S36的流程示意图；
[0021]图5是本专利技术实施例的计算机设备的结构示意图；
[0022]图6是本专利技术实施例的存储介质的结构示意图。
具体实施方式
[0023]下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动情况下所获得的所有其它
实施例，均属于本申请保护的范围。
[0024]另外，若本申请实施例中有涉及“第一”、“第二”等的描述，则该“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本申请要求的保护范围之内。
[0025]本专利技术提供一种基于Flutter框架实现CSS动画的方法及装置，通过获取多个关键帧数据，解析所获取的关键帧数据，将关键帧数据中的CSS动画属性转换成Flutter动画属性；对关键帧数据根据Flutter的动画属性进行排序；基于动画运行进度确定对应的关键帧区间，并根据关键帧区间对应的关键帧属性进行渲染，实现了在Flutter框架下CSS动画的运行。
[0026]参阅图1，图1为本申请提供的在Flutt本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Flutter框架实现CSS动画的方法，其特征在于，所述方法包括：获取关键帧数据，所述关键帧数据包括多个关键帧；对所述关键帧数据进行解析，并将所述关键帧数据中的CSS动画属性转换为Flutter动画属性；基于所述Flutter动画属性，对所述关键帧数据进行排序；在运行动画时，基于动画运行进度确定对应的关键帧区间，并基于所述关键帧区间对应的关键帧属性进行渲染，以实现动画效果。2.根据权利要求1所述的方法，其特征在于，所述基于所述Flutter动画属性，对所述关键帧数据进行排序，包括：基于所述Flutter动画属性，对所述关键帧数据进行分组；基于所述Flutter动画属性，对各组内的所述关键帧数据进行排序。3.根据权利要求2所述的方法，其特征在于，所述动画属性包括关键帧名称和关键帧位置；所述基于所述Flutter动画属性，对所述关键帧数据进行分组，包括：基于所述关键帧名称，对所述关键帧数据进行分组；所述基于所述Flutter动画属性，对各组内的所述关键帧数据进行排序，包括：基于所述关键帧位置，对各组内的所述关键帧数据按照从小到大的顺序进行排序。4.根据权利要求3所述的方法，其特征在于，所述方法还包括：将各组内的所述关键帧和所述关键帧名称一一对应关联，并进行保存。5.根据权利要求1所述的方法，其特征在于，所述基于动画运行进度确定对应的关键帧区间，并基于所述关键帧区间对应的关键帧属性进行渲染，包括：获取动画运行进度；根据所述动画运行进度，确定当前动画帧对应的两个关键帧；根据所述动画运行进度、以及所述两个关键帧的...

【专利技术属性】
技术研发人员：史胜龙，吴海巍，
申请(专利权)人：杭州涂鸦信息技术有限公司，
类型：发明
国别省市：