大型活动中Web 场景动效的那些事儿-俞天翔.pdf

《大型活动中Web 场景动效的那些事儿-俞天翔.pdf》由会员分享，可在线阅读，更多相关《大型活动中Web 场景动效的那些事儿-俞天翔.pdf（36页珍藏版）》请在三个皮匠报告上搜索。

1、Web动效的那些事儿天翔天翔SkylineSkylineAboutAbout MeMe“打杂打杂”工程师工程师游戏直播游戏直播业务中台业务中台小程序平台小程序平台WebViewWebView容器容器激励激励/补贴补贴PCPC站站微信小程序微信小程序大型活动大型活动业务基建业务基建站外分享站外分享Open TracingOpen Tracing基础架构基础架构20122012年年 -师兄帮帮忙师兄帮帮忙20132013年年 -百度百度 -商业生态商业生态20162016年年 -汽车之家汽车之家 -广告投放广告投放20172017年年 -快手快手声明声明：大型打脸现场：大型打脸现场驳驳春晚活动中的

2、降级方案设计与稳定性保障春晚活动中的降级方案设计与稳定性保障GMTCGMTC北京北京 20212021大纲大纲背景：越来越背景：越来越“卷卷”的活动的活动动效分类：帧动效动效分类：帧动效&补间动效补间动效 动效实现方式与拆分原则动效实现方式与拆分原则再谈性能再谈性能 /体积的平衡体积的平衡越来越“卷”的活动越来越越来越“卷卷”的活动的活动以前的活动以前的活动越来越越来越“卷卷”的活动的活动百百 度度QQQQ京京 东东后来的活动后来的活动越来越越来越“卷卷”的活动的活动牵引：强化利益，加强感知牵引：强化利益，加强感知组合：行动组合：行动 +动机动机 -收益收益核心：好玩、有吸引力、眼前一亮核心：

3、好玩、有吸引力、眼前一亮我们的活动我们的活动“万恶之源万恶之源”“那个男人那个男人”动效分类与交付产物动效的分类动效的分类透明视频透明视频APNGAPNGCSSCSSLottieLottieGLTFGLTF /GLBGLBSpineSpine透明视频透明视频CSSCSSAPNG/APNG/WebpWebpLottieLottie帧动效帧动效补间动效补间动效&2121年的我们年的我们现在的我们现在的我们动效的分类帧动效帧动效补间动效补间动效载体载体视频视频图片序列图片序列动图动图CSSCSSLottieLottieGLTFGLTF /GLBGLB /FBXFBXSpineSpine原理原理动画中

4、每一帧均由独立的一张动画中每一帧均由独立的一张“图片图片”来存储来存储在实际动效期间，进行播放，完成动效过程在实际动效期间，进行播放，完成动效过程通过对原始图片素材的切割绘制通过对原始图片素材的切割绘制以及通过插值计算对形变、位移、透明、缩放等以及通过插值计算对形变、位移、透明、缩放等效果进行组合播放，完成动效过程效果进行组合播放，完成动效过程信息存储信息存储像素像素&像素插值等像素插值等“点阵点阵”&贴图贴图表现力表现力完美还原设计师意图完美还原设计师意图“高保真高保真”还原设计师意图还原设计师意图动效的分类 对比优势优势劣势劣势内存占用内存占用CPUCPU占用占用视频视频透明视频透明视频体

5、积适中体积适中自动播放问题自动播放问题（可能）双份内存占用问题（可能）双份内存占用问题高高中中动图动图生产成本小生产成本小体积大体积大高高低低CSSCSS体积小，性能好体积小，性能好表现力受限表现力受限低低低低3D3D体积较小体积较小生产链路较长生产链路较长适中适中中中2D2D骨骼骨骼体积优势明显体积优势明显表现力有局限表现力有局限适中适中中中/低低LottieLottie生产成本比较小生产成本比较小性能堪忧性能堪忧适中适中中中/高高动效的分类动效的分类 生产链路生产链路原画原画3D3D模型模型动作动作特效特效原画原画动作动作特效特效UIUIUXUX动效动效3D3D动效动效 -C4DC4D /

6、3D3D MaxMax /UnityUnity /CocosCocos 2D2D动效动效 -SpineSpine传统传统UXUX -AEAEFBXFBXGLTFGLTF“粒子粒子”SpineSpine“粒子粒子”BodymovinBodymovin序列图片序列图片动效参数动效参数视觉视觉动效拆分原则与实现方式动效拆分原则UIUI区：区：涉及到涉及到UIUI元素元素和和UXUX动效元素动效元素相关的部分相关的部分游戏区：游戏区：涉及到涉及到游戏美术游戏美术相关的交付相关的交付物（物（Spine/3DSpine/3D模型模型）和实）和实际使用区域际使用区域背景区：背景区：主要是背景大图、场景图等主