图文与视频的营销创意解决方案
如果无法正常显示，请先停止浏览器的去广告插件。
1. 图⽂文与视频的营销创意解决⽅方案
叶浩
2. 关于我
叶浩 (凌征)
阿⾥里里集团 - 阿⾥里里妈妈创意中⼼心
创意
⾼高级前端技术专家
https://kfitfk.github.io
3. 创意
4. 图⽂文创意
5. 图⽂文创意
6. 视频创意
7. 营销创意投放特点
商品池⼤大
⼈人群⼴广泛
8. 决定营销效果的重要因素
⼴广告深度
个性化能⼒力力
9. 从前端⼯工程⻆角度为营销创意赋能
图⽂文创意
视频创意
10. 图⽂文创意
11. <templet width="300" height="350">
<a class="link" href="{{root.clickurl }}" target="_blank"></a>
<div class="main">
<img class="item" src="{{root.item}}">
<div class="title">{{root.title}}</div>
<div class="subtitle">{{root.subtitle}}</div>
<img class="logo" src="https://img.alicdn.com/tps/TB1IL4JIFXXXXXZXFXXXXXXXXXX.png">
</div>
<div class="discount">
<span>{{root.discount}}</span>
<img class="tri" src="https://img.alicdn.com/tps/TB1C.VNIFXXXXbVXpXXXXXXXXXX.png">
</div>
</templet>
.templet {
font: 14px/1.5 normal Helvetica, Arial, "Microsoft Yahei", "\5fae\8f6f\96c5\9ed1", sans-serif;
}
.link {
position: absolute;
z-index: 999;
width: 298px;
height: 348px;
border: 1px solid #e9e9e9;
display: block;
background: transparent url(https://img.alicdn.com/tps/TB1gsBPIFXXXXaQXpXXXXXXXXXX.gif) repeat;
top: 0;
left: 0;
}
.main {
padding: 6px;
height: 298px;
background-color: white;
transition: background-color 0.5s linear;
}
12. 提⾼高模板产出效率
⾃自动化
13. 从 HTML 到 SVG
14.
15.
16.
17. <svg version="1.1" id="template" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0
0 520 280" enable-background="new 0 0 520 280" xml:space="preserve">
<!-- omitted code here -->
<g>
<g>
<text id="t_x7C_l_x3B_c_4_" transform="matrix(1 0 0 1 33.9126
65.6572)" fill="#333333" font-family="'NotoSansCJKsc-Bold-GBpc-EUC-
H'" font-size="38.8295px">MAKE UP</text>
<text id="t_x7C_l_x3B_c_3_" transform="matrix(1 0 0 1 33.9126
100.873)" fill="#333333" font-family="'NotoSansCJKsc-Bold-GBpc-EUC-
H'" font-size="38.8295px">BEAUT.</text>
<line id="c_2_" fill="none" stroke="#333333" stroke-width="4"
stroke-miterlimit="10" x1="33.9" y1="118.3" x2="80.9" y2="118.3"/>
</g>
<text id="t_x7C_l_x3B_c_2_" transform="matrix(1 0 0 1 33.9126
168.2818)" fill="#333333" font-family="'NotoSansCJKsc-Light-GBpc-EUC-
H'" font-size="38.1809px">美到发光光光</text>
初夏新品上市
美到发光光光
<text id="t_x7C_l_x3B_c_1_" transform="matrix(1 0 0 1 33.9126
199.0152)" fill="#333333" font-family="'NotoSansCJKsc-Black-GBpc-EUC-
H'" font-size="26.6241px">你就是⼥女女主⻆角啦</text>
<g>
<text id="t_x7C_l_x3B_c" transform="matrix(1 0 0 1 33.9126
244.4736)" fill="#333333" font-family="'NotoSansCJKsc-Regular-GBpc-
EUC-H'" font-size="16.1239px">SHOP NOW</text>
<rect id="c_1_" x="128" y="238.8" fill-rule="evenodd" clip-
rule="evenodd" fill="#333333" width="77.4" height="1.1"/>
</g>
</g>
</svg>
MAKE UP
BEAUT.
美到发光光光
初夏新品上市
你就是⼥女女主⻆角啦
进⼀一步抽象数据
SHOP NOW
18. <svg version="1.1" id="template" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0
0 520 280" enable-background="new 0 0 520 280" xml:space="preserve">
<!-- omitted code here -->
<g>
<g>
<text id="t_x7C_l_x3B_c_4_" transform="matrix(1 0 0 1 33.9126
65.6572)" fill="#333333" font-family="'NotoSansCJKsc-Bold-GBpc-EUC-
H'" font-size="38.8295px">MAKE UP</text>
<text id="t_x7C_l_x3B_c_3_" transform="matrix(1 0 0 1 33.9126
100.873)" fill="#333333" font-family="'NotoSansCJKsc-Bold-GBpc-EUC-
H'" font-size="38.8295px">BEAUT.</text>
<line id="c_2_" fill="none" stroke="#333333" stroke-width="4"
stroke-miterlimit="10" x1="33.9" y1="118.3" x2="80.9" y2="118.3"/>
</g>
<text id="t_x7C_l_x3B_c_2_" transform="matrix(1 0 0 1 33.9126
168.2818)" fill="#333333" font-family="'NotoSansCJKsc-Light-GBpc-EUC-
H'" font-size="38.1809px">美到发光光光</text>
<text id="t_x7C_l_x3B_c_1_" transform="matrix(1 0 0 1 33.9126
199.0152)" fill="#333333" font-family="'NotoSansCJKsc-Black-GBpc-EUC-
H'" font-size="26.6241px">你就是⼥女女主⻆角啦</text>
<g>
<text id="t_x7C_l_x3B_c" transform="matrix(1 0 0 1 33.9126
244.4736)" fill="#333333" font-family="'NotoSansCJKsc-Regular-GBpc-
EUC-H'" font-size="16.1239px">SHOP NOW</text>
<rect id="c_1_" x="128" y="238.8" fill-rule="evenodd" clip-
rule="evenodd" fill="#333333" width="77.4" height="1.1"/>
</g>
</g>
</svg>
{
"tag": "text",
"attrs": {
"nodeId": 66,
"fill": "#333333",
MAKE UP "KaiGen Gothic CN Light",
"fFamily":
BEAUT. 38.1809,
"fSize":
"parent": 80,
初夏新品上市
"align":
"left",
你就是⼥女女主⻆角啦
"value": "初夏新品上市",
SHOP NOW
"w":
229.0854,
"h": 38.1809,
"x": 33.9126,
"y": 168.2818,
"s": 1,
"r": 0
}
}
19. <svg version="1.1" id="template" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0
0 520 280" enable-background="new 0 0 520 280" xml:space="preserve">
<!-- omitted code here -->
<g>
<defs>
<rect id="SVGID_3_" x="266" width="254" height="280"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_4_)">
<image overflow="visible" width="1000" height="1000"
id="i_x7C_254_x2C_280_1_" xlink:href="fake_image_path.png"
transform="matrix(0.324 0 0 0.324 229 -39.0985)">
</image>
</g>
</g>
<g>
<g>
<text id="t_x7C_l_x3B_c_4_" transform="matrix(1 0 0 1 33.9126
65.6572)" fill="#333333" font-family="'NotoSansCJKsc-Bold-GBpc-EUC-
H'" font-size="38.8295px">MAKE UP</text>
<text id="t_x7C_l_x3B_c_3_" transform="matrix(1 0 0 1 33.9126
100.873)" fill="#333333" font-family="'NotoSansCJKsc-Bold-GBpc-EUC-
H'" font-size="38.8295px">BEAUT.</text>
<line id="c_2_" fill="none" stroke="#333333" stroke-width="4"
stroke-miterlimit="10" x1="33.9" y1="118.3" x2="80.9" y2="118.3"/>
</g>
<text id="t_x7C_l_x3B_c_2_" transform="matrix(1 0 0 1 33.9126
168.2818)" fill="#333333" font-family="'NotoSansCJKsc-Light-GBpc-EUC-
H'" font-size="38.1809px">初夏新品上市</text>
<text id="t_x7C_l_x3B_c_1_" transform="matrix(1 0 0 1 33.9126
199.0152)" fill="#333333" font-family="'NotoSansCJKsc-Black-GBpc-EUC-
H'" font-size="26.6241px">你就是⼥女女主⻆角啦</text>
<g>
{
"tag": "image",
"attrs": {
"nodeId": 58,
"parent": 57,
"mx": 266,
"my": 0,
"mw":
254,
MAKE
UP
"mh": 280,
BEAUT.
"w": 1000,
初夏新品上市
"h": 989,
你就是⼥女女主⻆角啦
"ax": 0,
0,
SHOP "ay":
NOW
"x": -15,
"y": 0,
"r": 0,
"s": 0.284,
"url": "fake_image_path.png",
}
}
20. <svg version="1.1" id="template" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 520
280" enable-background="new 0 0 520 280" xml:space="preserve">
<!-- omitted code here -->
<g id="c">
<path fill="#A6173B" d="M491.4,56.2v0.8l-11.7-3.6v-0.8L491.4,56.2z"/>
<path fill="#A6173B" d="M491.4,65.2V66l-11.7-3.6v-0.8L491.4,65.2z"/>
<path fill="#A6173B" d="M491.4,74.2V75l-11.7-3.6v-0.8L491.4,74.2z"/>
<path fill="#A6173B" d="M491.4,83.2V84l-11.7-3.6v-0.8L491.4,83.2z"/>
<path fill="#A6173B" d="M491.4,92.3V93l-11.7-3.6v-0.8L491.4,92.3z"/>
<path fill="#A6173B" d="M491.4,101.3v0.8l-11.7-3.6v-0.8L491.4,101.3z"/>
<path fill="#A6173B" d="M491.4,110.3v0.8l-11.7-3.6v-0.8L491.4,110.3z"/>
<path fill="#A6173B" d="M491.4,119.3v0.8l-11.7-3.6v-0.8L491.4,119.3z"/>
<path fill="#A6173B" d="M491.4,128.3v0.8l-11.7-3.6v-0.8L491.4,128.3z"/>
<path fill="#A6173B" d="M491.4,137.4v0.8l-11.7-3.6v-0.8L491.4,137.4z"/>
<path fill="#A6173B" d="M491.4,146.4v0.8l-11.7-3.6v-0.8L491.4,146.4z"/>
<path fill="#A6173B" d="M491.4,155.4v0.8l-11.7-3.6v-0.8L491.4,155.4z"/>
<path fill="#A6173B" d="M491.4,164.4v0.8l-11.7-3.6v-0.8L491.4,164.4z"/>
<path fill="#A6173B" d="M491.4,173.5v0.8l-11.7-3.6v-0.8L491.4,173.5z"/>
<path fill="#A6173B" d="M491.4,182.5v0.8l-11.7-3.6v-0.8L491.4,182.5z"/>
<path fill="#A6173B" d="M491.4,191.5v0.8l-11.7-3.6v-0.8L491.4,191.5z"/>
<path fill="#A6173B" d="M491.4,200.5v0.8l-11.7-3.6v-0.8L491.4,200.5z"/>
<path fill="#A6173B" d="M491.4,209.6v0.8l-11.7-3.6V206L491.4,209.6z"/>
</g>
<g>
<defs>
<rect id="SVGID_3_" x="266" width="254" height="280"/>
</defs>
<clipPath id="SVGID_4_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_4_)">
<image overflow="visible" width="1000" height="1000"
id="i_x7C_254_x2C_280_1_" xlink:href="fake_image_path.png"
transform="matrix(0.324 0 0 0.324 229 -39.0985)">
</image>
</g>
{
"tag": "customGroup",
"attrs": {
"parent": 79,
"nodeId": 74,
520,
MAKE "templateWidth":
UP
"templateHeight": 280,
BEAUT.
"drawing": "P:491.4|
56.2;F:8;M:11;T:c;P:491.4|
初夏新品上市
57;F:8;M:10;T:c;P:479.7|
你就是⼥女女主⻆角啦
53.4;F:8;M:10;T:c;P:479.7|
SHOP NOW
52.6;F:8;M:10;T:c;P:491.4|
56.2;F:8;M:10;T:c;F:8;M:
6;T:c;......"
}
}
21. 结构化数据优势
22. <rect/>
LOGO <image/>
清凉⼤大作战 <text/>
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
<image/>
BROWSER
native SVG rendering
<path/>
23. <canvas/>
LOGO <img/>
清凉⼤大作战 <p/>
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
<img/>
BROWSER
HTML + canvas rendering
24. LOGO
清凉⼤大作战
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
25. 装饰
图⽚片
⽂文案
LOGO
清凉⼤大作战
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
26. 装饰
图⽚片
⽂文案
LOGO
清凉⼤大作战
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
27. 装饰
图⽚片
⽂文案
LOGO
清凉⼤大作战
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
28. 装饰
图⽚片
⽂文案
LOGO
清凉⼤大作战
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
29. 装饰
宝⻉贝主图
店铺 Logo
图⽚片
⽂文案
LOGO
主标题 副标题 利利益点
清凉⼤大作战 海海量量美⾐衣零点开抢 特价两件包邮
装饰性
Time: 2017.6.1-6.7
30. 装饰
图⽚片
⽂文案
清凉⼤大作战 换季美不不停 美妆感恩季 美鞋新宠 时尚型男 休闲舒适 箱包感恩盛宴 优雅⽓气质 萌⾐衣特卖惠
海海量量美⾐衣零点开抢 当季新品抢不不停⼿手 护肤转场价格触底 ⾼高跟诱惑释放⾃自⼰己 潮搭型格兼具保暖 百搭潮鞋搭配⽆无限 轻巧耐⽤用多隔层 闪闪发光皆礼物 百变萌搭库存有限
特价两件包邮 整点下单⼒力力减50 ⼤大礼包继续送 预售新款⽴立享⼋八折 春季热卖抢鲜购 ⼀一件包邮 新款包包抢先购 畅销⼈人⽓气单品 送好孩⼦子漂亮⾐衣服
Time: 2017.6.1-6.7 NEW ARRIVAL SPECIAL SALE Time: 2017.6.18 HOT SALE ⽴立即购买 不不容错过 尽在 618 ⼤大促 ⻢马上收藏
31. LOGO LOGO LOGO
美鞋新宠 箱包感恩盛宴 优雅⽓气质
⾼高跟诱惑释放⾃自⼰己 轻巧耐⽤用多隔层 闪闪发光皆礼物
预售新款⽴立享⼋八折 新款包包抢先购 畅销⼈人⽓气单品
Time: 2017.6.18 不不容错过 尽在 618 ⼤大促
LOGO LOGO LOGO
美妆感恩季 清凉⼤大作战 换季美不不停
护肤转场价格触底 海海量量美⾐衣零点开抢 当季新品抢不不停⼿手
⼤大礼包继续送 特价两件包邮 整点下单⼒力力减50
SPECIAL SALE Time: 2017.6.1-6.7 NEW ARRIVAL
LOGO LOGO LOGO
时尚型男 休闲舒适 萌⾐衣特卖惠
潮搭型格兼具保暖 百搭潮鞋搭配⽆无限 百变萌搭库存有限
春季热卖抢鲜购 ⼀一件包邮 送好孩⼦子漂亮⾐衣服
HOT SALE ⽴立即购买 ⻢马上收藏
32. 图⽚片实时渲染
33. PV 到达时
实时⽣生成图⽚片
640x200 QPS RT (ms)
ImageMagick 60 200
RUST 3000 10
32 Cores 2.5GHz / 128GB RAM / 600GB SSD
34. Engine
Algorithm
35. Engine
URL
Algorithm
36. Engine
CDN
URL
Algorithm
Realtime Image Rendering Service
37. Realtime Image Rendering Service
Layer Cache
装饰
图⽚片
⽂文案
Image Async Download
时尚型男
潮搭型格兼具保暖
春季热卖抢鲜购
HOT SALE
Font Preload + Glyph Cache
OSS
CDN
38. Engine
CDN
URL
Realtime Image Rendering Service
Algorithm
时尚型男
潮搭型格兼具保暖
春季热卖抢鲜购
HOT SALE
39. Engine
CDN
URL
Realtime Image Rendering Service
Algorithm
时尚型男
潮搭型格兼具保暖
春季热卖抢鲜购
HOT SALE
40. 字形渲染和多国语⾔言
41. LOGO
清凉⼤大作战
⼤大
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
42. LOGO
清凉⼤大作战
海海量量美⾐衣零点开抢
特价两件包邮
Time: 2017.6.1-6.7
⼤大
43. Thai
ติดตามเราเพื่อรับคูปองส่วนลดพิเศษ
ติ
Follow us for special voucher
length charAt(0) charAt(1)
2 ต ิ
ต
44. Thai
ติดตามเราเพื่อรับคูปองส่วนลดพิเศษ
ติ
Follow us for special voucher
length charAt(0) charAt(1)
2 ต ิ
ต
ิด
45. Arabic
خاصة قسيمة على للحصول تابعنا
Follow us for special voucher
تا
length charAt(0) charAt(1)
2 ت ا
ت
46. Arabic
خاصة قسيمة على للحصول تابعنا
Follow us for special voucher
تا
length charAt(0) charAt(1)
2 ت ا
ا ت
47. Arabic
Character Final Medial Initial Isolation
ت
ا ﺖ
ﺎ ﺘ
ﺎ ﺗ
ﺍ ﺕ
ﺍ
48. Arabic
Character
Final
ﺖ
ت
ﺎ
ا
ب ﺐ
Medial Initial Isolation
ﺘ
ﺎ
ﺒ ﺗ
ﺍ
ﺑ ﺕ
ﺍ
ﺏ
49. Arabic
Character
Final
ﺖ
ت
ﺎ
ا
ب ﺐ
Medial Initial Isolation
ﺘ
ﺎ
ﺒ ﺗ
ﺍ
ﺑ ﺕ
ﺍ
ﺏ
50. Arabic
Character
Final
ﺖ
ت
ﺎ
ا
ب ﺐ
Medial Initial Isolation
ﺘ
ﺎ
ﺒ ﺗ
ﺍ
ﺑ ﺕ
ﺍ
ﺏ
51. Arabic
خاصة قسيمة على للحصول تابعنا
Follow us for special voucher
تا
length charAt(0) charAt(1)
2 ت ا
ﺗ
52. Arabic
خاصة قسيمة على للحصول تابعنا
Follow us for special voucher
تا
length charAt(0) charAt(1)
2 ت ا
ﺗﺎ
53. Arabic
خاصة قسيمة على للحصول تابعنا
Follow us for special voucher
تا
length charAt(0) charAt(1)
2 ت ا
ﺎ ﺗ
54. 从线上到线下
55.
56.
57.
58. 4725x4725
59.
60.
61. canvas.custom-group
-layer
567x567
62. 图⽂文创意技术点⼩小结
语义化模板结构
元素级的素材编辑
SVG
JSON
图层缓存
字体渲染引擎
RUST 编程语⾔言
素材异步处理理
线下应⽤用
⼤大尺⼨寸海海报渲染
图⽚片实时渲染
63. ⼯工程让算法成为可能
模板优选
元素优选
模板结构 渲染能⼒力力
模板元素级拆分 图⽚片实时渲染
图⽚片/⽂文案标注 多国语⾔言字体渲染
元素智能配⾊色 ⼤大尺⼨寸渲染优化
图像分析
⾃自然语⾔言
个性化算法
利利益点优选
智能设计
64. 视频创意
65.
66. 视频创意
{ }
JSON
67. {
"clips": [
{
"id": 1,
"videos": [],
"images": [{
"url": "https://fake.alicdn.com/img/001.jpg",
"mx": 0, "my": 0, "mw": 540, "mh": 960
"ax": 270, "ay": 480, "s": 1, "r": 0,
"x": 270, "y": 480, HTML
"w": Canvas
540, "h": 960
}],
"text": [
{"content": "身临其静", "fill": [1, 1, 1]},
{"content": "B&O H9i", "fill": [1, 1, 1]},
{"content": "B&O BEOPLAY", "fill": [1, 1, 1]},
]
}
]
{
"timelines": [
{
"type": "visible",
"items": [
{"ref": 1, "duration":
{"ref": 2, "duration":
{"ref": 3, "duration":
{"ref": 4, "duration":
{"ref": 5, "duration":
{"ref": 6, "duration":
]
}
]
}
}
v
5.0},
6.0},
5.0},
4.0},
5.0},
5.0}
68. 身临其静
主动降噪
身临其静
主动降噪
B&O BEOPLAY
B&O H9i
lottie-web
69.
70. If you want to update text on the canvas renderer, you will need to
export all the characters that need to be updated on a text layer with
the font you're going to use.
71. !
Missing character from exported characters list
72. 缺啥补啥
73. Lottie Canvas 渲染器器⽂文案即时预览
74. D
fontkit
75. D
fontkit
<path d="
M91 740
L294 740
Q468 740 562
Q660 556 660
Q660 190 563
Q469 0 302 0
L91 0
Z
M285 119
Q509 119 509
Q509 622 285
L239 622
L239 119
Z" />
650
373
93
373
622
76. D
"chars": [
{
"ch": "D",
"size": 60,
"style": "Bold",
"w": 71.4,
"data": {...},
"fFamily": "Noto Sans CJK SC"
}
]
77. 0
D
1
{
{
"i": [
[0,0],
[0,0],
[0,25.076],
[22.76,0],
[0,0]
],
"o": [
[0,0],
[21.954,0],
[0,-25.177],
[0,0],
[0,0]
],
"v": [
[9.164,0],
[30.414,0],
[66.467,-37.564],
[29.608,-74.524],
[9.164,-74.524]
],
"c": true
}
"i": [
[0,0],
[0,0],
[0,0],
[0,-18.228],
[13.898,0]
],
"o": [
[0,0],
[0,0],
[13.898,0],
[0,18.127],
[0,0]
],
"v": [
[24.069,-11.984],
[24.069,-62.64],
[28.702,-62.64],
[51.26,-37.564],
[28.702,-11.984]
],
"c": true
}
78. 0
D
1
{
{
"i": [
[0,0],
[0,0],
[0,25.076],
[22.76,0],
[0,0]
],
"o": [
[0,0],
[21.954,0],
[0,-25.177],
[0,0],
[0,0]
],
"v": [
[9.164,0],
[30.414,0],
[66.467,-37.564],
[29.608,-74.524],
[9.164,-74.524]
],
"c": true
}
"i": [
[0,0],
[0,0],
[0,0],
[0,-18.228],
[13.898,0]
],
"o": [
[0,0],
[0,0],
[13.898,0],
[0,18.127],
[0,0]
],
"v": [
[24.069,-11.984],
[24.069,-62.64],
[28.702,-62.64],
[51.26,-37.564],
[28.702,-11.984]
],
"c": true
}
79. -y
0
1
{
(9.164,-74.524)
"i": [
[0,0],
[0,0],
[0,25.076],
[22.76,0],
[0,0]
],
"o": [
[0,0],
[21.954,0],
[0,-25.177],
[0,0],
[0,0]
],
"v": [
[9.164,0],
[30.414,0],
[66.467,-37.564],
[29.608,-74.524],
[9.164,-74.524]
],
"c": true
(29.608,-74.524)
(28.702,-62.64)
(24.069,-62.64)
(51.26,-37.564)
(66.467,-37.564)
(24.069,-11.984)
(28.702,-11.984)
}
O
(9.164,0)
(30.414,0)
{
x
"i": [
[0,0],
[0,0],
[0,0],
[0,-18.228],
[13.898,0]
],
"o": [
[0,0],
[0,0],
[13.898,0],
[0,18.127],
[0,0]
],
"v": [
[24.069,-11.984],
[24.069,-62.64],
[28.702,-62.64],
[51.26,-37.564],
[28.702,-11.984]
],
"c": true
}
80. -y
0
1
{
(9.164,-74.524)
(29.608,-74.524)
(28.702,-62.64)
"i": [
[0,0],
[0,0],
[0,25.076],
[22.76,0],
[0,0]
],
"o": [
[0,0],
[21.954,0],
[0,-25.177],
[0,0],
[0,0]
],
"v": [
[9.164,0],
[30.414,0],
[66.467,-37.564],
[29.608,-74.524],
[9.164,-74.524]
],
"c": true
@(22.76,0)
@(13.898,0)
@(0,-25.177)
(24.069,-62.64)
@(0,-18.228)
(51.26,-37.564)
(66.467,-37.564)
@(0,18.127)
(24.069,-11.984)
@(13.898,0)
@(0,25.076)
(28.702,-11.984)
}
O
(9.164,0)
(30.414,0)
@(21.954,0)
{
x
"i": [
[0,0],
[0,0],
[0,0],
[0,-18.228],
[13.898,0]
],
"o": [
[0,0],
[0,0],
[13.898,0],
[0,18.127],
[0,0]
],
"v": [
[24.069,-11.984],
[24.069,-62.64],
[28.702,-62.64],
[51.26,-37.564],
[28.702,-11.984]
],
"c": true
}
81. -y
0
1
{
D
(9.164,-74.524)
(29.608,-74.524)
(28.702,-62.64)
"i": [
[0,0],
[0,0],
[0,25.076],
[22.76,0],
[0,0]
],
"o": [
[0,0],
[21.954,0],
[0,-25.177],
[0,0],
[0,0]
],
"v": [
[9.164,0],
[30.414,0],
[66.467,-37.564],
[29.608,-74.524],
[9.164,-74.524]
],
"c": true
@(22.76,0)
@(13.898,0)
@(0,-25.177)
(24.069,-62.64)
@(0,-18.228)
(51.26,-37.564)
(66.467,-37.564)
@(0,18.127)
(24.069,-11.984)
@(13.898,0)
@(0,25.076)
(28.702,-11.984)
O
(9.164,0)
(30.414,0)
@(21.954,0)
{
}
x
"i": [
[0,0],
[0,0],
[0,0],
[0,-18.228],
[13.898,0]
],
"o": [
[0,0],
[0,0],
[13.898,0],
[0,18.127],
[0,0]
],
"v": [
[24.069,-11.984],
[24.069,-62.64],
[28.702,-62.64],
[51.26,-37.564],
[28.702,-11.984]
],
"c": true
}
82. -y
0
1
{
D
(9.164,-74.524)
(29.608,-74.524)
(28.702,-62.64)
"i": [
[0,0],
[0,0],
[0,25.076],
[22.76,0],
[0,0]
],
相对坐标
"o": [
[0,0],
[21.954,0],
[0,-25.177],
[0,0],
[0,0]
],
"v": [
[9.164,0],
[30.414,0],
[66.467,-37.564],
[29.608,-74.524],
[9.164,-74.524]
],
"c": true
@(22.76,0)
@(13.898,0)
@(0,-25.177)
(24.069,-62.64)
@(0,-18.228)
(51.26,-37.564)
(66.467,-37.564)
@(0,18.127)
(24.069,-11.984)
@(13.898,0)
@(0,25.076)
(28.702,-11.984)
O
(9.164,0)
(30.414,0)
@(21.954,0)
{
}
x
"i": [
[0,0],
[0,0],
[0,0],
[0,-18.228],
[13.898,0]
],
"o": [
[0,0],
[0,0],
[13.898,0],
[0,18.127],
[0,0]
],
"v": [
[24.069,-11.984],
[24.069,-62.64],
[28.702,-62.64],
[51.26,-37.564],
[28.702,-11.984]
],
"c": true
}
83. -y
0
{
D
(9.164,-74.524)
(29.608,-74.524)
(28.702,-62.64)
@(22.76,0)
@(13.898,0)
@(0,-25.177)
(24.069,-62.64)
@(0,-18.228)
(51.26,-37.564)
(66.467,-37.564)
@(0,18.127)
(24.069,-11.984)
@(13.898,0)
(28.702,-11.984)
O
(9.164,0)
(30.414,0)
@(21.954,0)
@(0,25.076)
1
{
"i": [
"i": [
[9.164,0],
[24.069,-11.984],
[30.414,0],
[24.069,-62.64],
[66.467,-12.488],
[28.702,-62.64],
[52.368,-74.524],
[51.26,-55.792],
[9.164,-74.524]
[42.6,-11.984]
],
绝对坐标 ],
"o": [
"o": [
[9.164,0],
[24.069,-11.984],
[52.368,0],
[24.069,-62.64],
[66.467,-62.741],
[42.6,-62.64],
[29.608,-74.524],
[51.26,-19.437],
[9.164,-74.524]
[28.702,-11.984]
],
],
"v": [
"v": [
[9.164,0],
[24.069,-11.984],
[30.414,0],
[24.069,-62.64],
[66.467,-37.564],
[28.702,-62.64],
[29.608,-74.524],
[51.26,-37.564],
[9.164,-74.524]
[28.702,-11.984]
],
],
"c": true
"c": true
}
}
x
84. 0
{
<path d="
M9.164,0
C9.164,0,30.414,0,30.414,0
C52.368,0,66.467,-12.488,66.467,-37.564
C66.467,-62.741,52.368,-74.524,29.608,-74.524
C29.608,-74.524,9.164,-74.524,9.164,-74.524
C9.164,-74.524,9.164,0,9.164,0
Z
M24.069,-11.984
C24.069,-11.984,24.069,-62.64,24.069,-62.64
C24.069,-62.64,28.702,-62.64,28.702,-62.64
C42.6,-62.64,51.26,-55.792,51.26,-37.564
C51.26,-19.437,42.6,-11.984,28.702,-11.984
C28.702,-11.984,24.069,-11.984,24.069,-11.984
Z
"/>
1
{
"i": [
"i": [
[9.164,0],
[24.069,-11.984],
[30.414,0],
[24.069,-62.64],
[66.467,-12.488],
[28.702,-62.64],
[52.368,-74.524],
[51.26,-55.792],
[9.164,-74.524]
[42.6,-11.984]
],
绝对坐标 ],
"o": [
"o": [
[9.164,0],
[24.069,-11.984],
[52.368,0],
[24.069,-62.64],
[66.467,-62.741],
[42.6,-62.64],
[29.608,-74.524],
[51.26,-19.437],
[9.164,-74.524]
[28.702,-11.984]
],
],
"v": [
"v": [
[9.164,0],
[24.069,-11.984],
[30.414,0],
[24.069,-62.64],
[66.467,-37.564],
[28.702,-62.64],
[29.608,-74.524],
[51.26,-37.564],
[9.164,-74.524]
[28.702,-11.984]
],
],
"c": true
"c": true
}
}
85. lottie -> SVG
<path d="
M9.164,0
C9.164,0,30.414,0,30.414,0
C52.368,0,66.467,-12.488,66.467,-37.564
C66.467,-62.741,52.368,-74.524,29.608,-74.524
C29.608,-74.524,9.164,-74.524,9.164,-74.524
C9.164,-74.524,9.164,0,9.164,0
Z
M24.069,-11.984
C24.069,-11.984,24.069,-62.64,24.069,-62.64
C24.069,-62.64,28.702,-62.64,28.702,-62.64
C42.6,-62.64,51.26,-55.792,51.26,-37.564
C51.26,-19.437,42.6,-11.984,28.702,-11.984
C28.702,-11.984,24.069,-11.984,24.069,-11.984
Z
"/>
Cubic Bézier curve
fontkit
<path d="
M91 740
L294 740
Q468 740 562
Q660 556 660
Q660 190 563
Q469 0 302 0
L91 0
Z
M285 119
Q509 119 509
Q509 622 285
L239 622
L239 119
Z" />
650
373
93
373
622
Quadratic Bézier curve
86. 主动降噪
F
fontkit
Quadratic bézier curve
Cubic bézier curve
{"i": [], "o":[], "v":[]}
87. 图⽂文创意
视频创意
结构化模板/剧本数据
⾃自动化设计到前端流程
语义化元素标注
元素粒度内容变更更
图⽚片实时渲染 服务端视频渲染
多国语⾔言字体渲染 ⽆无动效视频实时渲染
88. 图⽂文创意
视频创意
算法
结构化模板/剧本数据 模板/剧本优选
⾃自动化设计到前端流程 ⾼高效迭代测试
语义化元素标注 多维度元素优选
元素粒度内容变更更 个性化算法
图⽚片实时渲染 服务端视频渲染 智能设计
多国语⾔言字体渲染 ⽆无动效视频实时渲染 素材语义化分析
89. Q & A
90. 谢谢