完整示例
各种场景的视频 Schema 示例
完整示例
本文档提供多个完整的视频 Schema 示例，涵盖各种使用场景。
1. 基础文字动画
简单的文字淡入淡出效果。
{
"meta": {
"version": "2.0.0",
"title": "Basic Text Animation"
},
"video": {
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 5,
"background": "#1a1a2e"
},
"tracks": [
{
"id": "text",
"type": "visual",
"clips": [
{
"id": "title",
"type": "text",
"text": "Welcome",
"start": 0,
"duration": 5,
"transform": {
"x": "50%",
"y": "50%",
"anchor": "center"
},
"style": {
"fontSize": 96,
"fontWeight": 700,
"fill": "#ffffff",
"shadowColor": "#000000",
"shadowBlur": 20
},
"animations": [
{ "type": "fadeIn", "duration": 1 },
{ "type": "slideIn", "direction": "up", "duration": 1 },
{ "type": "fadeOut", "duration": 0.5, "delay": 4.5 }
]
}
]
}
]
}2. 图片轮播
多张图片自动切换的轮播效果。
{
"meta": {
"version": "2.0.0",
"title": "Image Slideshow"
},
"video": {
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 15,
"background": "#000000"
},
"audio": {
"bgm": {
"src": "https://example.com/ambient.mp3",
"volume": 0.4,
"fadeIn": 2,
"fadeOut": 2
}
},
"tracks": [
{
"id": "slideshow",
"type": "visual",
"clips": [
{
"type": "image",
"src": "https://picsum.photos/1920/1080?random=1",
"start": 0,
"duration": 5,
"transform": {
"x": "50%",
"y": "50%",
"width": "100%",
"height": "100%",
"anchor": "center"
},
"animations": [
{ "type": "fadeIn", "duration": 0.8 },
{ "type": "scale", "from": 1, "to": 1.1, "duration": 5 }
],
"zIndex": 1
},
{
"type": "image",
"src": "https://picsum.photos/1920/1080?random=2",
"start": 5,
"duration": 5,
"transform": {
"x": "50%",
"y": "50%",
"width": "100%",
"height": "100%",
"anchor": "center"
},
"animations": [
{ "type": "fadeIn", "duration": 0.8 }
],
"zIndex": 1
}
]
}
]
}3. 产品展示
展示产品特性和价格信息。
{
"meta": {
"version": "2.0.0",
"title": "Product Showcase"
},
"video": {
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"background": "#0f0f0f"
},
"tracks": [
{
"id": "background",
"type": "visual",
"clips": [
{
"type": "rect",
"start": 0,
"duration": 10,
"transform": { "width": "100%", "height": "100%" },
"style": {
"fill": {
"type": "linear",
"angle": 135,
"stops": [
{ "offset": 0, "color": "#1a1a2e" },
{ "offset": 1, "color": "#16213e" }
]
}
},
"zIndex": 0
}
]
},
{
"id": "product",
"type": "visual",
"clips": [
{
"type": "image",
"src": "https://example.com/product.png",
"start": 0,
"duration": 10,
"transform": {
"x": "30%",
"y": "50%",
"width": 600,
"anchor": "center"
},
"animations": [
{ "type": "zoomIn", "duration": 1.5, "easing": "easeOutBack" }
],
"zIndex": 5
}
]
},
{
"id": "info",
"type": "visual",
"clips": [
{
"type": "text",
"text": "智能手表 Pro",
"start": 1.5,
"duration": 8.5,
"transform": { "x": "70%", "y": "40%", "anchor": "center" },
"style": {
"fontSize": 64,
"fill": "#ffffff",
"fontWeight": 700
},
"animations": [
{ "type": "slideIn", "direction": "right", "duration": 0.8 }
],
"zIndex": 10
},
{
"type": "text",
"text": "¥2,999",
"start": 2.5,
"duration": 7.5,
"transform": { "x": "70%", "y": "55%", "anchor": "center" },
"style": {
"fontSize": 48,
"fill": "#ff6b6b",
"fontWeight": 700
},
"zIndex": 10
}
]
}
]
}4. 社交媒体视频（竖版）
适合 Instagram/TikTok 的竖版视频。
{
"meta": {
"version": "2.0.0",
"title": "Social Media Post"
},
"video": {
"width": 1080,
"height": 1920,
"fps": 30,
"duration": 8,
"background": "#000000"
},
"tracks": [
{
"id": "background",
"type": "visual",
"clips": [
{
"type": "image",
"src": "https://picsum.photos/1080/1920",
"start": 0,
"duration": 8,
"transform": {
"x": "50%",
"y": "50%",
"width": "100%",
"height": "100%",
"anchor": "center"
},
"style": {
"filters": [
{ "type": "brightness", "value": 0.7 }
]
},
"zIndex": 0
}
]
},
{
"id": "content",
"type": "visual",
"clips": [
{
"type": "text",
"text": "周一动力",
"start": 0.5,
"duration": 7.5,
"transform": { "x": "50%", "y": "30%", "anchor": "center" },
"style": {
"fontSize": 72,
"fontWeight": 900,
"fill": "#ffffff",
"shadowColor": "#000000",
"shadowBlur": 10
},
"animations": [
{ "type": "zoomIn", "duration": 0.5, "easing": "easeOutBack" }
],
"zIndex": 10
}
]
}
]
}5. 数据可视化
展示数据统计信息。
{
"meta": {
"version": "2.0.0",
"title": "Data Visualization"
},
"video": {
"width": 1920,
"height": 1080,
"fps": 30,
"duration": 10,
"background": "#0a0a0a"
},
"tracks": [
{
"id": "stats",
"type": "visual",
"clips": [
{
"type": "layout",
"start": 1,
"duration": 9,
"transform": {
"x": "50%",
"y": "50%",
"width": 1600,
"anchor": "center"
},
"direction": "horizontal",
"gap": 60,
"justifyContent": "center",
"children": [
{
"type": "layout",
"direction": "vertical",
"gap": 16,
"alignItems": "center",
"start": 0,
"duration": 9,
"children": [
{
"type": "text",
"text": "10M+",
"start": 0,
"duration": 9,
"style": { "fontSize": 80, "fontWeight": 900, "fill": "#3b82f6" },
"animations": [
{ "type": "zoomIn", "duration": 0.8, "easing": "easeOutBack" }
]
},
{
"type": "text",
"text": "用户数",
"start": 0.3,
"duration": 8.7,
"style": { "fontSize": 28, "fill": "#888888" }
}
]
},
{
"type": "layout",
"direction": "vertical",
"gap": 16,
"alignItems": "center",
"start": 0,
"duration": 9,
"children": [
{
"type": "text",
"text": "99.9%",
"start": 0,
"duration": 9,
"style": { "fontSize": 80, "fontWeight": 900, "fill": "#10b981" }
},
{
"type": "text",
"text": "可用性",
"start": 0.5,
"duration": 8.5,
"style": { "fontSize": 28, "fill": "#888888" }
}
]
}
],
"zIndex": 5
}
]
}
]
}最佳实践
- 时间规划：确保所有 clip 的 start + duration 不超过 video.duration
- 层级管理：合理设置 zIndex，避免遮挡问题
- 动画协调：多个动画同时执行时注意时间配合
- 资源优化：使用 assets 预加载重复使用的资源
- 性能考虑：避免过多的滤镜和复杂动画