腾讯礼物动画特效提供了适用于不同开发平台的 Demo。本文将主要介绍如何快速跑通礼物动画特效 SDK 的 Flutter 端 Demo。
Flutter 版本 SDK 需要依赖 Android/iOS 端的礼物动画特效 SDK。通过 Flutter 提供的 Plugin 方式,可以将原生端的功能暴露给 Flutter 端。
环境准备
支持 Flutter 3.16.0及以上版本。
Android 端开发:
Android Studio 3.5及以上版本。
Android SDK API Level 19及以上。
Android 4.4及以上,支持 armeabi-v7a、arm-v8a 架构的移动设备。
iOS 端开发:
Xcode 11.0及以上版本。
iOS 9.0以上的 iPhone 或者 iPad 真机。
项目已配置有效的开发者签名。
下载
项目导入
1. 使用代码编辑器打开 Flutter Demo example 项目(这里使用 Android Studio 来演示,您也可以使用其他熟悉的编辑器,如 Visual Studio Code 等)。

2. 打开项目后可以通过代码编辑器自带的 UI 界面来获取 Flutter 依赖。例如,找到
pubspec.yaml文件点击右上角按钮进行依赖获取:
也可以直接使用如下命令获取:
// 拉取依赖flutter pub get// 使用过程中,可以通过以下命令来更新现有 Flutter 依赖flutter pub upgrade
等待依赖更新完毕即可。
License配置
Flutter 端配置
1. 在运行前,需要在 Flutter 端进行 License 信息的配置,可以打开 example/lib/common/demo_config.dart 文件,分别填入您申请到的 LicenseUrl 和 LicenseKey 信息。如下图所示:

2. 填写完 License 信息之后,后续在 Demo 启动时就会调用
FTCMediaXBase.instance.setLicense 方法来使用其来初始化,具体逻辑见 example/lib/main.dart 文件。Android 端配置
在如上操作执行完毕之后,如果需要编译运行到 Android 平台上体验,您需要按照如下操作进行 Android 平台的配置。
1. 使用代码编辑工具打开 example/android/app/build.gradle.kts 文件,找到其中定义的 applicationId ,将其修改为前面填写的 License 所对应的 Android Package。如下图所示:

2. 填写完成之后,即可保证在 Android 平台运行时 License 初始化无误。
iOS 端配置
在如上操作执行完毕之后,如果需要编译运行到 iOS 平台上体验,您需要按照如下操作进行 iOS 平台的配置。
1. 在 example/ios 目录下,执行
pod install 命令。等待其执行结束之后,使用 XCode 开发工具打开该目录下的 Runner.xcworkspace 文件启动项目。然后将项目的 Bundle Identifier 修改为前面填写的 License 所对应的 iOS BundleId。如下图所示:
2. 填写完成之后,即可保证在 iOS 平台运行时 License 初始化无误。
动画资源配置
说明:
如果您不需要播放自己的动画文件,则可以跳过当前步骤。
要修改播放的动画文件,可以执行以下操作:
1. 在 example/asset/anim 目录中添加要播放的动画文件。
2. 打开 example/lib/tools/demo_asset_helper.dart 文件,修改顶部的 _kNormalAnimNames(大动画)或 _kTCMP4AnimNames(小头像动画)属性。Demo 会自动完成动画文件的复制等操作。如下图所示:

3. 最后需要打开 example/pubspec.yaml 配置文件,将新增的动画文件加入到配置列表中。完成后,您可以直接运行 Demo 项目来体验动画播放。

注意:
Demo 中自带的动画文件没有绑定 License,因此您可以使用自己的 License 来播放体验。
如果要替换自己的动画,需要注意动画的 License 信息要跟项目内设置的 License 信息一致,否则会因为 License 信息不匹配而播放失败。
项目运行
如上操作完成之后,即可正式开始运行 Demo 项目体验了。您可以按照如下办法来运行 Demo 项目(办法较多,这里仅列举一种):

1. 先选择要运行的设备,接着单击
运行即可等待其编译,等待其安装完毕即可进行体验。

2. 项目运行之后,首页视图如下所示:

其中:
EffectAnim Demo 按钮点击之后,即可进行大动画体验,包括一些常用示例。
EffectAnim List 按钮点击之后,即可进行小动画体验。