高级字符动画使用教程

更新时间 : 2021-07-30 19:42:23

高级字符动画(power text) 可以实现文字丰富的动画效果。

设计师导出包含文字动画效果的模板，需要开发按照下文的方法实现文字动画替换。

sdk 支持列表

• go sdk 1.3.0.release 及以上
• java sdk 1.6.2.release 及以上

使用教程

该功能需要通过 ReplaceableJson 替换数据格式使用:
参考 https://www.seeshiontech.com/docs/page_103.html

1. 普通模板使用

普通模板中，高级字符动画素材可以被当成一个替换素材使用。

在不支持文字动画的 sdk 中，普通模板的每个替换素材都为图片或视频，文字素材最终也需要被转换成图片才能实现替换。

• 无高级字符动画，替换素材全部为图片，ReplaceableJson 示例数据：

[
     {
        "main_file": "/home/slayer/Desktop/workspace/assets/1.jpeg"
     }, {
        "main_file": "/home/slayer/Desktop/workspace/assets/2.jpeg"
     }, {
        "main_file": "/home/slayer/Desktop/workspace/assets/3.jpeg"
     }
]

• 支持高级文字符动画，第 3 个为高级字符动画素材, ReplaceableJson 示例数据：

[
     {
        "main_file": "/home/slayer/Desktop/workspace/assets/1.jpeg"
     }, {
        "main_file": "/home/slayer/Desktop/workspace/assets/2.jpeg"
     },{
         "type": 3,
         "attr":{
             "text" : "", //文字内容  超出截断  
             "adapt": true, //是否开启文字自适应,仅对文本框类型文字有效，默认关闭 (默认使用模版设计中的适配方式)
             "fill" : "#FFFFFF", //文字填充颜色 格式为RGB
             "stroke": "#FFFFFF", //文字描边颜色 格式为RGB
             "stroke_width":0.0, //描边宽度
             "stroke_over_fill":false, //描边是否在填充之上
             "size":0, //文字大小， 单位为像素
             "font_family":"", //字体系列名称 （通过字体系列名称查找SDK中加载过的字体，推荐此中方式）               | 二选一
             "font_file":""  //字体文件路径  （直接使用此字体，建议使用ttf字体，不推荐使用包含多种语言的字体集）  | 二选一
         }
     }
 ]

组装替换数据时，模板 config.json 的 assets 数组, ui->type = 3 的 asset 为高级字符动画素材, 需要把元素设置为 power_text, 如下：

{
    "type": 1, //模版类型 1:普通模版 2:动态模版
    "fps": 30, //模板的主帧速率
    "main": "comp0", //渲染使用的主合成的name属性，SDK支持预合成，所以导出的合层不止一个，这里定义的是主合成的name。
    "description": "合成 1", //模板的描述，对应AE中主合成的名称
    "version": "1.3.0.beta", //SDK内核版本号，与渲染效果息息相关
    "ui_version": "1.0", //编辑界面版本号目前分为1.0与2.0 2.0界面更加完善更加易懂
    ...,
    "assets" : [
        {
            "key": "assetkey0",
            "ui_key": "",
            "ui_extra": "",
            "name": "asset1.png",
            "type": 6,
            "num": 0,
            "size": [
                44,
                225
            ],
            "text_anim": "data9.json",
            "ui": {
                "group": 4,
                "index": 0,
                "duration": 175,
                "type": 3, // 1 - 图片/视频, 2 - 普通文字, 3 - 高级字符动画素材
                "default": "竖排文字测试",
                "max": 1000,
                "font": "35--Regular",
                "font_style": "Regular",
                "font_family": "35--Regular",
                ...
            }
        },
    ]
}

2. 动态模板使用高级字符动画

ReplaceableJson 示例数据：

[
    {
        "main_file" : "/path/to/asset_file.png", // 主替换素材
        "replaces": [  // 与主替换素材关联的高级替换素材
            {  // 高级图片替换
                "d_key_prefix": "dtext",    // 按前缀 dtext 查找替换,(注意字段为 d_key_prefix)
                "type": 1, // 类型， 1-图片，2-文字，3-高级字符动画素材
                "file": "/home/slayer/Desktop/workspace/assets/235_41_text1.png" // 替换图片路径
            },
            { // 高级文字替换
                "d_key_prefix": "dtext", // 按前缀 dtext 查找替换,(注意字段为 d_key_prefix)
                "type": 2, // 文字
                "attr":{
                    "text": "文字内容"
                }
            }，
            { // 高级字符动画素材替换
                "type": 3,
                "attr":{
                    "text" : "", //文字内容  超出截断  
                    "adapt": true, //是否开启文字自适应,仅对文本框类型文字有效，默认关闭 (默认使用模版设计中的适配方式)
                    "fill" : "#FFFFFF", //文字填充颜色 格式为RGB
                    "stroke": "#FFFFFF", //文字描边颜色 格式为RGB
                    "stroke_width":0.0, //描边宽度
                    "stroke_over_fill":false, //描边是否在填充之上
                    "size":0, //文字大小， 单位为像素
                    "font_family":"", //字体系列名称 （通过字体系列名称查找SDK中加载过的字体，推荐此中方式）                | 二选一
                    "font_file":""  //字体文件路径  （直接使用此字体，建议使用ttf字体，不推荐使用包含多种语言的字体集）   | 二选一
                }
            }
        ]
    }
]

动态模板不支持直接将高级字符动画素材作为主替换素材，只能在 replaces 数组中使用。

注意事项

• 高级文字在使用了字符动画的情况下是需要付费使用的，详情请联系商务
• 使用前必须调用相关方法设置好字体目录